Pinned Scroll Story walks visitors through a sequence, one step at a time. On larger screens the steps scroll up on the left while an image stage on the right stays pinned and crossfades to the picture for the step in view; the active step is highlighted and the others fade back.

Scrollytelling made editable

Steps are a list of 2 to 6, each with an image, a label such as "01 · Plan", a title and text. Change the order and the story follows, because every step carries its own image.

Works everywhere

On phones, without JavaScript and while editing, each step simply shows its image above its text, so the content is complete in every situation. The pinned layout switches on from 900px with GSAP ScrollTrigger and respects reduced motion.

Pairs well

Use it after a hero for a product tour, or follow it with a Stacking Cards section for features. Export HTML, a ZIP, React or Vue.

Getting the most from it

Treat each scene as one sentence of your story: a clear heading, two or three lines of text and an image that shows the point. Three to five scenes keep the pinned section short enough to enjoy rather than endure. Order the scenes the way you would explain the idea to a friend, from the problem to the result, and end on a scene that leads naturally into your call to action. Use images with a similar crop so the transitions stay smooth.