Cloned elements and ScrollTrigger.refresh();

[cotton 13 Likes (Newbie)]

Hello

 

I'm working on a loop that clones a section as the previous section reaches the bottom of the page so it gives the illusion of an infinite scroll. I've got a forEach utility set up looking for all elements with certain speed classes to add a ScrollTrigger parallax effect to them. This works fine on the first 'master' element but all the cloned ones, while having the inline transform applied, don't animate.

 

In the clone function I've included a ScrollTrigger.refresh(true); but it doesn't appear to have any affect.

 

Any help would be greatly appreciated.

 

 

 

 

See the Pen popMjpw by Cottonltd (@Cottonltd) on CodePen

[Cassie 5,115 Likes (Superhero)]

Hey there! You'll need to create a new animation for each new element added into the DOM...

See the Pen XWVvjBv?editors=1010 by GreenSock (@GreenSock) on CodePen

[cotton 13 Likes (Newbie)]

Hi Cassie

 

Thanks for getting back, really appreciate it. Apologies it's taken a while to reply.

 

This is a really lovely cloning solution. I tried to get my head around the meta-infinite scroll examples but it just wasn't sinking in. This is super simple!

 

I've implemented the ScrollTrigger.create cloning the whole container of elements (because the site uses dynamic content and animation options/speed) which works great but the cloned elements aren't animating still.

 

What am I missing?

 

See the Pen wvyaJGL by Cottonltd (@Cottonltd) on CodePen

Edited May 4, 2022 by cottoncreative

[Cassie 5,115 Likes (Superhero)]

Heya!

 

(FYI - I increased the speeds so I could see easily.)

You weren't scoping stuff correctly and some of the elements you were targeting didn't exist.

 

In the onLeave callback you just need to look for any elements inside the new element you've created, you shouldn't be targeting all the elements in the entire DOM.

 

In terms of the elements that didn't exist. Console logs are your friend for stuff like this.

 

See the Pen mdXJWqg?editors=0010 by GreenSock (@GreenSock) on CodePen

Hope this helps.

[Cassie 5,115 Likes (Superhero)]

16 minutes ago, cottoncreative said:

I tried to get my head around the meta-infinite scroll examples but it just wasn't sinking in. This is super simple!

Which examples in particular? Just out of interest! Trying to make learning more simple for folks

[cotton 13 Likes (Newbie)]

1 minute ago, Cassie said:

Which examples in particular? Just out of interest! Trying to make learning more simple for folks

 

It was this: https://css-tricks.com/going-meta-gsap-the-quest-for-perfect-infinite-scrolling/

I think it was because there is an overwhelming amount of (good) info/explanation there, whereas the codepen you did was just like, ping!

 

[Cassie 5,115 Likes (Superhero)]

Ha. Yeah I was gonna guess that one. It confuses a lot of people.

 

Thanks for sharing!