Jump to content
Search Community

Pausing and continuing image sequence (Scrolltrigger)

tobiasger_ test
Moderator Tag

Recommended Posts

I'm using an example created by OSUBlake that recreates the functionality of how Apple are animating their Airpods Pro on scroll, but using GSAP and ScrollTrigger. I'm wondering if it's possible to let the sequence run for a few frames, then pause on a specific frame/specific percent of the container that it's triggered by, and then continue for a few frames and pause again in the same manner?

 

I think this really would decrease the amount of images having to be loaded as the sequence I'm testing this code with have a lot of frames that simply are the same, when the object in question is being still for a certain amount of the sequence.

 

If I've understood it correctly, one approach could be to use a Timeline. Are there any examples of how this is done?

See the Pen 2152a28cffe2c2c0cca8a3e47f7b21c6 by osublake (@osublake) on CodePen

Link to comment
Share on other sites

Hi Tobias - welcome to the GSAP forums. 🥳

Everything is possible with enough time and custom code!

I'm not sure of your exact use case but here's an example using a timeline - with a 1 second delay in between the first sequence and the second sequence.

Because the animation duration is tied to the distance scrolled, that 1 second can be thought of as a percentage of the scroll distance rather than a set time.

 

  • the first tween's duration is 1 second
  • the second tweens duration is 2 seconds
  • and the pause is another 1 second


So the overall duration is 4 seconds.

This means for a quarter of the scroll distance the first tween will play, then the timeline will pause for another quarter of the distance, and the last tween will play for half of the distance.
 

|--------|--------|----------------|
1st tween  pause      2nd tween



See the Pen dyVoOjb?editors=0011 by GreenSock (@GreenSock) on CodePen



I hope this helps!

  • Like 3
Link to comment
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.
×
×
  • Create New...