Weird flip animation when using with scrollTrigger

[skadoosh]

Hi I just discovered GSAP 4-5 days ago. Have seen a lot of amazing demo and play around like crazy this tools really motivate me and spark a lot of ideas and creativity. Thanks for this amazing tool.  I'm working on transforming grid layout with React, locomotive scroll, and GSAP. What I really want to do here is to reveal text and do flip animation on grid cols (2 -> 6)  when scrollTrigger is entered. This work perfectly if I didn't set scrollTrigger but use toggle by pressing the flip button instead you can try it from the codepen. There is a weird animation happen if I setup a scrollTrigger, text will start spinning and instantly change to position. Also, If you flip before the reveal animation end this will cause the text reposition instantly. I would like to make the flip animation scrub too by start at onEnter and stop at some point maybe at the end of section.

See the Pen OJQwBXV by skadooshmp (@skadooshmp) on CodePen

[Cassie]

Hi there Skadoosh,

Really glad to hear you're enjoying the tools!

Some tips and thoughts

- Either add ScrollTriggers to a timeline, or to standalone tweens. Tweens that are added to timelines have relationships to each other and are meant to play in sequence. If one's controlled by scroll and the others aren't you're going to cause logic issues.
 

- With Flip you want to grab the state first, then make DOM changes, then call Flip.from to animate from the old state to the new state. 
(I'm not sure of the order that things are playing in your demo because of the react stuff. Is the Flip useLayoutEffect only called when the layout changes? Not certain... Apologies if you got this right but just to be sure.)

 

- Scrubbing with flip is possible, it's just returning a timeline after all, but it can get complex because of the dynamic nature of FLIP.  If you handle flip in a callback, (like you have here) it's dynamic - i.e. it gets new state positions each time, but it's not technically part of the timeline. It's animating independently. If you need it to be part of a scrubbed timeline you could pre-run the Flip.from(), grab the timeline it returns and add it into your main timeline - it'll work with scrubbing but it's not going to be dynamic. So if the user resizes the screen you'd have to handle that somehow.

TLDR - Mixing timelines, scrubbing and FLIP animations is a little fiddly.

Here's a new starting point with React and loco stripped out - just focused just on the scrollTrigger/FLIP part. Maybe we can step through this together and find a solution?

See the Pen qBxyQLa?editors=0110 by GreenSock (@GreenSock) on CodePen

[skadoosh]

Thank you for you tips and thoughts. It seems like the problem either come from React or timeline. I will try to recreate a new starting point on React and investigate what cause the problem.

[skadoosh]

Update:  I just find out the cause of problem here. Have made slightly change from my codepen. It looks like setIsRow is called synchronously with Flip getState. I try to add delay by wrapping setIsRow with setTimeout to ensure that Flip getState is called first before the DOM change as you mentioned and it works perfectly. 

 

See the Pen jOZvVdG by skadooshmp (@skadooshmp) on CodePen

 

[Cassie]

Glad to hear you got it fixed! Nice work 🥳