X Bookmarks — 2023 KW20: Scroll-Driven Image Sequences with Framer Motion

May 18, 2023

|bookmarks

by Florian Narr

X Bookmarks — 2023 KW20: Scroll-Driven Image Sequences with Framer Motion

@austin_malerba — scroll-driven image sequence component

Play a sequence of images on scroll:

<ImageSequence
    images={images}
    width={1464}
    height={824}
    progress={scrollYProgress}
/>

https://codesandbox.io/s/imagesequence-xgvgiy

Smart, because the API is exactly right — you pass scrollYProgress directly from useScroll, and the component maps it to a frame index. No timeline config, no keyframe arrays. The abstraction is just thin enough that you could actually use this in production without fighting it.