Jump to content
GreenSock

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

creating and maintaining an animation queue

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

Share this post


Link to post
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 1

Share this post


Link to post
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 4

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×