Scroll Effects is a pack of eight sets of scroll animations, designed and maintained in-house by uiCookies. Every set comes in three versions that look the same: plain HTML and CSS, Bootstrap 5 using its grid, .card, .btn, .badge, .nav and .list-group where they fit, and Tailwind CSS 4. The sets cover reveal on scroll, reading progress bars and scroll indicators, parallax layers, sticky scrollytelling, horizontal scroll sections driven by vertical scrolling, scroll-linked headers that shrink, hide or change colour, a dark set and a modern CSS set built on scroll-state() container queries, view-timeline ranges and timeline-scope. Most of the motion is CSS scroll-driven animation with animation-timeline: scroll() and view(), and where a set needs JavaScript it is a few lines of vanilla code with no library.
A good scroll animation never decides whether the content is there. The page should be complete before any animation runs: text and images visible, numbers real, layouts usable, so that a browser without scroll-driven animations, a blocked script or a visitor who has asked for reduced motion still gets everything. The motion is then added on top, inside @supports and prefers-reduced-motion: no-preference, and tied to the scroll position rather than a timer, so it moves only when the reader does. Keep effects short and purposeful, keep text on solid ground rather than on moving layers, never hide a header that holds keyboard focus, and make every scroll container a labelled region that can be scrolled with the keyboard. Each demo here scrolls inside its own page, and most sets repeat the effect inside a scroll container so you can see both.
Free download Browse live demos All snippets
The sets
1. Reveal on Scroll Animations
Fade up with a stagger, slide in from the sides, scale in, a clip-path wipe and the same reveal inside a scroll container, on a ceramics studio page.
Use it for landing pages and long sections. It runs on animation-timeline: view() with an IntersectionObserver fallback, and nothing is hidden without JavaScript or under reduced motion.
Live Demo CSS, Bootstrap & Tailwind code
2. Scroll Progress Indicators
A fixed reading progress bar, a progress ring on a back-to-top link, sticky chapter headings with their own bars and a scroll container with a sticky bar and a bottom shadow.
Use it for articles, guides and long terms. One registered –prg property drives every indicator, from a scroll() or view() timeline or from a small script fallback.
Live Demo CSS, Bootstrap & Tailwind code
3. Parallax Scrolling Layers
A CSS-only 3D parallax scene of mountain layers in a scroll container, a photo hero where the card and badges rise faster than the photo, and trail cards with drifting photos.
The 3D scene works in every evergreen browser with perspective and translateZ(). The hero and cards use scroll-driven animations and stand still elsewhere and under reduced motion.
Live Demo CSS, Bootstrap & Tailwind code
4. Sticky Scrollytelling
A data story with a sticky bar chart beside four text steps, and a four-step product tour with a drawn app window inside its own scroll container.
A small IntersectionObserver script marks the current step with aria-current="step", updates a visible Step n of 4 counter and switches the figure. Without JavaScript every step is still readable.
Live Demo CSS, Bootstrap & Tailwind code
5. Horizontal Scroll Sections
A pinned portfolio row where vertical page scrolling slides the cards sideways, and an interiors gallery built on scroll-snap with previous and next buttons.
Both start as keyboard-scrollable snap scrollers. The pinned behaviour is only switched on where scroll-driven animations are supported and motion is allowed.
Live Demo CSS, Bootstrap & Tailwind code
6. Scroll-Linked Header Effects
A header that shrinks once the page moves, a masthead that hides on scroll down and returns on scroll up, and a transparent header that turns solid after the hero.
One small script handles the page or any scroll container. A hidden header returns when it gets keyboard focus, and under reduced motion it never hides.
Live Demo CSS, Bootstrap & Tailwind code
7. Dark Scroll Animations
A dark camera product page with a glowing progress line, a hero photo that drifts closer, sentences that light up as you read, counters that count up and cards that come into focus.
It uses no JavaScript. Counters keep the real number in the markup for screen readers, and the dimmed sentence colour still passes 4.5:1.
Live Demo CSS, Bootstrap & Tailwind code
8. Modern CSS Scroll Animations
Stuck headers, scroll shadows and a snapped card with scroll-state() container queries, one animation over four view-timeline ranges, and a CSS-only scroll spy with timeline-scope.
Each effect names its baseline, shows a live @supports badge and falls back to a plain working layout. The Tailwind version adds stuck:, snapped: and scrollable- variants.
Live Demo CSS, Bootstrap & Tailwind code
Frequently asked questions
Are these scroll animations free for commercial projects?
Yes. Every set is free for personal and commercial projects, including client work and products you sell. Attribution is optional but always welcome. The licence is at uicookies.com/license/.
Do these scroll animations need JavaScript?
Mostly not. The parallax, dark and modern CSS sets use no JavaScript at all, and the reveal and progress sets only use a short script as a fallback for browsers without scroll-driven animations. Scrollytelling, the header effects and the gallery buttons use a few lines of vanilla JavaScript with no library, and the Bootstrap versions do not load Bootstrap’s JavaScript bundle.
Are the scroll animations accessible?
Content is visible before any animation runs, and every scroll-linked movement is switched off under prefers-reduced-motion. Scroll containers are labelled regions that take keyboard focus and scroll with the arrow keys, decorative layers and indicators are hidden from screen readers, and the current scrollytelling step is marked with aria-current="step". Every set passes an automated axe-core WCAG 2.1 AA check in all three versions.
Which frameworks are included?
Every set has three files that look the same: plain HTML and CSS, Bootstrap 5.3.8 and Tailwind CSS 4. The scroll effects are keyed on data attributes, so the same small block of CSS and the same script work in all three. Bootstrap supplies the grid, cards, buttons, badges, nav and list groups, and Tailwind uses utility classes, motion-reduce: variants and, in set 8, custom variants for scroll-state() queries.
Which browsers support CSS scroll-driven animations?
animation-timeline with scroll() and view() runs in Chrome and Edge 115 and later and in Safari 26. Firefox has it behind a setting, so it gets the fallback in each set: a short script for reveals and progress bars, or the finished layout without motion. scroll-state() container queries are newer and run in Chrome and Edge 133 and later; elsewhere set 8 shows its plain fallback.
