Jump to content
Search Community

How to set dynamic duration of each tween items

sathishkumar test
Moderator Tag

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 Sathish and welcome to the forums. 


All those images on the Stripe site sure are slow to load on my internet. 


I understand what you're trying to do in your approach but I might take a different approach. I'd try to do it by:

  • Positioning all of your images to the right of the viewport, each with a random Y.
  • Creating a tween to move them from the right of the viewport to left of the viewport.
  • Set the delay for each randomly between 0 and the negative of the total duration you want to have for the animation (or randomly set the progress between 0 and 1).
  • Looping the tween infinitely. 

To me this approach seems more simple and requires a lot less of a headache of calculations.


Alternatively, you could use approximately the same approach that you currently have but use the Modifiers plugin to detect when you should move the bubbles back to the right side. Here's a simple demo using that approach with blocks.


See the Pen OKNadm by GreenSock (@GreenSock) on CodePen

  • Like 2
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...