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?

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! https://codepen.io/oldflattop/pen/vYvEwQX?editors=0010

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. https://codepen.io/oldflattop/pen/mdaygJQ 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. https://codepen.io/oldflattop/pen/qBLEvwX 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 ?

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!

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