How to set dynamic duration of each tween items

[sathishkumar]

Hi, i have been trying to re-create the this (https://stripe.com/customers) same logo carousel effect, could any one help me to figure out what i am missing. 

See the Pen ymJRGJ by sathishkumarfiresky (@sathishkumarfiresky) on CodePen

[ZachSaucier]

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

[PointC]

I did something similar for another forum thread answer. Maybe this will give you some ideas too.

 

See the Pen KGvZew by PointC (@PointC) on CodePen

 

Happy tweening.

[mikel]

Hey @sathishkumar,

 

Welcome to the GreenSock Forum.

 

Here just another approach ...

 

See the Pen ymaBaB by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel