Jump to content
GreenSock

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

creating and maintaining an animation queue

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hello,

 

I'm trying to solve a problem that I've wondered about for a while. What I would like to do is have a framework where elements animate in when they enter the viewport. However, if the screen shows three at once, then I would like them to animate in consecutively. Because of different size screens, scroll speeds, etc., the exact number of elements could vary.

 

To me, a good way of solving this would be to add the entrance animation to a timeline that acts as a queue and then once the timeline completes to empty out the queue. I've tried implementing this but I can't get the results to work. Could you let me know your thoughts. Thanks very much in advance! 

See the Pen mdbxgRW by ericshew (@ericshew) on CodePen

Link to comment
Share on other sites

Hey Eric,

 

The core approach is as follows:

  • Create the timeline animation that you want, adding labels after each element's animation. Make sure that the timeline is paused.
  • In the scroll event, check to see if any new elements are visible. If an element is newly visible, play the timeline to the label after the corresponding animation for that element. You can do that using GSAP's timeline's tweenTo() method.

Happy tweening!

  • Like 2
Link to comment
Share on other sites

 

9 hours ago, ericshew said:

What I would like to do is have a framework where elements animate in when they enter the viewport. However, if the screen shows three at once, then I would like them to animate in consecutively. Because of different size screens, scroll speeds, etc., the exact number of elements could vary.

 

That sounds pretty complicated because the scroll speed of the user isn't predictable. And a scroll event might fire every 16ms (it might be much faster than that with touch), so a lot of what's on the screen can change during those intervals. You would be adding animations to a queue for elements that might be out of view on the next tick, which would be delaying animations that do need to play.

 

To trigger animations when they are in the viewport, I've been using the Intersection Obsever API.

https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API

 

 

This demo is set up to animate elements by the row:

 

See the Pen 6fd214ecd74e7091ec7b609bb0270f97 by osublake (@osublake) on CodePen

 

  • Like 5
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.
×