flip GSAP Flip with ScrollTrigger is jumping when active and inactive.

[Rondi]

I hope you are doing well! I'm new with GSAP and I'm having a lot of problems with a complex animation. I tried to create a codepen as simple as possible so you can see what's going on, sorry if it's not very simple. Basically, I'm trying to make an animation like the one used in https://www.revolut.com/ but I can't get it to work, I think I improved the logic of the approach but there is something that keeps making it jump when adding or removing classes. If you need more context or whatever let me know. Thank you very much for your time. 

 

 

See the Pen NWmPapy by Pablo-Rondina (@Pablo-Rondina) on CodePen

[mvaneijgen]

Hi @Rondi welcome to the forum! 

 

Without looking at your code it sounds like you're trying to tackle the scrolling part first instead of focusing on the animation part. This is a classic mistake people make when working with ScrollTrigger. All ScrollTrigger is doing is animating your animation on scroll, so before you add ScrollTrigger you first have to make an animation! Check out the video below 

 

 

 

I would remove all ScrollTrigger code from your setup and just first focus on the animation. Get what you want to happen on page load. And when you got that happening it will be trivial to hook it to ScrollTrigger. 

 

I'm no flip expert, but I don't think it magically changes all elements. Flip always needs 3 steps. Get the state, change the state, animate the state. I only ever used it to tween one element and I think that is also how it works. If you need more elements to change you need to create a Flip state for each element. 

 

Below a fork of your pen where I crate a flip state for '.hero_bg-white' which changes shape via a class and then add a random other tween to the timeline to rotate it. I've enabled GSDevTools to it will be easier to debug the animation. I’ve placed some comments in your JS to better explain things, please be sure to read through them! Hope it helps and happy tweening! 

 

See the Pen PogqoGa?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[Rodrigo]

Hi,

 

@mvaneijgen is right, is better to just focus on getting the Flip animation happening first and then add ScrollTrigger to the mix. Adding ScrollTrigger to this is the simple part of the whole process.

 

Also as Mitchel mentions when animating using Flip's from() method you need to get the state of the element, change the element in some way (reparent, change styles, etc.) and then animate from the initial state. In this case you can also take a look at Flip fit() as well:

https://gsap.com/docs/v3/Plugins/Flip/static.fit()

 

Here are a few demos using ScrollTrigger and Flip:

See the Pen ZEmQBQg by GreenSock (@GreenSock) on CodePen

See the Pen RwqJBEa by GreenSock (@GreenSock) on CodePen

See the Pen JjVPyxd by GreenSock (@GreenSock) on CodePen

 

This is just a Flip demo that shows reparenting a group of elements using Flip fit():

See the Pen JjVPyxd by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

[Rondi]

Hello! First of all thank you for your time. It really helped a lot not to think for the moment about the scrollTrigger and to be attentive to the animation in the Flip. If you check the codepen it is starting to take shape. I'm trying to figure out a slider that has to appear inside the center item. After that I'm going to get back to the scrollTrigger. Thank you very much to the both. I will definitely let you know when it is beautiful