0Pricing
HTML Academy · Lesson

Scroll-Linked Animations Setup

Trigger CSS animations when elements enter the viewport.

The Goal

Scroll-linked animations play, pause, or reverse based on element visibility. Examples: a hero fade-in when a section scrolls into view, a number that counts up when visible, a parallax effect tied to scroll position. IntersectionObserver triggers the animations; CSS or the Web Animations API runs them.

Trigger-Based Animations

The simplest pattern: when an element enters the viewport, add a CSS class that contains the animation. entry.target.classList.add("in-view") in the observer callback; the class defines animation: fade-in 600ms forwards.

.fade-up { opacity: 0; transform: translateY(20px); }
.fade-up.in-view {
  animation: fadeUp 600ms cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes fadeUp {
  to { opacity: 1; transform: none; }
}

All lessons in this course

  1. IntersectionObserver API and Thresholds
  2. Lazy Loading with IntersectionObserver
  3. Infinite Scroll Implementation
  4. Scroll-Linked Animations Setup
← Back to HTML Academy