Infinitely scroll content without jitter

[oldflattop]

Hi everyone,

 

Been reading this forum a lot in the past years and it's always helped me a ton, so thanks!

 

I'm working on a site that's supposed to repeat on itself infinitely, like this reference: https://www.redis.agency/

From what I gather, they are not using any native scroll events, but instead highjacking the scroll and moving each container with transforms, creating the loop and parallax effect. 

 

Method

• Each container has two copies of the same content
• When the container has been moved (scrolled) to a value equal to the element height of one of the copies, the transform is reset to create the illusion of a loop

I've gotten this much to work using Observer and basic gsap "y: value" animation based on self.deltaY.

 

Problem

The problem is that if I apply a duration and an easing to the animation (for a fluid scrolling look), it breaks the illusion as it loops back because it jerks down instead of transitioning smoothly from 0 to heightOfElement.

 

Any ideas on how this effect can work with a smooth ease and animation duration?

Thanks!

 

/Paul

 

See the Pen JjworVY by oldflattop (@oldflattop) on CodePen

[Rodrigo]

Hi Paul!

 

I think the best course of action here is to create the animations so they work without any plugin (either SrollTrigger or Observer) and once you have that, use one of the plugins to get the effect you're looking for, given the specific events you want to target.

 

If you ask me the best course of action here would be the Vertical  Endless Loop helper function and the Observer plugin:

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

 

Here is a super simple example:

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

 

This is just half the battle but unfortunately I don't have enough time right now to make it work the way you want. Hopefully this helps and is a good enough starting point.

Happy Tweening!

[oldflattop]

Thanks for the quick reply Rodrigo! I was looking at the helper function earlier but couldn't see how I could make it work, but it makes sense now that you lay it out for me. 

 

I will give it a go!

 

I also came across the wrap function (https://greensock.com/docs/v3/GSAP/UtilityMethods/wrap()), could this also serve as a solution to the specific problem I described above - having a smooth animation across a value range that loops at a specific point?

 

Thanks again!

[oldflattop]

Hi again, 

 

I've now tried to implement both approaches. The vertical endless loop helper function almost got me there - but I only got it to work scrolling down, not up. It also seems a bit jittery as the animation slows down, and it doesn't allow me to set the easing function used (?)

 

How would I go about making this able to scroll upwards as well?

I don't know if the mapping I'm using to turn the deltaY value into a time value for the timeline is the culprit.

See the Pen mdaygJQ by oldflattop (@oldflattop) on CodePen

 

I also tried using the wrap utility, but it had the same effect as manually clamping the numbers using if/else statements, as in my first post. 

Meaning, I'm not able to use any duration or easing on the animation, as then it starts jumping back and forth between the numbers. 

See the Pen qBLEvwX by oldflattop (@oldflattop) on CodePen

 

Sorry if the codepens are not embedded, the function seems to be broken on my setup, don't know what's happening!

 

Thankful for any help 🙏

[oldflattop]

Okay! So I made some progress on the vertical scroll helper. Got it working upwards by skipping the map range function, instead using a quick division to get a usable time value from self.deltaY, and also giving the animation a small offset to start. This is working but seems a bit hacky, I would also ideally want the animations ease into their positions.

 

Any thoughts on how to smooth it out?

Again thanks a lot for your time!

 

See the Pen vYvEwQX?editors=0010 by oldflattop (@oldflattop) on CodePen

[Rodrigo]

Hi Paul,

 

This is not the complete job but it should provide a good starting point:

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

 

Hopefully this helps.

Happy Tweening!

[oldflattop]

Hi again Rodrigo, 

 

Thanks for this, you demo is definitely smoother! 

Could you point me a bit in what direction I would need to take this in order for it to still feel like natural scrolling while keeping it smooth like your example?

[Rodrigo]

Hi Paul,

 

That is not a simple thing to do, emulating native scroll and make it smooth. Basically that would be the closest to re-create the ScrollSmoother plugin in a certain way. Unfortunately we don't have the time resources to create complex custom solutions for our users.

 

This is the closest I can get to that without investing a bunch of hours in it, which presents the problem with negative values and an odd jump:

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

 

If you want you can hire us on a consulting basis or create a thread in the Jobs & Freelance forums in order to get help there.

 

Good luck with your project!

Happy Tweening!

[Cassie]

Honestly the simplest option here would likely just be to stick with normal scrolling so you can trigger animations nicely with ScrollTrigger, then pair it up with Lenis for smoothness - largely because Lenis has an infinite option.

It's tricky to do infinite smooth scroll with ScrollSmoother or I'd suggest our own smooth scrolling option. But in this case - this does seem like the right fit for Lenis.