Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Frame animation - "freeze" some frames

Recommended Posts

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

Link to post
Share on other sites

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. 
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.