Frame animation - "freeze" some frames

[Robero]

Hi there!

 

I'm trying to create a page like Airpods of apple. I'm starting from the codepen provided inside the ScrollTrigger documentation.

I would like to "freeze" some specific frame for a couple of seconds while scrolling (for example, the 10th frame for a couple of seconds), in order to have time to make some text caption enter on screen on that particolar point.

 

One solution could be to duplicate the same frame multiple times, but I would drasticaly increase the size of tha page. Could you help me find a better solution?

 

Thank you!!

See the Pen 2152a28cffe2c2c0cca8a3e47f7b21c6?editors=0010 by osublake (@osublake) on CodePen

[ZachSaucier]

Hey Robero. 

 

Using your exact methodology the only way I can think of making particular frames appear longer is by using a custom ease.

 

Depending on your exact needs it may make more sense to 

• Split the animation into smaller sections. Then between the sections you have the pausing.
• Use a different method like using individual tweens for each <img> instead. Then you can make some longer by affecting its duration.