Adding a flip animation to a timeline with a scrolltrigger

[gregor]

Hello, I have already created the animation with your help (without flip plugin) 

 

Now I want to use the flip plugin because i've never used it before and wanted to know how easy it is to rewrite it.... but ehm yeah, I don't get it HAHA

 

That's how far I've come... I'm still struggling with how to apply the flip animation to my existing timeline with a scrollTrigger....

 

I've tried creating a separate scrollTrigger onStart, but to no success... if anyone can give me a tip on how to recreate this with the flip plugin, I'd be very grateful

See the Pen ExJjyvg?editors=1011 by destroy90210 (@destroy90210) on CodePen

[Rodrigo]

Hi,

 

Your setup is extremely convoluted and creating quite some issues. Better follow the approach in this post by Jack:

 

Hopefully this helps.

Happy Tweening!

[gregor]

Hello, thank you very much for your answer. Based on that I was able to create the flip effect on its own.

What I don't know is how to combine it with a timeline with scrolltrigger so that the flip is executed exactly between 2 other animations

 

[gregor]

hmm codepen does not appear, try to link it here again

hmm still not loaded... ok I paste it as a string instead of a link

 

https://codepen.io/destroy90210/pen/ExJjyvg?editors=1011

 

[gregor]

I have played around to create a timeline and use call() to start flip, that works.

 

I just have a problem with the timing, because during the flip the main timeline should be paused. I tried to stop and restart it and set the playhead with seek.... but then the scroll trigger of the main timeline does not work...

 

Is this generally the right approach? or should adding a flip to a timeline be done completely differently?

 

See the Pen poBjEvJ?editors=1011 by destroy90210 (@destroy90210) on CodePen

ok small update I played around with enabling and disabling scrollTrigger but still no success

See the Pen XWQmNRP?editors=1011 by destroy90210 (@destroy90210) on CodePen

[gregor]

Ok, I have a nice self conversation

 

tl.add() is the better option, the only thing I don't understand is why it jumps from the first tween in the timeline back to opacity 0.5.... when the flip animation is completed...

 

See the Pen poBjery?editors=1011 by destroy90210 (@destroy90210) on CodePen

 

Update:  ok I think i got it, i need to add opacity: 1 also to the final state, because this would be used at the end as inlinestyles...

  gsap.set(el_scalingTile, {
    width: "100%",
    height: "100vh",
    top: 0,
    left: 0,
    position: "absolute",
    opacity: 1 // <----
  });

 

[Rodrigo]

Yeah that's to be expected. In order to work it's magic Flip does a LOT of stuff under the hood, so when a Flip animation is done it has to run some code in order to clear some styles that are added while the Flip animation is running. This seems to fix it though:

tl.add(Flip.from(stateInit, {
  absolute: true,
  onComplete: () => gsap.set(el_scalingTile, { opacity: 1 }),
}));

Hopefully this helps.

Happy Tweening!

[gregor]

ah you have been quicker, thank you for your answer