Flip From delay is not working as I expect

[momo12]

Guys,

 

GSAP Flip is not working as I want. As you can see in the provided demo, it doesn't do anything to add some delay to the animation well. I know I can defined a delay with the settimeout command but Is there a way to fix the provided demo?

 

Does not "dealy" value add delay to the animation?

See the Pen ZEoVeyr by emdesigner-or (@emdesigner-or) on CodePen

[Rodrigo]

Hi,

 

Unfortunately your example is a bit convoluted since you are adding a click event listener to the same button 5 times and on two different ones you are adding a Flip method (lines 56 and 111). That is something very odd to say the least and it seems to be creating some sort of issue. Also the delay you're adding seems to be working as expected.

 

Honestly I think you should isolate only the Flip plugin part first and then add ScrollTrigger and finally Locomotive. You're trying to balance 10 plates at the same time and something is going to brake like this

 

Here is a simple example using the Flip plugin to animate a Flex grid:

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

 

If you can, please simplify your demo to the relevant part of your question, that is Flip plugin so we can take a look at what could be the issue.

 

Happy Tweening!

[momo12]

2 hours ago, Rodrigo said:

Hi,

 

Unfortunately your example is a bit convoluted since you are adding a click event listener to the same button 5 times and on two different ones you are adding a Flip method (lines 56 and 111). That is something very odd to say the least and it seems to be creating some sort of issue. Also the delay you're adding seems to be working as expected.

 

Honestly I think you should isolate only the Flip plugin part first and then add ScrollTrigger and finally Locomotive. You're trying to balance 10 plates at the same time and something is going to brake like this

 

Here is a simple example using the Flip plugin to animate a Flex grid:

 

 

 

If you can, please simplify your demo to the relevant part of your question, that is Flip plugin so we can take a look at what could be the issue.

 

Happy Tweening!

Thanks

I know how to animate the Grid. The thing is the Flip with a delay attribute works weirdly! As you can see inside the below example, there is a hiccup on clicking:

This happens beacuse of the Scale attribute. But is there a way to keep that while using Delay? @Rodrigo

See the Pen xxjeMLa by emdesigner-or (@emdesigner-or) on CodePen

[GreenSock]

It's because you are changing layout in such a way that it completely eliminates the vertical scroll. So it's the scroll that's jumping. You could record it before you make your changes, and then restore it below the Flip.from() call: 

See the Pen GRdLbvm?editors=1010 by GreenSock (@GreenSock) on CodePen

 

Is that what you're looking for?