Method to display series of PNG images on scroll

I’m looking to have a series of PNG images appear/disappear in sequence, based on the page’s scroll position. The end result will appear as a 3d model of a helmet, which rotates when the page is scrolled (HERE is a related example of an image sequence). I’ve currently implemented this by stitching all of the PNG images together horizontally, and moving that image in discrete steps from left → right in order to create the same effect. However, I’m running into limitations on the size of the stitched image, and it seems like there should be a cleaner and more efficient way to implement this effect with each of the individual PNG images. I’ve looked into using other software such as Keyshot or Sketchfab, but those don’t seem to work (easily) with page scrolling. Thanks for any advice!


Here is my public share link: https://preview.webflow.com/preview/ryans-blank-site-fca7fd?utm_medium=preview_link&utm_source=dashboard&utm_content=ryans-blank-site-fca7fd&preview=88b6d4a3588e33df0ee2ad6dc5fd2d9f&mode=preview
(how to access public share link)

Very hard for now to solve this by webflow interactions (For long sequence).

The best idea is to use scrollmagic (JS - CSS advanced knowledge require):
https://scrollmagic.io/examples/expert/image_sequence.html

scrollmagic pin option - Pin an element for the duration of the scene (pin = position: fixed) - harder to get this effect on webflow:
https://scrollmagic.io/examples/basic/simple_pinning.html

tutorial (Close to your solution - one sprite and position):

Thank you! This implementation looks exactly what I’m going for. I’m not too familiar with JS/CSS in Webflow, but I’ll give it a shot. I appreciate your advice!

Great :slight_smile:

Write to me in private if you want help (This is more freelancer task - but i will give you some directions).

Start here:
https://scrollmagic.io/examples/basic/simple_tweening.html
+
On youtube/google you find endless tutorials about scrollmagic (Very famous plugin).