JavaScript Academy · Lesson

Scroll-Triggered Animations

Animate elements as they enter view.

Lesson 4 of 413 steps

Scroll-Triggered Animations is a free JavaScript Academy lesson on CoddyKit. This is lesson 4 of 4. Any 3 lessons of this learning path are free to read in full — after that, CoddyKit PRO unlocks every lesson, plus hands-on practice with a built-in code editor and a 24/7 AI tutor. It is part of the JavaScript Academy learning path, and your progress syncs across the web and the CoddyKit app. The JavaScript Academy course includes 4 lessons in total.

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.

Answer it in the interactive lesson

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.

Free to start

Learn JavaScript with an AI tutor — free

Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.

Courses: 59
Lessons: 200

Start learning free View the full course

Frequently Asked Questions

Is the “Scroll-Triggered Animations” lesson free?

Yes — any 3 lessons of the JavaScript Academy learning path, including “Scroll-Triggered Animations”, are free to read in full here on the web. After that, CoddyKit PRO unlocks every lesson, plus interactive practice with a built-in code editor and a 24/7 AI tutor. The JavaScript Academy course includes 4 lessons in total.

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, so you can start here or from the beginning and move at your own pace. This is lesson 4 of 4.

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