Animating with the Flip Plugin for GSAP

Flip plugin is one of the most advanced and  one of the most advanced plugins that lets you easily animate elements and smoothly change their position is no longer a members-only plugin! Greensock made GSAP Flip plugin free in the 3.9 release. This animation concept takes your web development experience to the next level. Flip plugin lets you seamlessly transition between two states even if there are changes to the structure of the DOM that would normally cause elements to jump. This is called layout shift, which can reduce your site score in Google or other search engines. It is surprisingly easy to code because all the heavy lifting is already done for you.

Flip plugin can give you some serious animation superpowers once you learn to think in terms of "FLIP", an acronym for "First", "Last", "Invert", "Play". Using this plugin lets you set the initial CSS (First) for an element, and the final state (Last). Flip will automatically animate the element so it can move, resize, rotate, and change however it needs. You can easily reverse this animation (Invert), or let it run similarly to a GSAP timeline (Play). Let’s dive into it!

“Flip records the current position/size/rotation of your elements, then you make whatever changes you want, and then Flip applies offsets to make them LOOK like they never moved/resized/rotated and then animates the removal of those offsets!” (Flip. Greensock. https://greensock.com/docs/v3/...)

Let’s add some magic to these cards! We are going to move these cards around just by adding a couple lines of code.

‍

First, we have to include the gsap library.

What we’ll do next – we will add a class to some of the images, let’s call it “.relocate”, and we’ll move it to “.insert” div later.

The next step will be to add javascript to our file.

Gsap also has their own utilities that can get them all for you, just like document.querySelectorAll.

Let’s import Flip plugin of 3.9 release as well.

Next we will need to set a functionality that will put all our images with class “.relocate” in “insert”. First, let’s register our plugin on the top of our script.

Step 1. Capture the state

Flip's getState method is called to collect data about the item's current size and position. This gets stored in a variable before applying other DOM edits, style changes, and so on.

Step 2. Make the changes.

After capturing the initial state data, we need to append the nodes to the ".insert” container.

Step 3. FLIP!

I added repeat with a value of “-1”, which means repeat infinitely and repeatDelay with value of “2” that will delay our animation in 2 seconds.

This example is just an introduction to what you can really achieve by adding this plugin to your project. Reading more documentation and watching tutorials will allow you to create immersive animations that can drastically change the overall experience. Read the documentation here , imagine some animation that you would like to create, use your creativity and start to play around. I hope that I gave you some inspiration, now it’s your turn.

Good luck and have fun!

Helpful resources:

• Codepen example
• GSAP Flip plugin docs
• Flip showcase
• Flip how-to demos

‍