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


Bonus: Spring based animations

I also highly recommend looking at spring animations. These type of animations don't have a "duration" in the classical sense and run based on some variables (constraints). These give you live updated animations that run as long as they need to reach a destination state while looking very natural. I consider these specially good for designs that update properties on runtime (like with drag & drop, sliders) etc. The anime.js animation engine supports these type of animations (using Mass, Stiffness, Velocity and Damping). So, make sure to check them out in the documentation with a live demonstrations found here:


Little side note: Back in the day, these type of live animation howling in on the target has been my go-to solution before being introduced to the fixed duration easing by Robert Penner. Love the fancy visualizers and graphs to understand and explain them.
6 Likes