Scroll Animations

What are scroll animations?

Scroll animations are effects triggered or driven by scrolling: elements that fade or slide in when they enter the viewport, parallax layers that move at different speeds, progress bars that fill as you read, sticky sections that change as you scroll and counters that start when visible. They are common on landing pages, product tours, storytelling pages and portfolios.

When to use reveal on scroll and parallax

Use scroll animations to guide attention through a page or to explain a sequence. A gentle reveal on section headings or feature cards adds rhythm. Avoid animating every element, long delays before content appears, or hijacking the scroll speed, which frustrates users.

Best practices for scroll-triggered animations:

• Use IntersectionObserver to add a class when elements enter the viewport instead of listening to every scroll event.
• Where supported, CSS scroll-driven animations with animation-timeline: view() or scroll() avoid JavaScript entirely; provide a sensible fallback.
• Content must be visible without JavaScript. Hide elements only after the script has run, for example via a class on <html>.
• Respect prefers-reduced-motion by showing elements in their final state and disabling parallax.
• Animate transform and opacity only, and keep distances small to avoid motion sickness.
• Animate each element once rather than every time it re-enters the viewport.
• Make sure content revealed on scroll is still reachable and readable with keyboard navigation.

Bootstrap, Tailwind CSS and pure CSS scroll effects

Each scroll animation has a live preview and code tabs for HTML, CSS and JS. Bootstrap 6 versions use the new alpha ES module build and theme-* colour roles, Bootstrap 5 versions apply the effects to standard sections and cards, Tailwind CSS versions toggle utility classes, and pure CSS versions show what native scroll-driven animations can do. Filter by framework, copy or download the code and attach the classes to your own sections.