JavaScript Academy · Lesson

Scroll-Triggered Animations

Animate elements as they enter view.

Scroll-Triggered Animations is a free JavaScript Academy lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the JavaScript Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Animating on Scroll

A popular effect is fading or sliding elements into view as the user scrolls to them. Intersection Observer makes this clean: add a CSS class when an element enters the viewport, and let CSS handle the animation.

The CSS Side

Define a hidden starting state and a visible end state in CSS. The JavaScript only toggles a class; the transition is pure CSS, which keeps it smooth.

// .reveal { opacity: 0; transform: translateY(20px);
//   transition: opacity 0.6s, transform 0.6s; }
// .reveal.visible { opacity: 1; transform: none; }

Selecting Targets

Mark the elements you want to animate with a shared class, then collect them.

const items = document.querySelectorAll('.reveal');
console.log('animating', items.length, 'elements');

Creating the Observer

Use a threshold so the animation starts when a meaningful portion of the element is visible, not just one pixel.

const observer = new IntersectionObserver(reveal, {
  threshold: 0.2 // 20% visible
});

Adding the Class

In the callback, add the visible class to intersecting targets. CSS then animates them into view.

function reveal(entries) {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('visible');
    }
  });
}

Animate Once

For a one-time reveal, unobserve the element after adding the class so it does not re-animate when scrolled away and back.

function reveal(entries, obs) {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('visible');
      obs.unobserve(entry.target); // animate only once
    }
  });
}

Re-Animating Both Ways

If you want elements to animate out when they leave, toggle the class based on isIntersecting and keep observing.

function reveal(entries) {
  entries.forEach(entry => {
    entry.target.classList.toggle('visible', entry.isIntersecting);
  });
}

Starting Observation

Observe each target to begin tracking. The observer fires as the user scrolls past each one.

items.forEach(el => observer.observe(el));

Staggering Animations

Create a cascade by applying an incremental transition delay. You can set it from a data attribute or the element's index.

items.forEach((el, i) => {
  el.style.transitionDelay = (i * 100) + 'ms';
  observer.observe(el);
});

Respecting Reduced Motion

Some users prefer reduced motion. Check the media query and skip animations for them, showing content immediately instead.

const reduce = window.matchMedia(
  '(prefers-reduced-motion: reduce)'
).matches;
if (reduce) {
  items.forEach(el => el.classList.add('visible'));
}

Performance Wins

Because the heavy lifting is CSS transitions and the visibility detection is offloaded to the browser, scroll animations stay smooth even with many elements. No scroll-event math, no jank.

Quick Check

Test your understanding of scroll-triggered animations.

Recap

You built scroll-triggered animations:

Define hidden and visible states in CSS.
Observe targets with a sensible threshold.
Toggle a class on intersection; CSS does the animation.
unobserve for one-time reveals.
Respect prefers-reduced-motion.

You finished Intersection Observer. Next, Web Workers.

Frequently asked questions

Is the “Scroll-Triggered Animations” lesson free?

Yes — the full text of “Scroll-Triggered Animations” is free to read here on the web, and the JavaScript Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the JavaScript Academy course, upgrade to CoddyKit PRO.

What will I learn in “Scroll-Triggered Animations”?

Animate elements as they enter view. You practise JavaScript Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start JavaScript Academy?

No prior experience is required. JavaScript Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Scroll-Triggered Animations” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this JavaScript Academy lesson?

Yes. Every JavaScript Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to JavaScript Academy