Control Image Sequence frames being scrolled on each scroll

[kozarkar]

I am trying to create an image sequence animation, similar to what's on the apple websites. What you see in my codepen works fine, but I want to improve on it. Right now, on each scroll more than one frame is being scrolled. At first I was thinking of having the animation move one frame on each scroll, but that would mean user would need to scroll more to finish the animation. I've tried changing the scrub value and adjusting the start and end values but I can't figure out how to precisely control how many frames are scrolled through on each scroll.
Would appreciate any help on this and any other suggestions to improve performance or smoothness.

As for the setup, I have 3 sections, with the first and last being of 100vh. The second section is where my animation is and it is pinned. My animation has 241 frames, all webp files currently being hosted on github pages. I've scrolled a bit through the forums on how to tackle image sequencing and come up with what I have right now. 

Also, I have the same animation made in 31,61 and 121 frames(images) as well. I assume higher frame count(more images) would give a smoother experience so I'm using 241 images. I also have a sprite of the same with  241 images here -

 

however I can't figure out how to use that. Would appreciate help with that, If the performance is better with a sprite I would use that instead. Also I will convert the sprite to webp, just to add an imgur link I've used png

My goal is to have a smooth animation similar to what we see in an apple website. 

See the Pen VwVVyjg by kozarkar (@kozarkar) on CodePen

Edited July 29, 2023 by kozarkar
Upadated post name to a more apt one

[GreenSock]

On 7/29/2023 at 3:49 AM, kozarkar said:

Right now, on each scroll more than one frame is being scrolled.

What do you mean by "each scroll"? Some people scroll with a mouse wheel on windows that has a "click" for each wheel tick, some have wheels that spin freely and you can flick them, some have touchpads they can use two fingers and drag to do scrolling, some drag the scrollbar, some are on outch devices and swipe their finger...so the concept of "one scroll" is wildly different for each one.

 

If you want to sense scroll-like behaviors, you might want to look into using Observer plugin. 

 

As for performance, that's a very deep topic and we don't really have the resources to walk you through it all but I'll offer a few comments: 

• The more images you have, the more you're forcing the user to have to download. So "load performance" and "runtime/execution performance" are both things you'll have to factor in. Yes, the more images you have, the more inbetween states you can show, but you'll also need extra time to load each frame. At some point it becomes crazy. Like if you had to load 100,000 images of course that'd be terrible.
• If you use a sprite sheet, you'd have to animate the backgroundPosition -OR- just move the x/y position of the image inside of a container <div> with overflow: hidden. You'd use a SteppedEase for that because you want it to jump to each new position, so the number of steps would correlate to the number of frames in the sprite sheet. 
• You could apply all the sprite sheet rendering logic in an onUpdate that'd do the snapping to the appropriate frame and positioning of the image.

If you need more help, I think you'll probably be wandering into custom paid consulting territory which you're welcome to contact us about. 

 

Good luck!

[kozarkar]

Thank you  for taking the time to reply back. For the 'each scroll' part, I didn't quite explain it properly.  I guess what I wanted to know was what controls how much a user has to scroll the reach the end of the animation. From what I understand it's based on the distance(height) of the whole thing. 

[mvaneijgen]

The end property controls that. You've set it to 1200%, if your element is let's say 500px the end point will be 6000px down the page from the top of the element. By default a tween has a duration of 0.5 seconds, at the moment you have just one tween of 0.5 which gets stretched over 6000px, this isn't really important at the moment but is good to keep in mind. Because if a ScrollTrigger controls a timeline with multiple tweens it still will stretch the whole timeline duration to that 6000px, so if you had a tween of 0.5 seconds and a tween of 1 second the first tween would play over 2000px and the second tween would play over the rest eg 4000px. 

 

If you set markers: true it will show you where it stops and starts, this can be really helpful when debugging. Hope it helps and happy tweening! 

 

See the Pen PoxXboz?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[kozarkar]

Got it. I also had a related question. If you notice, towards the end of the animation, and when we move into the 3rd section, the whole thing gets a bit choppy. Is there a way to improve that within my code or is this to do with there simply being too many images

[Rodrigo]

Hi,

 

I don't see any performance issues on my end at least and as far as I can tell that shouldn't be too much of a problem with canvas. Ideally you'd like to optimize your spritesheet as much as possible (smallest possible size and dpi resolution) without loosing too much quality.

 

Another option you can try is PIXI spritesheet animation:

https://pixijs.io/examples/#/sprite/animatedsprite-jet.js

 

In this post @OSUblake goes into some detail about how it can be done:

 

Hopefully this helps.

Happy Tweening!