How to Make a Scroll-Triggered Animation With Basic JavaScript

A little bit of animation on a site can add some flair, impress users, and get their attention. You could have them run, no matter where they are on the page, immediately when the page loads. But what if your …

How to Make a Scroll-Triggered Animation With Basic JavaScript originally published on CSS-Tricks. You should get the newsletter and become a supporter.

https://css-tricks.com/scroll-triggered-animation-vanilla-javascript/

Created 3y | Jan 25, 2022, 5:23:33 PM


Login to add comment

Other posts in this group

HTML Email Accessibility Report 2025

Some weekend reading on the heels of Global Accessibility Awareness Day (GAADM), which took place yesterday. The Email Markup Con

May 16, 2025, 4:10:17 PM | CSS tricks
Scroll-Driven Animations Inside a CSS Carousel

Hey, isn't there a fairly new CSS feature that works with scroll regions? Oh yes, that's Scroll-Driven Animations. Shouldn't that mean we can trigger an animation while scrolling through the items

May 15, 2025, 2:40:06 PM | CSS tricks
This Isn’t Supposed to Happen: Troubleshooting the Impossible

What it looks like to troubleshoot one of those impossible issues that turns out to be something totally else you never thought of.


May 14, 2025, 3:30:09 PM | CSS tricks
Using Pages CMS for Static Site Content Management

I know, I know: there are a ton of content management system options available, and while I've tested several, none have really been the one, y'know? Weird pricing models, difficult customization,

May 12, 2025, 2:40:32 PM | CSS tricks
Orbital Mechanics (or How I Optimized a CSS Keyframes Animation)

What does it look like to refactor your own code? John Rhea picks apart an old CSS animation he wrote and walks through the thought process of optimizing it.


May 8, 2025, 1:30:08 PM | CSS tricks
Why is Nobody Using the hwb() Color Function?

Okay, nobody is an exaggeration, but have you seen the stats for hwb()? They show a steep decline, and after working a lot on color in the CSS-Tricks almanac, I’ve just been wondering

May 7, 2025, 2:10:09 PM | CSS tricks
GSAP is Now Completely Free, Even for Commercial Use!

Along with the version 3.13 release, GSAP, and all its awesome plugins, are now freely available to everyone.


May 6, 2025, 2:50:06 PM | CSS tricks