How to create animation on scroll css

CssHow-ToBeginner · 3 min read

How to Create Animation on Scroll with CSS

To create animation on scroll with CSS, use CSS animations or transitions combined with JavaScript to add a class when an element enters the viewport. The class triggers the CSS animation, making the element animate as you scroll.

📐

Syntax

Use CSS @keyframes to define the animation steps. Then apply the animation to an element using the animation property. Use JavaScript to add a class like animate when the element scrolls into view.

@keyframes: Defines the animation sequence.
animation: Applies the animation to an element.
.animate class: Added on scroll to trigger animation.

css

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.element {
  opacity: 0;
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.element.animate {
  animation: fadeIn 0.6s forwards;
}

💻

Example

This example shows a box that fades in and moves up when you scroll down to it. JavaScript listens for scroll events and adds the animate class when the box is visible.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Scroll Animation Example</title>
<style>
  body {
    height: 150vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: Arial, sans-serif;
    background: #f0f0f0;
  }
  .box {
    width: 150px;
    height: 150px;
    background: #4a90e2;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }
  .box.animate {
    opacity: 1;
    transform: translateY(0);
  }
</style>
</head>
<body>
  <div class="box" id="animateBox"></div>

  <script>
    function isInViewport(element) {
      const rect = element.getBoundingClientRect();
      return (
        rect.top <= (window.innerHeight || document.documentElement.clientHeight) &&
        rect.bottom >= 0
      );
    }

    const box = document.getElementById('animateBox');

    function onScroll() {
      if (isInViewport(box)) {
        box.classList.add('animate');
        window.removeEventListener('scroll', onScroll);
      }
    }

    window.addEventListener('scroll', onScroll);
    onScroll();
  </script>
</body>
</html>

Output

A blue square box appears faded and slightly down initially. When you scroll so the box enters the visible screen area, it smoothly fades in and moves up to full opacity and original position.

⚠️

Common Pitfalls

Not using JavaScript or Intersection Observer to detect scroll means CSS animation won't trigger on scroll.
Forgetting to set initial styles like opacity: 0 or transform causes animation to jump.
Adding animation classes too early or without removing scroll listener can cause repeated animations or performance issues.

css

/* Wrong: animation runs immediately without scroll detection */
.element {
  animation: fadeIn 0.6s forwards;
}

/* Right: animation triggered by adding class on scroll */
.element {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.element.animate {
  opacity: 1;
  transform: translateY(0);
}

📊

Quick Reference

@keyframes: Define animation steps.
animation: Apply animation to element.
JavaScript scroll event: Detect when element enters viewport.
classList.add(): Add class to trigger animation.
Remove scroll listener: Improve performance after animation triggers.

✅

Key Takeaways

Use CSS animations combined with JavaScript to add a class when an element scrolls into view.

Set initial styles like opacity and transform to prepare for smooth animation.

Detect element visibility with JavaScript using getBoundingClientRect or Intersection Observer.

Remove scroll event listeners after animation triggers to improve performance.

Test animations on different screen sizes for responsive behavior.