Guide · Web design

How to Make a Flowy Website (2026): Smooth Scroll, Scroll Animation and Video Scrub

By Frontage Studios · Updated September 2026

A flowy website is one where scrolling feels like moving through a single continuous piece, not flipping between stacked boxes. This guide covers every way to build one in 2026, from no-code tools to Apple-style scroll-scrubbed video, and the part most tutorials skip: keeping the site fast and readable by ChatGPT and Google.

What "flowy" actually means

People use "flowy" for a feeling, so it helps to break it into parts you can build. Sites that earn the word almost always share five traits.

1. Scroll-linked motion. Things move because you scrolled, and they move back when you scroll up. Animations that fire once on a timer feel like pop-ups. Animations bound to scroll feel like the page is physical.
2. Continuity between sections. One section hands off to the next: an image keeps moving as the next headline arrives, a background color shifts gradually, a pinned element stays while content passes over it. Hard edges between full-width blocks break the flow.
3. Planned pacing. Each moment gets a deliberate amount of scroll distance. Too little and it flashes past. Too much and the reader feels stuck.
4. Smooth input. Wheel and trackpad scrolling feel eased rather than stepped, without fighting the user's own device settings.
5. Restraint and speed. A flowy site never stutters. One strong signature move beats twenty competing effects, and 60 frames per second on a mid-range phone matters more than any single animation.

Pick your build path

There are five realistic ways to get there. They stack: most polished sites use CSS for small reveals, a library for pinned sections, and video for one hero moment.

Step 1: Storyboard the scroll before touching code

Flow is a writing problem before it is a code problem. Write the page as a short sequence of beats, one idea per beat, and assign each beat a scroll length in viewport-heights (vh). A useful starting rhythm:

• Hook (1 viewport): one headline and one visual. No scrolling tricks yet.
• Tension and turn (1.5 viewports each): the problem your visitor has, then the shift.
• Signature moment (2 viewports, pinned): the one effect people remember, such as a product assembling or a camera flying through a scene.
• Proof (normal scrolling): specifics, examples, prices, reviews. This is where readers slow down, so stop animating.
• Action (1 viewport): a single call to action.

The homepage at frontagestudios.com follows exactly this shape: six video segments weighted between 0.5 and 2 viewports each, with copy windows that fade in and out at set fractions of the total scroll. Writing those numbers down first is what keeps the result from feeling random.

Step 2: Smooth scrolling

The native option

For anchor links, one line of CSS is enough. It respects the operating system's reduced-motion setting if you guard it:

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

Eased wheel scrolling with Lenis

The "buttery" feel on award-winning sites usually comes from Lenis, a small open-source library that eases wheel and trackpad input while keeping native scrolling, so position: sticky, anchor links and the browser's find-in-page keep working. Use a gentle setting. Heavy smoothing makes a page feel laggy and is the most common complaint about "smooth scroll" sites.

import Lenis from "lenis";
const lenis = new Lenis({ lerp: 0.1 }); // 0.1 is gentle; lower = floatier
function raf(time) { lenis.raf(time); requestAnimationFrame(raf); }
requestAnimationFrame(raf);

Leave touch devices on native scrolling. Phones already have momentum scrolling, and overriding it feels wrong to users.

Step 3: CSS scroll-driven animations (no JavaScript)

Since 2023, CSS can bind any keyframe animation to scroll with animation-timeline. scroll() tracks a scroll container, and view() tracks an element as it crosses the viewport. As of September 2026, this runs in Chrome and Edge 115+ and Safari 26. Firefox has it on in Nightly but still behind the layout.css.scroll-driven-animations.enabled flag in stable, so treat it as progressive enhancement.

A reveal that fades and rises as each block enters the screen:

@keyframes reveal {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal {
      animation: reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 25%;
    }
  }
}

A reading progress bar, which this page uses at the top of the screen:

.progress {
  position: fixed; inset: 0 0 auto 0; height: 3px;
  background: #E3A44A; transform-origin: 0 50%;
  animation: grow linear both;
  animation-timeline: scroll(root);
}
@keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

