Jump to content
GreenSock

cotton

Cloned elements and ScrollTrigger.refresh();

Go to solution Solved by Cassie,

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

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

  • Like 3
Link to comment
Share on other sites

Posted (edited)

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 by cottoncreative
Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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!

 

  • Like 1
Link to comment
Share on other sites

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

 

Thanks for sharing!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×