Delay only the keyframes part of the animation.

[johndoe000]

In the provided codepen example, what I desire is whenever the content is near to the screen, I want the content to remain its original size, and whenever its farther, scale it down to 0.5. When on left or right side, scale it down to 0.75 so that the effect looks somewhat like 3d. Right now all of the content is scaling without delay or stagger.

 

I've tried delay and stagger inside keyframes hoping they work, they didn't. I can't use it outside the keyframes because then the MotionPath will get affected as well. Is there like a callback I can use ? is there something for start and end for keyframes as well something like the MotionPathPlugin has ?

See the Pen VwRPoQd?editors=1011 by green_viper (@green_viper) on CodePen

[mvaneijgen]

I'm not sure on which topic this was replied, but this seems like the logic you're searching for. Hope it helps and happy tweening! 

 

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

 

Found the topic, maybe handy for some more context

 

 

[johndoe000]

So there is no adding like a delay or a stagger ? Code seems a little big for such small effect, does it not ? Also, I wanted to ask, can't we use call back on all keyframes options like stagger, direction, ease ? Not on this particular example, but in general.

[mvaneijgen]

Probably, there are always multiple ways to come to the same solution, but that depends on how much time you want to spend on it or on what your skill level is.  Seen that this solution was given by Greensock them self I would figure that this is the most robust solution, I myself can't think of a better way, but feel free to come up with a solution that is even better. 

 

As I'm reading the documentation  https://gsap.com/docs/v3/GSAP/Tween/#keyframes callbacks also work in the keyframes themselves

Quote

 

Both the Object keyframes and the Percentage keyframes behave similarly to tweens, so you can leverage callbacks like onStart and onComplete.

 But it is always better to provide a minimal demo with your question, so that we can see your question in context. Hope it helps and happy tweening! 

[PointC]

This animation is so much easier when its all in the same SVG using a path that has been cut to the proper starting point as the motionPath. That way you only need a tween for each target along the path and a yoyo tween set to half the duration of the motion for the scale. Something like this:

See the Pen YzgZexM by PointC (@PointC) on CodePen