Advanced Flipbox on scroll

How to import code

Another example of an interesting combination of several animation effects. It’s a complex solution and the key point of this animation is the correct timings for multi-animation chains. So, here I want to explain one solution that is surprisingly not documented well on the GSAP site – multiple animations on scroll.

So, in GS you can add multiple animation chains very easily – In the animation panel, enable GSAP and click on the next button to add chains.

Preparation for setup

So, we need to add a container block, which will be used for rotation on scroll and we put these two images. They must be the same size, so, to be sure that we don’t have different images, we can simply put static size. In this case, I prefer to set ratio + cover scaling

My options for image blocks will be next

One image will have position absolute and 0 for all position options. We will turn this image to zero opacity when block is 50% rotated. For this, we need proper timing

Timing in Animation Chains

This is most important part and it’s not well documented on GSAP site. So, let me explain.

When you do multiple animations, they are started each after the other by default, but you can set a custom time. Usually, I use symbols

< – which means that this animation will start at the same time as the previous

<1 – this means that it will start after 1 second.

More details about timing placeholders are on GSAP site

But what about Scroll interpolated multi-animations? In this case, we can’t use seconds for starting animation points, because it’s triggered by scroll, so we can’t know how fast user scrolls. Right?

No. GSAP has a specific hack for this. So, imagine that you set Shift Y option 500px and enable scroll interpolation. So, the object moves to 500px while the user scrolls between the start and end trigger points. What if we need to start another animation once the user reaches 250px (it’s 50% of the animation)

Well, the hack is to use duration. First of all, set all your animations (initial and all animations attached to the timeline) to be Linear easing. This way easing will not affect timing. Now, in initial animation options, set a specific duration, for example, I set 2sec (or 2000 ms).

Now, if I want some animation to start at the middle point of the initial animation and end at the same time as the initial animation, I need to set the start time as <1, which means start after 1 second (which is half of the previous animation) and duration as 1 (1+1=2 so it will end in the same time as initial animation)

In other words, when you enable interpolation, not only transformation is interpolated but also duration). So, in the same way, if you build a timeline block with 5 points and you need to trigger 5 points in the proper time, set the initial animation as 5 seconds and set each additional animation as 1-second duration and <1 as the start time. This will perfectly trigger all animations in the proper points

Remember, that <1 symbol means the starting point from the previous animation. if you need, for example, the starting point of the initial animation, simply put 1 (which means 1 second from the timeline start)

Flip animation

Let’s back to our animation. We just need to animate rotation in Y axis and change the opacity of one of the images exactly in half of the rotation.

I also attached the clipping effect + brightness. Don’t forget that we need to set the initial clip-path on the block and filter. For the initial clip-path, I used one of the ready presets in the Animation panel. For filters, you can find them in the Background panel

Now, in each animation, I also set clip-path and filter via an additional option feature

Again, I set the brightness as 1 on the initial, then, 4 for half point of animation, and back to 1.

To add the Mouse react option, I put everything inside another container and added Mouse react effect, which is easy to make in Greenshift.