GSAP Flip Plugin for Animation

gsap-flip-plugin.png

Greensock made the GSAP Flip plugin free in the 3.9 release. FLIP is an animation concept that helps make super performance state-change animations. Ryan Mulligan has a good blog post:

FLIP, coined by Paul Lewis, is an acronym for First, Last, Invert, and Play. The Flip plugin harnesses this technique so that web developers can effortlessly and smoothly transition elements between states.

GSAP Flip plugin logo.

Examples using the GSAP Flip plugin

Taking advantage of FLIP “by hand” is certainly possible, but tricky. It’s an absolutely perfect thing for an animation library to do for us. Greenstock nailed it, as Ryan says:

1. Get the current state
2. Make your state changes
3. Call Flip.from(state, options)

Deliciously simple. Ryan made an “add to cart” effect with it:

I used it just the other day to make a “mini photo gallery” that could rotate which image was the big one on top:

Which, coincidently, is exactly why I ended up blogging “How to Cycle Through Classes on an HTML Element” the other day.


This post was originally posted here

Check out our Starter Sites built with #ToolWeLove including Toolset, Elementor Pro, and Astra Pro.

 

Share this page
We Want To Hear From You

Your feedback is invaluable to our research and product development. Please take a moment to complete the two surveys below to help us best serve

Read More »
Friday Fun: From Idea to Animated Film

https://www.wordfence.com/wp-content/uploads/2022/02/jane-rosie-featured2-1022×1024.pngIt’s Friday, and I thought we’d have fun talking about something a little different. At Wordfence, one of my priorities is fostering a strong creative

Read More »