Card Animation with Decoy Cards

[value32]

Dear GSAP Team

 

I am working on a card animation like this one on https://stripe.com/de/payments with two moving cards beneath the active card. I managed to cycle through 3 decoy cards which grow bigger and change color. On the last animation step there is an onComplete callback which sets the card back "beneath every other cards" after it fades into the void. from there this card is being animated with ".to" again through each step. Everything is fine except now I have to be able to make the cards clickable with a next button. The decoy animation breaks obviously when the onComplete-Callback isn't triggered (which happens if i click too fast). So my questions is – how would the best practice look like? am I on the right path cycling decoy cards through animation steps? Do I only need to create a "4th invisible step" so that I am not bound to use the OnComplete-Callback? Somehow I have difficulties to do that 😕Would the animation work even if i click faster than the duration of the single steps? (I assume so?). I also looked into https://greensock.com/docs/v2/Plugins/ModifiersPlugin but I couldn't figure out to use it correctly with gsap3 nor am I experienced enough to learn/understand this on the fly. I would love to provide a codepen but i am in the middle of the project. I saw that stripe also uses 4 decoy cards.

 

Any help is much appreciated!

 

 

[ZachSaucier]

Hey value32 and welcome. Thanks for being a Club GreenSock member! We couldn't do what we do without people like you.

 

44 minutes ago, value32 said:

The decoy animation breaks obviously when the onComplete-Callback isn't triggered (which happens if i click too fast).

There's an onInterrupt callback as well. Maybe you could reposition is in the onComplete and onInterrupt?

 

44 minutes ago, value32 said:

am I on the right path cycling decoy cards through animation steps?

I think so.

 

44 minutes ago, value32 said:

Do I only need to create a "4th invisible step" so that I am not bound to use the OnComplete-Callback?

Probably not.

 

44 minutes ago, value32 said:

I would love to provide a codepen but i am in the middle of the project.

Without a demo we can only help with the theory/logic, not code  If you'd like code help please provide a demo.