How to Add Smooth Scroll Animations to a Bootstrap Template

Native Smooth Scroll for Anchor Links

The simplest improvement you can make to any Bootstrap layout is enabling smooth scrolling for in-page anchor links. One CSS rule handles it for most browsers:

html {
  scroll-behavior: smooth;
}

That covers Chrome, Edge, Firefox, and Safari 15.4+. For older Safari and cases where JavaScript needs to scroll programmatically, use the scrollIntoView API with a behaviour option:

document.querySelectorAll('a[href^="#"]').forEach(anchor => {
  anchor.addEventListener('click', function (e) {
    const target = document.querySelector(this.getAttribute('href'));
    if (!target) return;
    e.preventDefault();
    target.scrollIntoView({ behavior: 'smooth', block: 'start' });
    target.focus({ preventScroll: true }); // keep focus for keyboard users
  });
});

Always pair smooth scrolling with a scroll-margin-top value equal to your fixed navbar height. Bootstrap 5 sticky navbars are typically 64px tall. Without this offset, the section heading slides under the bar.

.section-target {
  scroll-margin-top: 70px;
}

If you are building on Canvas HTML Template, the sticky header already uses a CSS variable for height. Read that variable in JavaScript and set scroll-margin-top dynamically rather than hard-coding a pixel value.

Integrating AOS with Bootstrap 5

AOS (Animate On Scroll) version 2.3.4 is the most widely used scroll animation library in Bootstrap projects. It works by attaching a CSS class when an element enters the viewport via an IntersectionObserver. Setup is three steps.

Step 1: Include the assets. Via CDN or npm (npm install aos):

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.css" />
<script src="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.js"></script>

Step 2: Initialise once after DOM ready:

AOS.init({
  duration: 600,
  easing: 'ease-out-cubic',
  once: true,           // animate only on first scroll-in
  offset: 80,           // trigger 80px before element enters viewport
  disable: window.matchMedia('(prefers-reduced-motion: reduce)').matches
});

Setting disable based on the media query is the correct way to honour the user’s motion preference. Do not rely on CSS alone here. AOS adds classes that can cause layout shift even without visible animation.

Step 3: Add data attributes to HTML:

<div class="col-md-4" data-aos="fade-up" data-aos-delay="100">
  <div class="card">...</div>
</div>

<div class="col-md-4" data-aos="fade-up" data-aos-delay="200">
  <div class="card">...</div>
</div>

<div class="col-md-4" data-aos="fade-up" data-aos-delay="300">
  <div class="card">...</div>
</div>

Staggering the delay across a Bootstrap grid row (100ms, 200ms, 300ms) produces a cascade effect without any custom CSS. Keep delays under 400ms per item. Longer delays frustrate users who scroll quickly. One production gotcha: AOS does not play well with elements inside CSS overflow: hidden containers, which is a common problem with Bootstrap cards that have .overflow-hidden applied.

For more complex, timeline-based effects, read our post on GSAP ScrollTrigger animations for Bootstrap 5 page sections, which covers scrub effects and pinned sections that AOS cannot achieve.

CSS Scroll-Driven Animations (No Library)

The CSS Scroll-Driven Animations specification, available in Chromium 115+ and Safari 18+, lets you tie an animation directly to scroll position using animation-timeline. For a simple progress bar that fills as the user scrolls, no JavaScript is needed at all:

@keyframes grow-bar {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 4px;
  background: var(--cnvs-themecolor);
  transform-origin: left;
  animation: grow-bar linear;
  animation-timeline: scroll();
}

For element-level entrance effects, use a view() timeline instead of scroll():

@keyframes slide-up {
  from { opacity: 0; translate: 0 40px; }
  to   { opacity: 1; translate: 0 0; }
}

@media (prefers-reduced-motion: no-preference) {
  [data-reveal] {
    animation: slide-up 0.5s ease-out both;
    animation-timeline: view();
    animation-range: entry 0% entry 30%;
  }
}

