CSS scroll animation templates

A CSS animation normally runs on the document clock: it starts, lasts so many seconds and ends. A scroll-driven animation swaps that clock for a scroll position, and two kinds of timeline exist. scroll() follows the progress of a scroll container or the whole page from top to bottom, which suits a reading bar. view() follows one element as it enters, crosses and leaves the visible area, which suits reveals and scenes tied to a section. animation-range picks the stretch of that journey the keyframes cover, for example cover 5vh cover 45vh.

These templates use view() and named view timelines (view-timeline: --name block on a section, read by the elements inside it); none of them needs scroll(). What used to be a scrubbed GSAP timeline is now keyframes plus a range, so no script recalculates styles on every scroll event, and the browser can run transform and opacity changes off the main thread. A CSS scroll-driven animation website built this way keeps its motion in the stylesheet, where it is easy to read and to search.

Every file follows the same order, and an agent that knows it can work safely.

• The gate. A two-line script in the head sets data-8b-live on <html> only when the browser supports animation-timeline: view() and the visitor has not asked for reduced motion. Every scroll rule is written under [data-8b-live], so without the attribute none of them applies.
• The scenes in CSS. Keyframes and ranges per section, in style blocks marked with data-8b-part. Pinned stages are plain position: sticky inside a taller section.
• The motion kit. One inline script of small modules. It measures what CSS cannot know (how far a track must travel, where a drum must land) and writes it into custom properties, adds an is-in class to data-8b-motion elements as they arrive, numbers the items of each data-8b-items group as --i and --n for staggers, and pauses looping animations off screen. Ten of the files also split headings into lines or letters.
• Scene scripts. Up to seven short blocks per file, each measuring one section. If one throws an error, the kit logs it and switches that section's scene styles off, so the section stays in its finished layout and the others keep moving.

Smooth wheel scrolling stays. A few lines of the kit ease mouse wheel and trackpad input toward the target position, leave inner scroll areas and pinch zoom alone, and keep touch scrolling native, which is the job Lenis did in the GSAP build.

The groups follow the scene each page is remembered for; most pages hold several kinds.

• Held stages with a sideways track. A sticky stage stays put while panels run sideways as you scroll down: the print studio's five press stations, the brasserie's five services, the cat boarding day, the architecture office's buildings, the fitness week, the florist's evening hours, the accountancy months and the repair shop's shelf. The kit measures each track's overflow and sets the section's height to match.
• Piles dealt into place. Photos or panels start as a tilted pile in the middle and land in their spots: the community club's twelve-tile board, the fitness disciplines, the veterinary colour panels, the construction gallery and the florist's events.
• A first screen that changes as you leave it. The agency wordmark tears apart, the construction wall breaks block by block, the trampoline jumper is thrown off a sagging edge, and on the members' workspace page the visitor falls into a blue contour field.
• Stacking cards and sticky frames. The design studio's service cards stick and stack, each shrinking under the next; the accountancy slabs push each other back; the construction services swap photos inside one sticky frame.
• Lines and rings that draw. A violet arc rounds the design studio's method ring, the accounting firm closes three red rings in turn, and the captioning app draws two curves through its places.

A pinned section scroll animation, a stacking cards scroll animation or a dealt pile can be lifted into another site, but not alone: take the section's scene styles, its scene script if it has one, and the motion kit with the gate.

Measured as the gzipped code a visitor downloads (HTML plus scripts, without fonts and photos), the native pages need 24 to 53 KB and their GSAP builds 71 to 98 KB. The difference is the libraries: GSAP, ScrollTrigger and Lenis in every GSAP build, SplitText in ten of them and MotionPathPlugin in one. Each native page therefore makes three to five fewer requests.

The HTML file itself grows, to 102 to 199 KB before compression, because the keyframes of every scene are written out in CSS. Repetitive CSS compresses well, which is why the gzipped totals still fall by about half to two thirds per template. Fonts still load from Google Fonts and photos from Unsplash's servers; what is gone is every script from a CDN.

For a lightweight website template that still moves, that is the trade: one self-contained file a coding agent can read whole, with no library version to pin, update or keep in step with another.

Chrome and Edge support scroll-driven animations since version 115, and recent Safari versions run them too. Firefox does not ship them by default yet, so there the gate never sets data-8b-live. The same happens for anyone who has turned on reduced motion in their system settings.

In both cases the page shows its finished static layout: each section as its scene would end, ordinary scrolling with no smoothed wheel, sideways tracks as plain grids or rows. No content waits hidden for an animation that never comes. In Firefox the first screen still plays its load-in, since that is a time-based CSS animation, and hover effects work everywhere; reduced motion stops the load-in too. Each template's own page says what its layout becomes.

Whoever needs the scroll motion in Firefox as well can take the GSAP build: every one of these repositories also holds index.gsap.html, the same design on GSAP, ScrollTrigger and Lenis from jsDelivr. Edit one of the two files, not both.

curl -LO https://raw.githubusercontent.com/8bsite/<repository>/main/index.gsap.html

Any agent that edits files works here, since the motion is CSS and inline script next to the markup. What breaks it quietly is a renamed class or a dropped attribute: the page looks fine at rest and one section stops moving. The rules are short. Keep the gate script in the head, every data-8b-* attribute and every data-8b-part block. Add or remove items inside a data-8b-items group freely, since the kit renumbers them. Add no GSAP or other animation library: the scenes are already built.

To retime a scene, change its animation-range; to calm it, soften its keyframes; to switch it off, delete that section's scene styles and scene script, and the section keeps its finished layout. In Claude Code, start in the folder with AGENTS.md beside the file: it names the parts the kit and the CSS read.

The motion is also written out in words, section by section, in each template's DESIGN.md, which helps when you rebuild the look in another stack. A prompt for the edit:

Read AGENTS.md, then edit index.html for my business: [what it is, who it serves, the facts I give you]. The scroll motion is CSS scroll-driven animations plus the inline motion kit: keep the motion-gate script in the head, every data-8b-* attribute, every data-8b-part block and the classes the scene scripts query. Change copy, photos and colours, not the motion, and add no animation library. Then check the page at 375 and 1440 px in Chrome, once with reduced motion on, and in Firefox, where it must show the finished static layout, with the console clean each time.

• A restaurant that wants the lightest page: the brasserie, at 24 KB of code. Weak spot: its day of services runs sideways, so the hours must also read well in the plain grid that Firefox and reduced motion show.
• A shop that sells by quote: the risograph studio with its live price calculator. Weak spot: ordering opens an email; there is no cart, file upload or card payment.
• A firm that sells calm: the accounting firm, whose scenes are quiet rules, a marker and a turning sphere. Weak spot: each of the 28 sphere cards carries its own latitude and longitude in the markup, so another client count means new positions.
• An app launch: the captioning app page, with a sticky phone that adds each step's messages. Weak spot: the phone screens are built in HTML and CSS, so another app means redrawing them, and at 35 KB it is one of the heavier files here.
• A family venue: the trampoline park. Weak spot: in Firefox and with reduced motion the jumper and the hopping ball stay still, so the page has to sell on its photos and prices alone.

All 101 templates