Creating Scroll-Based CSS Animations Without JavaScript

In a recent video, CSS expert Kevin Powell explored the fascinating world of scroll-based animations that rely entirely on CSS—no JavaScript required. For those of us who prefer to keep our websites lightweight and avoid adding JavaScript unless absolutely necessary, this approach is a game-changer.

While Kevin’s video dives deep into advanced configurations, I wanted to simplify things and create a straightforward fade-in-and-up effect that I could easily reuse across my website. Using what I learned from Kevin, I tweaked the code slightly to achieve exactly what I was looking for. In this post, I’ll walk you through how I set this up, explain the code step-by-step, and introduce you to keyframe animations.

If subtle animations are something you’d like to add to your website quickly and easily, let’s get started!

Setting Up the Animation

To demonstrate this effect, I used sections from the pattern library on GenerateBlocks.com. The goal was to animate images so they fade in and move up as they enter the viewport.

Adding Classes to Elements

The first step is to assign a class to the elements you want to animate. In this case, I added a class to each image container.

1. Select the element you want to animate.
2. Assign it a class name. I used owd-fade-in, but you can name it whatever you like.
3. Copy the class name to your clipboard to ensure consistency when writing your CSS.

Repeat this process for all the elements you want to animate. Once done, update your page and preview it on the front end. At this point, the animations won’t be visible yet—we’ll handle that next.

Writing the CSS

Now that the elements have their class, it’s time to write the CSS for the animation.

Setting Up the Animation

1. Open the Additional CSS section in your site’s customizer.
2. Start by targeting the class you assigned earlier:

css

.owd-fade-in {
  animation: owd-fade-in linear forwards;
  animation-timeline: view();
  animation-range: entry;
}

Here’s what each line does:

• animation: Defines the animation name, timing function, and ensures the animation doesn’t reset after completion.
• animation-timeline: Specifies that the animation is tied to the viewport.
• animation-range: Indicates the animation should trigger when the element enters the viewport.

Creating the Keyframe Animation

Next, we’ll define the keyframe animation that controls the movement and opacity changes.

css

@keyframes owd-fade-in {
  from {
    transform: translateY(400px);
  }
  to {
    transform: translateY(0);
  }
}

This animation moves the element vertically:

• from: Starts the element 400px below its original position.
• to: Moves the element back to its original position.

Adding Opacity for a Fade-In Effect

To make the animation more polished, we’ll add opacity changes. Instead of using from and to, we’ll define percentage stops for more control.

css

@keyframes owd-fade-in {
  0% {
    transform: translateY(400px);
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

Here’s how it works:

• At 0%, the element starts 400px below its position and is completely transparent.
• At 50%, the element is still transparent but has moved halfway up.
• At 100%, the element is fully visible and in its final position.

This combination of movement and fading creates a subtle yet effective animation.

Ensuring Accessibility

Animations can sometimes cause discomfort for users with motion sensitivity. To address this, we’ll use the prefers-reduced-motion media query to disable animations for users who have set this preference in their operating system.

css

@media (prefers-reduced-motion: no-preference) {
  .owd-fade-in {
    animation: owd-fade-in linear forwards;
    animation-timeline: view();
    animation-range: entry;
  }

  @keyframes owd-fade-in {
    0% {
      transform: translateY(400px);
      opacity: 0;
    }
    50% {
      opacity: 0;
    }
    100% {
      transform: translateY(0);
      opacity: 1;
    }
  }
}

This ensures that animations only run for users who haven’t opted to reduce motion. For those who prefer reduced motion, the elements will appear without any animation.

Testing the Animation

To test the animation, preview your page and scroll down to see the images fade in and move up as they enter the viewport. If you want to simulate the prefers-reduced-motion setting, use your browser’s inspector tool to emulate this preference.

Wrapping Up

With just a few lines of CSS, you can create elegant scroll-based animations that enhance your website’s user experience. By adding accessibility considerations, you ensure your site is inclusive for all users.

If you’re interested in exploring more advanced scroll-based animations, I highly recommend checking out Kevin Powell’s video for a deeper dive into this topic.

This simple fade-in effect is just the beginning—there’s so much more you can do with CSS-only animations!