Using GSAP's Flip Plugin in Motion.page! 🔥

Hello guys, welcome back to the channel. In today’s video, I’m going to show you our new plugin which we implemented with the latest release of Motion Page. You may have seen it already — it’s the Flip plugin. There’s a lot to cover in future videos, but in this video, we’re just going to cover the Flip plugin. I’m going to show you how Flip works within Motion Page, and I’ll show you a couple of examples using stagger. We’ll also add some animations to the elements being flipped. Finally, I’ll do a quick user-requested tutorial at the end. So let’s get right into it.

Just to save a little time, I’ve already created a quick setup. I’ll run through it quickly with you. We have a section set to 75vh to give us some scrolling distance. Here we have an element with a background, and I’ve given it a class of .flip-origin. Below it, you’ll see a smaller element, highlighted in a subtle green — this is our flip target. So, origin and target — that’s basically how Flip works. Below that, we just have a duplicate of the first section to give us more scrolling room.

Essentially, Flip allows us to transform an element from its original position to a target position, using JavaScript in the background — GSAP obviously — allowing for very smooth transitions. This is a basic example, but let me show you how to get this working in Motion Page.

I’m going to create a new timeline and call this “Flip Example.” I want this to be triggered on scroll, so I’ll use a scroll trigger and lock it to the scroll bar. I’ll keep it minimal — start at 0.3, and I don’t need to pin anything in this case. Now I’ll target my origin element — the one with the class .flip-origin. This is the main element we want to animate from its original position to the target.

Before I continue, I’m going to change the trigger to “top” and set the start to when the element reaches 50% of the viewport height. That’s a good value.

The Flip plugin is found under “Functional.” Since this is our original position, we’ll use Flip on the “from” side. I’ll select .flip-origin as the source. Then, for the target, I’ll go back to Flip and select .flip-target. Now you can already see it’s transitioning to the target element.

Back in Bricks, I’ll change the color to something more noticeable — a stronger green. Refreshing the page, you can now see it flips to the target. You can also see it scales to the size of the target. Let’s give the target some border-radius to make it a circle. Save that, refresh, and now the target is a circle.

We can add an animation to the origin as well. On .flip-origin, I’ll set the border-radius to 100%. You can now see it animates from a square to a circle. We can also change the background color — let’s say to blue — and even rotate it. Now it rotates into blue.

The nice thing about Flip is that the target element can be hidden. Typically, we just hide it or make it invisible. In this case, I’ll make the background transparent so it’s not visible. Now you can see it transforms like that.

Let’s step this up a bit. Back in Bricks, I’ve added four origin elements and four target elements. I’ll randomize the origin order a bit and give each one unique classes. So we have .flip-origin-2, 1, 4, and 3. The targets are in order: .flip-target-1 through 4. On scroll, we’ll animate the origins to become ordered.

Back in Motion Page, I’ll start by editing the node for origin 1. I’ll flip from .flip-origin-1 to .flip-target-1, and remove the background color and rotation. You can see it now moves to target 1.

I’ve gone ahead and created nodes for each origin/target pair — origin 4 to target 4, and so on. Now you can see the effect. We can also stagger them manually for a nice effect.

I hope this gets your imagination going. Now I’ll show you one more example using stagger.

Instead of unique classes, I’ve made all origin elements share the same class. In Bricks, I’ll remove all but one target element. Now I’ll make all origin elements stagger into the single .flip-target-1.

We’re already targeting the correct classes. I’ll change them all to target number 1 and set the stagger amount to 0.2 seconds. Now you can see all the elements stagger into the target.

Lastly, I’ll show you a quick user-requested tutorial. I’ve created a new page called “Flip Zero” and opened it in Bricks. I’ll set the hero section to 100vh and make the container 100%. I’ll give the container a class of .hero-flip and set height and width to 100%. I’ll also remove padding from the section and give the hero background.

Underneath, I’ll add another section and give it 75vh. I’ll turn it into a grid with two columns and two blocks. The left block will be the flip target with the class .hero-flip-target. The right block will have a heading — H2 with some dummy text.

This is the setup for the user-requested tutorial. Now in Motion Page, I’ll create a new timeline and call it “Flip Hero Example.” Load the new page and set the scroll trigger with lock to scroll bar.

I want the transition to start when the bottom of the hero reaches the bottom of the screen — so “bottom is 100%.” It should end when the hero reaches around 40-50%. I’ll target .hero-flip as the origin, and .hero-flip-target as the destination.

Now when we scroll down, the hero section transforms into the target element — a nice effect. Let’s enhance it by turning the background into a video.

In Bricks, I’ll add a background video to the hero container and save. On the front end, as we scroll, the video element now transitions into the target section. If it looks squashed, that’s because the aspect ratio is off. We can fix that by setting a 16:9 aspect ratio on the target element.

Now the effect maintains the video’s original aspect ratio during the transition. That’s what the customer was going for. I hope this was helpful, and I hope you enjoyed this deep dive into the Flip plugin and how you can use it with Motion Page. It opens the door to a lot of creative possibilities. If you have any questions, let us know in the comments. Thank you very much.