Amazing Animation Engine Anime JS

There is a new version of Animate JS in town ... 3.0. Great for animating many elements, particle system and much more… specially that elements not created in Hype can’t be animated with setElementProperty.

5 Likes

Hi Max,

I’ve been messing around with this over the past few days.
I would definitely call myself a front end web/graphic designer and I’m having trouble getting to grips with how to set this up on Hype, do you have an example you could show me? or maybe some pointers?

Would be much appreciated.

Cheers,
Alex

Okay, this answer took some time. I overlooked the request but better late then never … also it might help somebody else wanting to use anime.js with Hype. The need for another animation engine arises when setElemenProperty doesn't support a property or you need built in complete and staggering etc. The thing we need to do if we use another animation engine is to let Hype know that we did so (at least on the values reachable by us). The following function does just that:

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) );
		}
	});
}

This function would be called when a anime.js call completes:

	anime({
		targets: '.circle',
		translateX: '250px',
		translateY: '150px',
		backgroundColor: '#FFF',
		rotateY: '360deg',
		rotateX: '360deg',
		easing: 'easeInOutQuad',
		
		changeComplete: function(anim){
			// sync Hype to our new values
			hypeDocument.syncHypeToAnime(anim);
		},
		
		delay: anime.stagger(50)
	})

Also, left and top are translateX and translateY if you haven't enabled the left/top legacy setting in the document panel. Update: This syncing step is only needed if you're animating Hype elements but the sync function now includes a check for that.

Have fun with anime.js



Anime-Example.hype.zip (25,3 KB)


Read about all the possibilities of anime.js in the beautifully animated documentation.
There is also a Medium post on this topic found in Hype Satellite

4 Likes