Carousel Wrap Use- Noob Question

[matttaylor 0 Likes (Newbie)]

Saw this website http://www.invstr.com that uses Greensock. I was wondering how the background ticks(grey rectangles) were in a animated loop that when they past the viewport they automatically started at the top again... could that be achieved somehow with modifiers plugin like the carousel wrap example?

 

Thanks

[Carl 9,066 Likes (Superhero)]

Hi and welcome to the GreenSock forums,

 

I wasn't able to dig through the source code, but my guess would be that they are just using repeating tweens. Not sure ModifiersPlugin would be necessary there.

[matttaylor 0 Likes (Newbie)]

mm.. I understand the concept to go from y-0% to y-100%.but when the page loads the ticks are given a random offset from the top. each one of them has a different duration and then once they exit the view they start at the top without the offset.  I guess that is why they are the pros cause they good..  can't wrap my head around this one... how to reset animation once they leave viewport and continue...

[Carl 9,066 Likes (Superhero)]

Thanks for the clarification. In that case you can create a bunch of repeating tweens that all animate from y:0 to y:500 (or whatever values) but place them in a timeline with randomized start times and durations. Then you can just start the animation by jumping to the middle of the timeline to a point where most of the tweens have made some progress.

 

http://codepen.io/GreenSock/pen/kkYrXP

 

See how play(0) always starts with each element coming in from the top but play(3) starts with some elements with a vertical offset?

 

All elements will wrap up to the top when they get to the bottom because the tweens repeat.