Scroll Animations – 8 Free CSS, Bootstrap & Tailwind Sets
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.