Because these run on the browser's compositor thread, they stay smooth even when the main thread is busy. That makes them the cheapest way to add flow to any site, including WordPress and Shopify themes where you can only add CSS.

Step 4: Pinning and timelines with GSAP ScrollTrigger and Lenis

When a section needs to pin in place while several things happen in order, CSS alone gets awkward. GSAP ScrollTrigger is the standard tool. Since Webflow acquired GreenSock, GSAP and every plugin, including ScrollTrigger, are free for commercial use.

import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import Lenis from "lenis";
gsap.registerPlugin(ScrollTrigger);

// Drive Lenis from GSAP's ticker so both share one clock.
const lenis = new Lenis();
lenis.on("scroll", ScrollTrigger.update);
gsap.ticker.add((t) => lenis.raf(t * 1000));
gsap.ticker.lagSmoothing(0);

// Pin the section for two screens and play a timeline across it.
gsap.timeline({
  scrollTrigger: { trigger: ".feature", start: "top top", end: "+=200%", scrub: true, pin: true }
})
  .from(".feature h2", { y: 60, opacity: 0 })
  .from(".feature img", { scale: 0.85 }, "<")
  .to(".feature .step-2", { opacity: 1 });

Two settings do most of the work. scrub: true ties the timeline to scroll so it reverses when the user scrolls up. end: "+=200%" gives the moment two viewports of distance, which is the pacing decision from Step 1 turned into code.

Step 5: A website where scrolling plays a video (the Apple-style effect)

This is the effect people usually mean when they ask for a flowy website: the page pins, and scrolling moves a video forward and backward frame by frame. It has three parts: the layout, the scroll mapping, and the encoding. The encoding is the part that decides whether it feels smooth.

1. Layout: a tall section with a sticky stage

<section class="scrub" style="height: 300vh">
  <div style="position: sticky; top: 0; height: 100vh">
    <img class="poster" src="poster.webp" alt="">
    <video muted playsinline preload="auto"></video>
  </div>
</section>

2. Map scroll progress to video time

const section = document.querySelector(".scrub");
const video = section.querySelector("video");

// Load the whole file as a Blob so seeking never waits on the network.
fetch("hero.mp4").then(r => r.blob()).then(b => {
  video.src = URL.createObjectURL(b);
});

let shown = 0;
function tick() {
  const r = section.getBoundingClientRect();
  const p = Math.min(1, Math.max(0, -r.top / (r.height - innerHeight)));
  shown += (p - shown) * 0.2;            // ease toward the target
  if (video.duration) video.currentTime = shown * video.duration;
  requestAnimationFrame(tick);
}
requestAnimationFrame(tick);

The easing line is what separates a flowy scrub from a jittery one. Wheel input arrives in steps, and easing toward the target turns those steps into continuous motion.

3. Encode for seeking, not for playback

A normal video stores a full keyframe every few seconds. Every seek has to decode forward from the last keyframe, which is why most scroll videos stutter. Re-encode with a short, fixed keyframe interval and no B-frames:

ffmpeg -i source.mp4 -an -c:v libx264 -pix_fmt yuv420p \
  -g 8 -keyint_min 8 -sc_threshold 0 -bf 0 -crf 23 \
  -movflags +faststart hero.mp4

For reference, the clips on frontagestudios.com are 1920×1080 at 24 fps with a keyframe every 8 frames (every third of a second), and they seek smoothly in Chrome and Safari. Firefox is pickier and wants a keyframe every two to four frames, at the cost of a larger file. Use -g 1 only for very short clips, because every-frame keyframes multiply file size.

4. Make a separate phone version

Landscape 1080p video is heavy for a phone and gets cropped on a tall screen. Export a portrait cut around 540×960 for small screens and choose the source by media query. On frontagestudios.com the phone clips are roughly one sixth the size of the desktop clips, between 1.3 and 2.2 MB each.

Image sequence alternative

