Infinite Elements using GSAP

[ebinabo 9 Likes (Newbie)]

Hello everyone,

 

I'm trying to achieve the same effect as seen here 

See the Pen ba262dac3da9d7f47b81e2adb7fa0fd3 by a-trost (@a-trost) on CodePen

Doesn't seem to be working properly. I also tried setting the y value back to 0 in the tl

See the Pen pobGKGM by ebinabo (@ebinabo) on CodePen

[ebinabo 9 Likes (Newbie)]

Ideally the first image should go right under the next one after it goes out of view. This might be better with images that are longer than the wrapper actually?

[Shrug ¯\_(ツ)_/¯ 947 Likes (Leader)]

Have a look at the ModifiersPlugin for infinite possibilities 😉

[ebinabo 9 Likes (Newbie)]

@Shrug ¯\_(ツ)_/¯ alright, could you let me know how it can be used in this case?

[ZachSaucier 7,152 Likes (Superhero)]

Hey ebinabo. First off, when creating edits of demos that you've posted in these forums, please make sure to use the "fork" button so that the previous version is retained. That way we have context. Right now your attempt is gone because you've been playing with things.

 

There are two ways to create this sort of effect: 

1. Do it like the demo that you show does it: you duplicate the content and then use code similar to what you had originally. Just make sure the animation moves all the content but only goes to far enough to where the duplicate is in the exact position as the start - then loop.
2. Use the modifiers plugin like Shrug suggested. In this case it'd be best to break up each line into its own element (perhaps SplitText would be helpful for that). Then use an approach similar to the one in this thread.