3.9 release

loading...

FLIP animations for everyone!​

Flip plugin can give you some serious animation superpowers once you learn to think in terms of "FLIP" ("First", "Last", "Invert", "Play"). Here's a demo that explains the technique:

loading...

Sometimes you'll need to deal with state changes that you can't control, or reparenting of elements. Maybe a thumbnail image needs to transition to fill the viewport with position: fixed, or a grid of elements must get smoothly re-ordered within a flexbox container. This is where Flip Plugin shines!

Here's an example where a video that's in the flow of text seamlessly transitions into position: fixed in the corner when you scroll far enough:

loading...

Even when the original position of elements could change - like in this spinning container, FLIP will handle the transition with ease.

loading...

And here's a fan-favorite showing a grid of tiles you can filter by color and Flip smooths everything out:

loading...

New additions to the keyframe syntax​

Keyframes are a great way to animate a target through multiple steps while keeping your code nice and concise. You can think of them as a sub-timeline nested inside a tween

Here's a reminder of the existing syntax.

gsap.to('.elem', {
	keyframes: [
		{ x: 100, duration: 1 },
		{ y: 200, duration: 1, delay: 0.5 }, // create a 0.5 second gap
		{ rotation: 360, duration: 2, delay: -0.25 } // overlap by 0.25 seconds
	]
});

New Keyframe options​

Percent-based keyframes​

This familiar syntax will make porting animations over from CSS a breeze!
Instead of using delays and duration in the keyframes themselves, you specify the styles you want at certain waypoints during the animation, and just like CSS, if you omit a property from one of the keyframes the value will interpolate across that gap.

gsap.to('.elem', {
	keyframes: {
		'0%': { x: 100, y: 100 },
		'75%': { x: 0 },
		'100%': { x: 50, y: 50 }
	},
	duration: 2
});

Array-of-values​

Just define an Array of values and they'll get equally distributed. So simple! And you don't need to make sure the Arrays are equal in length. Plenty of flexibility.

gsap.to('.elem', {
	keyframes: {
		x: [100, 0, 50],
		y: [100, 0, 50]
	},
	duration: 2
});

Demos​

With Object keyframes and Percentage keyframes you can drill down and add different eases into individual keyframes.

loading...

You can even combine multiple easing properties, keyframes and normal tween values. 🤯

gsap.to('.box', {
	keyframes: {
		y: [0, 80, -10, 30, 0],
		ease: 'none', // ease across the entire set of keyframes (defaults to the one defined in the tween, or "none" if one isn't defined there)
		easeEach: 'power2.inOut' // ease between each keyframe (defaults to "power1.inOut")
	},
	rotate: 180,
	ease: 'elastic', // the "normal" part of the tween. In this case, it affects "rotate" because it's outside the keyframes
	duration: 5,
	stagger: 0.2
});

loading...

And more...​

Resources​

Happy tweening!