Apple's own product pages often draw a sequence of still frames onto a <canvas> instead of seeking a video. It seeks perfectly in every browser, but a smooth sequence needs 100 to 200 images, so it costs more bandwidth. Use it for short, high-detail product spins. Use video for longer camera moves.

Doing it without code: Framer and Webflow

Framer has scroll effects built into the editor: appear animations, scroll transforms that change position, scale, rotation and opacity across a scroll range, and sticky positioning. It is the fastest way for a designer to get a flowy landing page live.

Webflow Interactions cover scroll-linked animation visually, and they now run on GSAP, so the output behaves like hand-written ScrollTrigger code. Webflow is stronger when the site also needs a CMS, such as a blog or a product catalog.

Both tools can host a scroll-scrubbed video through a custom code embed using the script in Step 5. Neither will re-encode your video for seeking, so run the ffmpeg command before uploading.

Step 6: Keep it fast, or it stops feeling flowy

• Animate only transform and opacity. Animating top, height, width or box-shadow forces layout or paint on every frame and causes stutter.
• Run one animation loop. Many scroll listeners each doing their own work is the usual cause of jank. Read scroll position once per frame in requestAnimationFrame and drive everything from that value.
• Show a poster image first. Put a still of the video's first frame under the video so the page looks finished before the file arrives.
• Drop expensive extras on phones. Backdrop blur, film grain overlays and large fixed layers cost the GPU on every frame. Turn them off below about 860 px or on touch devices.
• Keep headline text out of the video. Text burned into footage blurs during seeking and cannot be read by crawlers. Overlay real HTML instead.
• Test on a mid-range Android phone, not only on a recent MacBook. That is where frame drops show up.

Step 7: Accessibility and reduced motion

Some visitors get motion sickness from large scroll-linked movement, and they turn on "Reduce motion" in their operating system. Respect it with prefers-reduced-motion: show the final state of every animation, replace the scrubbed video with its poster, and keep smooth scrolling off. Never block the keyboard, never trap the scroll wheel inside a section, and keep every link and button reachable with Tab. A flowy site should still be usable as a plain document.

Step 8: Keep a flowy site readable by ChatGPT and Google

This is where most scroll-heavy sites quietly fail. More customers now ask ChatGPT, Perplexity or Google's AI answers which business to use, and those assistants can only recommend what they can read. Analyses of AI crawler traffic, including Vercel's published study of GPTBot and ClaudeBot, found that the major AI crawlers fetch HTML but do not execute JavaScript. A site whose words live inside a video, a canvas, or a script-rendered app shell looks close to empty to them.

Rules that keep a flowy site citable:

• Every headline and paragraph is real text in the HTML source. Animation can hide and reveal it visually, but it must be in the page when the server sends it. Check with "View Source", not the browser inspector.
• Pre-render or statically generate pages. If you use React, Vue or Svelte, ship server-rendered or static HTML, not an empty <div id="app">.
• Allow AI crawlers in robots.txt. Blocking GPTBot, OAI-SearchBot, ClaudeBot or PerplexityBot removes you from their answers.
• Put the facts in plain words below the show. What you do, where, for whom, prices or price ranges, and answers to common questions. The scroll story sells to humans. The plain section is what an AI assistant quotes.
• Add structured data for your organization, services and FAQs so the facts are machine-readable.

The frontagestudios.com homepage is built this way on purpose. The whole scroll story plays over video, but every line of copy is in the HTML, the FAQ sits in plain text in the footer, and the robots.txt explicitly welcomes AI crawlers. For the full checklist beyond design, read why a business does not show up in ChatGPT.

Common mistakes that make a site feel clunky instead of flowy

1. Animations that play once on page load and never respond to scroll again.
2. Scroll-jacking: forcing the page to snap a full screen per wheel tick.
3. Heavy smooth-scroll settings that make the page lag behind the finger or wheel.
4. Every element fading in, so nothing stands out and the reader waits for content.
5. Scroll video encoded with default settings, which stutters on every seek.
6. Reveals that re-hide content when the user scrolls back up, so text flickers.
7. Copy inside images, video or canvas, invisible to search engines and AI assistants.
8. No reduced-motion fallback.