GSAP Flip

By Gregg Fine.October 14, 2022
GSAP Flip tutorial

In this article, we'll look at a cool plugin from GSAP called Flip. (This is a free plugin, at the time of this article, so you should be able to follow along.)

GSAP Flip is all about seamlessly transitioning elements in your web page between two different states. It makes transitions that would be very difficult to accomplish a whole lot easier to pull off!

The term Flip is derived from an acronym, coined by developer Paul Lewis. The acronym stands for first-last-invert-play

Flip is an acronym for first, last, invert, play

Flip Examples

Here's an example of the Flip plug-in in action from a codepen by Chris Coyier.

Here we have a mini gallery. You'll see a large featured image on top and two smaller images on the bottom.

When one of the bottom images is clicked, it seamlessly transitions to become the larger featured image.

A Codepen by Chris Coyier demonstrating the GSAP Flip plugin

Here's another Flip example from a codepen by Ryan Mulligan. Notice that clicking on a box results in it getting moved out of its containing box down to the shopping cart in the lower right.

A Codepen by Ryan Mulligan demonstrating the GSAP Flip plugin

The Flip plugin enables us to create these types of seamless transitions.

Installing Flip

Let's get started by installing the Flip plugin and GSAP core.

Go to the GSAP installation page and find the GSAP 3 Install Helper(note: GSAP is at version 3 at the time of this article).

Under the CDN Extra Plugins tab, make sure that Flip is checked. Now, find the two necessary script tags below in the "Browser code" section. (The first one is the GSAP core library. The second one is for the Flip plugin).

Click on the "COPY CODE" button. Then, you can paste these script tags into your HTML file. (generally, you'd want to paste them before the closing body tag)

Let's Write Some Code!

Let's create an example where we re-parent a div into another div(rotated 30 degrees) in response to a click event.

Here's how the final result will look:

A div being re-parented into another div using GSAP Flip


In an HTML file, let's begin by creating two divs: one with a class of container and one with a class of box.

<body>
  <div class="container"></div>
  <div class="box"></div>
</body>

Let's also create some CSS styles for these elements.

.box {
  width: 100px;
  height: 100px;
  background-color: blue;
}
.container {
  border: 1px solid #000;
  width: 200px;
  height: 200px;
  margin-left: 40%;
  margin-top: 10%;
  transform: rotate(-30deg);
}

Now let's do some basic JavaScript setup.

We'll start by "registering" the Flip plugin:

gsap.registerPlugin(Flip);

After that, let's get references to the container and the box elements.

gsap.registerPlugin(Flip);

const container = document.querySelector(".container");
const box = document.querySelector(".box");

First

Now that we have some initial setup out of the way, let's satisfy the First part of the Flip acronym: getting the initial state of the element.

For this, the Flip plugin gives us a method called getState. We pass in the box div to getState because it's the element we want to re-parent. And getState will record it's initial rotation, size, position, and skew.

gsap.registerPlugin(Flip);

const container = document.querySelector(".container");
const box = document.querySelector(".box");

document.addEventListener("click", (e) => {
  let state = Flip.getState(".box");
});

Last

The next step of the process is called Last.

In this step, we want to do something to the element to put it into its final state.

For example, we could add a class to the element using the classList method. And that added class could do various things such as changing its size, rotation, position, etc.

Another example of a Last state would be something where we re-parent the element. And that's exactly what we're going to do.

We'll take our container element and use the appendChild method to re-parent the box div.

gsap.registerPlugin(Flip);

const container = document.querySelector(".container");
const box = document.querySelector(".box");

document.addEventListener("click", (e) => {
  let state = Flip.getState(".box");
  container.appendChild(box);
});

Invert and Play

Then, finally, we'll look at Invert and Play.

To work with these steps, the Flip plugin provides a method called from. The from method is where the real magic happens because it makes the transition happen automatically. ✨


The from method takes two arguments:

  • the state or initial state that was recorded
  • an options object (If you've worked with GSAP, you're probably familiar with the options object. This options object can contain properties like duration and ease.)
gsap.registerPlugin(Flip);

const container = document.querySelector(".container");
const box = document.querySelector(".box");

document.addEventListener("click", (e) => {
  let state = Flip.getState(".box");
  container.appendChild(box);
  Flip.from(state, { duration: 1, ease: "power1.out" });
});

During the Invert and Play stages, Flip already knows about the initial and final states of the element. So it can apply offsets to the element to make it appear first in its initial state. Then it animates the removal of those offsets to transition it to its final state.

Check out the video below to further solidify your understanding of the GSAP Flip plugin!

gsap flip video