Pinned Scroll Story

Desktop · 1280px · shown at 0% · edit the text, images and colours in the panel

Related Section Templates

51 sectionsView all →
1–5 of 51
Scroll effects

Pinned Scroll Story

Responsive · Animated
Scroll effects

Stacking Cards

Responsive · Animated
Scroll effects

Horizontal Scroll Gallery

Responsive · Animated
Scroll effects

Scroll Path Timeline

Responsive · Animated
FAQ

Split FAQ With Contact Card

Responsive · Animated

Pinned Scroll Story — Free Website Section Template

Scroll effects · v1.0.0 · Updated 2026-10-22 · Responsive · GSAP animation · HTML, React & Vue

CategoryScroll effects
Tagsscrollpinnedstickyscrollytellingproduct tourgsaplight
Updated October 20, 2026

What's included

Features

Steps scroll while the image stage stays pinned
Crossfade to each step’s image as it reaches the middle
Active step highlighted, others gently faded
2 to 6 steps with image, label, title and text
Stacks into image-and-text steps on phones
Complete without JavaScript and while editing
GSAP ScrollTrigger, reduced motion respected
Export HTML, a ZIP, React or Vue, or fork to My Code

About this section

Pinned Scroll Story — Free Scrollytelling Section

Pinned Scroll Story: A scrollytelling section for product tours and stories. On larger screens the steps scroll up one by one while an image stage beside them stays pinned and crossfades to the image of the step in view; the active step is highlighted. On phones and without JavaScript every step simply shows its own image above its text.

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.

Why use it

Why Use the Pinned Scroll Story

🎬
Tells a story in order
One idea at a time, with the right picture beside it, is easier to follow than a wall of features.
📌
The picture stays put
The pinned stage keeps the visual in view while the words change, so readers never lose context.
📱
Graceful on phones
Small screens get a clean sequence of image and text steps instead of a cramped pinned layout.

How it’s different

How It’s Different From Other Free Section Templates

✎
Editable, not just copyable
Change text, links, images, colours and fonts in the browser before you export, instead of editing someone else’s code by hand.
◐
One theme for every section
Colours, fonts, radius and width are shared CSS variables, so every section you combine looks like one website.
⇲
Responsive by container
Container queries make each section adapt to its own width, in a full page, a column or a page builder.
✦
GSAP animation built in
Every section animates in with GSAP and ScrollTrigger, stays visible without JavaScript and respects reduced motion.
</>
HTML, React and Vue
Export a single HTML file, a ZIP with your images, a React component or a Vue component, or fork the code into My Code.
◍
Free, private, saved
No account and no watermark. Designs, uploaded images and fonts stay in your browser, with a backup file you can restore anywhere.

Step by step

How to Use

  1. 1
    Edit the contentFill in the heading and steps in the panel. Wrap words in *asterisks* to colour them.
  2. 2
    Add your imagesUpload your own images (resized in your browser and kept on your device) or paste a hosted image URL.
  3. 3
    Match your brandPick a colour preset or exact colours, choose heading and body fonts from Google Fonts or your own uploaded font, set the corner radius and width, or apply your brand kit.
  4. 4
    Animate and previewChoose a GSAP entrance effect and speed, press Play animation, and check the section on desktop, tablet and mobile.
  5. 5
    Save and exportSave it to My designs, then export a single HTML file, a ZIP with your images, a React or Vue component, or fork it into My Code.

Real-world uses

Common Use Cases

🧭
Product tour
Walk new visitors through plan, collaborate, automate and report with a screenshot for each step, so they understand the product before they ever sign up.
📖
Brand story
Tell how the company started, what it believes and where it is going, with a photo for each chapter that changes as readers scroll through the story.
🏗️
Case study
Show the brief, the process and the result of a client project, swapping between before, work-in-progress and final images beside each part of the story.
🧪
How it is made
Explain how a product is sourced, made and delivered, with a pinned photo for each stage so customers can see the craft behind what they buy.

Got questions?

Frequently Asked Questions

Also called scrollytelling: content that changes as you scroll. Here, text steps scroll past while a pinned image beside them switches to match the step in view.

Three to five. Each step takes most of a screen height on desktop, so more than six makes the section long; split longer stories into two sections.

Below 900px each step shows its own image above its title and text, in a simple vertical sequence with no pinning.

The export uses images, but you can replace an image with a muted, looping video in the exported HTML; the crossfade works on any element in the stage.

It saves an editable copy of your Pinned Scroll Story in My Code, the UI Snippets code editor: the section markup goes in the HTML panel, its CSS (theme variables, base styles and layout) in the CSS panel, and the GSAP library is added as a CDN link, so you can keep refining the code and save your own versions.

Yes. It is free for personal and commercial websites, with no sign-up, no watermark and no attribution required. Everything runs in your browser and your edits are saved locally.