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

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.

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.