Website templates with animation
All 20 templates
These templates move with the scroll. Headlines and photos come in as their section reaches the screen, some sections pin in place while a sequence plays, and some animations are tied to the scroll position, so they run forward and back with the wheel or the finger. Scrolling itself is smoothed.
The motion is built on GSAP with ScrollTrigger, loaded from jsDelivr; GSAP is free for commercial sites. Each section has its own short animation script at the end of the file, so you can change or remove one effect without touching the others. Visitors who turn on reduced motion in their system get a complete, still page.
Under each template: its most distinctive animation.
Every template here is free under the MIT license: one index.html with its CSS and scripts inside (GSAP, ScrollTrigger and Lenis load from jsDelivr), plus AGENTS.md, CREDITS.md (photos from Unsplash under the Unsplash License, fonts under the SIL Open Font License) and LICENSE, in its own GitHub repository at github.com/8bsite with a live demo on GitHub Pages. Each template's page has the download commands.
Keys press themselves as you scroll: the hero panel sinks key by key, and two keys melt into one outline.
Spoken lines slide out of a voice panel and turn into caption bubbles, and a settings card grows out of the phone screen.
The wordmark splits apart as you scroll away, each letter dragging a black streak, and gathers again at the footer.
The round photo after Hello travels down and shrinks into the violet full stop of the next heading.
A pinned moodboard deals twelve tilted tiles out of one pile into a collage as you scroll.
A pinned day track runs from breakfast to lights low while a black sun crosses a changing sky.
The crew battle pins a split screen while the VS line swings side to side, giving each crew the floor.
Four drums roll down the opening and print a pink panel band by band as you scroll.
Street photos begin as smears of stretched colour and squeeze into focus as you scroll, from the opening slabs to the portraits.
Headings streak in skewed and stretched, collage tiles are dealt from one pile and the week runs sideways with your scroll.
One electric-blue highlight moves through the page, stepping down the diagnosis checks, sweeping the van timetable and jumping through customer quotes.
Service photos resolve from coarse dots into a fine halftone as their colour slabs stack, like print in an annual report.
A sphere of 28 client cards turns almost a full circle as you scroll, between its title's two halves.
A parasol shadow sways over the hero dish and slides across the table as you scroll.
The beer cards step down a staircase as you scroll and fill with colour from the bottom, like poured glasses.
On the first scroll you fall into the blue field as its inner bands swell over the whole screen.
A jumper lands on the red panel's wavy edge, which sags like a trampoline bed and throws them off the screen in a spin.
The small coral arch beside the headline grows into a full-width doorway as you scroll, and the visit steps appear inside it.
The grey block wall on the first screen breaks apart as you scroll and the page opens around it onto the finished room.
Leaving the first screen, the chocolate night rises over it as a widening dome while the shop photo darkens and the wordmark spreads apart.
Questions
Which animation library do the templates use?
GSAP with its ScrollTrigger plugin, plus SplitText or MotionPath in some templates, and Lenis for smooth scrolling. All load from jsDelivr with fixed versions, so nothing has to be installed.
Can I turn the animations off?
Visitors with reduced motion turned on already see a still page. To remove an effect for everyone, delete that section's animation script at the end of the file; the section keeps its content and layout.
Will the text be visible before the scripts load?
Yes. The text and the images are plain HTML, and the scripts sit at the end of the page. The animations start once the libraries have loaded.