thomasbosc

Thank you for that great explanation, it makes much more sense and your proposed solution does give me a somewhat controllable input to drive my loop's speed! I'll now mark this thread as solved as I keep trying to upgrade a few areas and reach better scalability! Next steps: Figuring out a way to have const spriteWidth = 150; // in pixels be dynamic based on my .sprite element's width set in CSS, to have better/easier control over the animation's size on all breakpoints. Figuring out a way to make const tl = gsap.timeline({ repeat: #,}); somehow dynamic, based on the height of the scrollable section, so that the animation's speed is constant whether the scroller is 400vh or 1200vh. I'll be tinkering with that in a separate Codepen and remain open to any suggestions on how best to tackle these two points Thank you so much, @Rodrigo!!

Hello! I'm trying to animate a looping sprite sheet as I scroll through a section, using ScrollTrigger. Essentially, like this amazing example by Redis: https://www.redis.agency/. They seem to rely on Lottie, so perhaps using the Lottie Helper for ScrollTrigger would be a better solution? Here are some insights: My sheet is made of 60 frames, and I'm animating the background-position of my sprite element using ScrollTrigger, but would like to control the rest using CSS: position, size and style of the sprite I would love to have some form of control on how much scroll to do for one full completion of the sprite sheet, as the sections I'll be scrolling through can have very different heights I would like the sprite sheet to keep animating for as long as I can scroll within its parent element. The sprites are looping! Ideal solution would be being able to say that a full sprite completion should be X00 VH long and the animation should reset the background position every time it reaches this threshold, and to do so for as long as I can scroll in the parent. Say the parent element is 600vh and I declare a variable of 200vh for a full completion of my sprite sheet; the sprite should be able to loop three times within this parent. I'm very new to GSAP and have been loving the little things I've been able to do so far, but it's seems I've hit a wall and would appreciate any guidance Resources I have tried on the forum: Thank you!! #EDIT: here's an updated codepen where I got the looping part fixed, but the animation loop is way too fast and I can't seem to control that: https://codepen.io/thomasbosc/pen/oNadjRO