skip to content

CSS Only Scroll Into View Effect

You know how sometimes you stumble upon something so cool and simple, you just have to share it? That’s exactly what happened to me the other day with a CSS trick that feels like finding a hidden shortcut in your favorite video game. For years, I've have used a mix of CSS hacks and JavaScript libraries to create animations that only kick in when you actually see them on your screen. But with this one trick, it can be as easy as adding just three lines of CSS!

Cue the Spotlight with animation-timeline: view();:

.animate {
    animation: appear linear;
    animation-timeline: view();
    animation-range: entry 0 cover 40%;
}

This neat line of CSS is like hiring a stage manager for your web elements. Gone are the days of elements popping up prematurely as the page loads. With animation-timeline: view();, your elements wait quietly in out of view, making their entrance only when they become visible to the user.

Just include the CSS we mentioned above on any element you want to animate as it comes into view. Then, choose a fitting animation to bring it to life:

@keyframes appear {
    from {
        opacity: 0;
        scale: 0.5;
    }
    to {
        opacity: 1;
        scale: 1;
    }
}

Example 1

See the Pen Scroll Into View by Tristan White (@triss90) on CodePen.

Example 2

See the Pen Scroll Into View (Example 2) by Tristan White (@triss90) on CodePen.