GSAP + ScrollTrigger — Looping sprite sheet animation on scroll

[thomasbosc]

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: 

See the Pen oNadjRO by thomasbosc (@thomasbosc) on CodePen

[Rodrigo]

Hi @thomasbosc and welcome to the GreenSock forums!

 

The issue here is the repeat: -1 you have in your timeline. So this is what's happening:

• You create a timeline that is repeating endlessly, not going to stop until the end of times, with an infinite duration.
• Then you tell ScrollTrigger: "Here is this animation that lasts forever, I want you to scrub this animation's progress in this amount of scroll".

See where this goes wrong? ScrollTrigger, as great as it is, it can't do that because is logically impossible. ScrollTrigger does is best, which ends up with the animation going crazy fast.

 

You can set a number of repeats for your timeline that looks nice and is enough repetitions to achieve the effect you want. I used this in your codepen and it looks good and has good speed:

const tl = gsap.timeline({
  repeat: 4,
});

Hopefully this helps.

Happy Tweening!

[thomasbosc]

15 minutes ago, Rodrigo said:

You can set a number of repeats for your timeline that looks nice and is enough repetitions to achieve the effect you want. I used this in your codepen and it looks good and has good speed:

const tl = gsap.timeline({
  repeat: 4,
});

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!!

[Rodrigo]

Hi,

 

Instead of worrying about fitting your element in your DOM and tinkering with your CSS, it could be a better idea to use canvas as @OSUblake shows in this thread:

As for the repeat number, that's pretty much a trial an error approach. I'd go in the route of getting a certain max number of repeats based on the scroll amount or the height of the section that affects that particular animation. So test in the smallest possible screen and get the number of repeats there with that particular screen and section heights. You'll have a ratio of section height, to screen height, to number of repeats. Or just use the section height and number of repeats. The latter seems easier to begin with.

 

Happy Tweening!