Infinite scroll with scrolltrigger, anchor links

[joris-rotteveel]

Hi team,

 

I made an infinite scroll with scrolltrigger and pretty stoked with the result.

Could someone perhaps shed a thought on how I could add scroll to certain ypos positions and adhering the loop.

For example, if I have scrolled up to 0.9 percent, and I want to scroll (via code) to , say 0.2 percent. Ideally I don't want to animate the scroll backwards ( so from 0.9, 0.89,0.7,0.6....0.2) but keep going forward,( so 0.9.,0.95,0.99,LOOP,0.1....0.2)

 

Is this even feasible?

See the Pen poZrdXe by joris-rotteveel (@joris-rotteveel) on CodePen

[GreenSock]

You could use a modifier for that. For example, let's say we have a box that should only animate between 0 and 500, but once it goes beyond 500, it should wrap back to the start (0). If the box starts at x: 400 and we want to animate to 300...normally that would go BACKWARDS...but if we want it to wrap all the way around in the forward direction (right), we'd just have to do the math to figure out how far that'd be. So going from 400 to 500 is 100px, then it'd wrap around to 0 and go another 300px...thus that's a total of 400px. Basically, we animate to an x of 800 and throw a modifier on there to do the wrapping for us: 

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

[joris-rotteveel]

Thanks Jack,

 

I'll look into `modifiers` a bit more as they seem crucial for more elaborate use cases!