Wrapping the rule in prefers-reduced-motion: no-preference is cleaner than the prefers-reduced-motion: reduce negation pattern because it applies the animation only when motion is explicitly acceptable. Browser support as of mid-2025 sits at roughly 80% globally. That makes this approach suitable for progressive enhancement but not a full AOS replacement for projects that must support older browsers.

Using Canvas Template’s Built-In Reveal System

The Canvas HTML Template ships its own scroll-reveal implementation inside functions.bundle.js. It uses an IntersectionObserver under the hood, activated by adding specific data attributes to any element. If you are already using Canvas, you do not need to load AOS at all.

<!-- Canvas data-animate triggers a CSS transition class on scroll -->
<div class="col-lg-6" data-animate="fadeInUp">
  <h2>Built with Canvas</h2>
  <p>This paragraph animates in when scrolled into view.</p>
</div>

The available animation names map directly to Animate.css keyframe names. You can override the duration globally by setting the --cnvs-themecolor adjacent custom property for animations, or per-element with an inline style. Check the Canvas documentation under the “Elements / Animations” section for the full list of supported values and the threshold configuration option.

If you are extending Canvas across multiple pages using a templating system, storing your animation data attributes in partials keeps things manageable. Our post on splitting a large HTML template into reusable partials with Nunjucks shows the folder structure that makes this practical at scale.

Performance and Accessibility Considerations

Scroll animations introduce real performance risk if implemented carelessly. Follow these rules to avoid jank and layout penalties.

• Animate only opacity and transform. These two properties run on the compositor thread and do not trigger layout or paint. Animating height, top, or margin causes reflow on every frame.
• Add will-change: transform, opacity sparingly. Applying it to dozens of elements simultaneously creates excessive GPU memory pressure. Use it only on elements you know will animate within the next frame.
• Lazy-load images before animating them. If an image fades in before it has loaded, users see a blank card animate into view. Use loading="lazy" with a placeholder background colour.
• Test on low-end Android devices. The Intersection Observer is efficient, but running 30 simultaneous AOS elements on a mid-range phone will still cause dropped frames.
• Respect prefers-reduced-motion at the library level, not just in CSS. Some users set this preference due to vestibular disorders; ignoring it is a WCAG 2.1 AA failure under Success Criterion 2.3.3.

For a broader look at keeping Bootstrap 5 sites fast, the Bootstrap 5 performance guide covers bundle splitting, critical CSS, and image optimisation alongside animation concerns.

Common Mistakes and How to Fix Them

Even experienced developers hit predictable problems when adding scroll animations to an existing Bootstrap template. Here are the most frequent ones.

1. AOS not triggering inside a modal or off-canvas panel. Intersection Observer calculates visibility relative to the document root by default. Elements inside a scrollable modal never cross the root threshold. Fix: pass the modal’s scroll container as the root option, or re-initialise AOS when the modal opens using AOS.refresh().
2. Elements stuck in their pre-animation state after a window resize. AOS calculates offsets on init. After resizing, positions may be wrong. Call AOS.refreshHard() on the resize event (debounced to 200ms).
3. Animations firing on load instead of scroll. If the element is in the viewport on page load, AOS triggers immediately. This is correct behaviour. Set offset: 0 carefully; a negative offset causes out-of-viewport triggers.
4. Conflict with Bootstrap’s own .fade utility. Bootstrap applies opacity: 0 and transitions via .fade for modals and tabs. Applying an AOS fade animation on the same element creates conflicting opacity states. Use different elements or scope Bootstrap’s utility to its trigger mechanism.
5. Smooth scroll offset wrong when using Bootstrap’s scrollspy. If you are building a one-page site with Bootstrap 5 Scrollspy, the rootMargin used by Scrollspy must match your scroll-margin-top value, or the active link highlighting will be one section off.

Looking for a production-ready Bootstrap 5 HTML template? Browse Canvas Template demos and find the perfect starting point for your next project.

If you’re building with the Canvas HTML Template and want to ship production-ready Bootstrap 5 layouts faster, try Canvas Builder free — the visual builder that exports clean Canvas-ready markup in minutes.