Infinite Gallery loop with ScrollTrigger issue

[diewaves]

Hi guys! I'm pretty new using gsap, I started a few months ago.

I'm trying to make an infinite loop gallery but I'm unable to make it work correctly. I've started with 5 divs into a wrapper. When the trigger reaches 70% of the body, it clones and appends a new container.

I've added some scale animations with a timeline, but I really don't understand why it doesn't work on the appended items.

I've searched on the forum but I didn't find something similar.

Hope you can help me!
Thanks!

See the Pen bGxGKJv by diewaves (@diewaves) on CodePen

[Rodrigo]

Hi @diewaves and welcome to the GreenSock forums!

 

I think you are over engineering this quite a bit. ScrollTrigger Batch is made for this:

https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.batch()

 

Here is a live example:

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

 

Hpefully this helps. Let us know if you have more questions.

Happy Tweening!

[diewaves]

Hi Rodrigo! Yes I think I have complicated myself too much. This is very helpful and it is the behavior I was looking for.  
Thank you so much! 

[diewaves]

Hi guys! I'm really close now to the behavior I was looking for.
The idea is to have a gallery with different images, so I need to clone and append each item of the array. I made it work, but I'm wondering if I can use the scrub thing to trigger the animation scrolling up too. I mean when I scroll up, reversing the animation, like the normal behavior of ScrollTrigger. I think I'am close to get it using onLeave and onEnterBack parameters.

 

See the Pen zYJYVpr by diewaves (@diewaves) on CodePen

 

[Rodrigo]

Hi,

 

As far as I know scrub is not available in ScrollTrigger batch, because the way batch actually works, which is using specific callbacks to trigger animations.

 

If you want to scrub the animations you'll have to go back to looping each element, creating the animation with the ScrollTrigger configuration and refreshing when you add new elements.

 

You'll have to weigh in the pros and cons of each approach.

Happy Tweening!

[GreenSock]

7 hours ago, Rodrigo said:

As far as I know scrub is not available in ScrollTrigger batch, because the way batch actually works, which is using specific callbacks to trigger animations.

Yeah, just to elaborate a bit on this, it wouldn't make sense for .batch() to work with scrub because in order to scrub, each of the resulting ScrollTriggers would need an animation to scrub. But .batch() doesn't have an animation for each element. See what I mean?

 

You can create a new animation inside callbacks like onEnter, onLeave, etc. but that's an entirely different concept. 

 

If you passed one animation into .batch(), that also wouldn't make sense to wire up to each element's ScrollTrigger because then you'd have a whole bunch of different ScrollTriggers with different start/end positions that are all fighting to control the same animation's playhead.  

[diewaves]

Hi guys! I'm totally  understand now. Thank so much you two. 

I'm very close to get the behavior expected using onLeave, onEnterBack parameters. 
I'm doing it on this website, but there are two things I'm not get to work fine.
https://latitude.alvarosancha.com/

Sometimes the cloneNode function doesn't copy well the src of the image. And another is the infinite scroll doesn't work fine on mobile. I think is about the rescaling viewport effect with the browser nav bar. I will work on it to find the problem.