Skip to content

Instantly share code, notes, and snippets.

@worldoptimizer
Created September 18, 2020 19:51
Show Gist options
  • Save worldoptimizer/dbc5e52b7fbcb9949aa0a6ee273eddea to your computer and use it in GitHub Desktop.
Save worldoptimizer/dbc5e52b7fbcb9949aa0a6ee273eddea to your computer and use it in GitHub Desktop.
Sync values animated in Anime.js to Hype
hypeDocument.syncHypeToAnime = function(anim){
var reverselookup = {'translateX': 'left', 'translateY': 'top'}
anim.animations.forEach(function(a){
if (!a.animatable.target.classList.contains('HYPE_element')) return;
if (['top','left','translateX', 'translateY', 'width','height','rotateZ','scaleX','scaleY','opacity','z-index'].includes(a.property)){
var hypeProp = reverselookup[a.property] || a.property;
hypeDocument.setElementProperty(a.animatable.target, hypeProp, parseFloat(a.currentValue) );
}
});
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment