Subtle, yet Beautiful Scroll Animations

Learn how to implement scroll animations with HTML, CSS, and JavaScript. Use the JS IntersectionObserver and CSS transitions to implement a native "animate on scroll" effect that works in any browser.

[ruriko]

I see Jeff teaching us how to center a div -> I download the video. This might be the best tutorial of all time.

[figmentfire]

It's sooo nice to see some vanilla HTML, CSS and JavaScript in use!

[Zhundah]

There is an alternative way to do the staggering part if you don´t want to write a :nth-child() for every item.

One could define an inline CSS variable in the html like style="--order: 1;" (2, 3, 4 and so on for every html element).
Then in the CSS set a transition-delay of 'calc(100ms * var(--order))'.
This works because the inline variable will be cascaded into the .logo class.

This simplifies the staggering part in the CSS, but note that your target browser must support CSS variables.

[devqubs]

every coding tutorial should be like this, clear, concise and no BS.

[donniedamato]

Two things:

You can add the following one-liner to toggle a class when the entry is intersecting.
entry.target.classList.toggle('show', entry.isIntersecting);

Instead of turning off the animation with prefers-reduced-motion, turn it on.
@media (prefers-reduced-motion: no-preference) {
.hidden {
transition: all 1s;
}
}

[gergoradeczki]

I just noticed "defer" would sometime disappear around 1:44
Now I can't unsee it.

[chrismdev_]

I love how you talk about the reasons behind your decisions. Most tutorials leave out the why, making it way more difficult to understand.

[aredeker]

Love these short but really helpful tutorials! For the 'npx serve' command it already was worth watching

[okoye.charles]

This is exactly what I have been looking for. I think this channel is living up to it's expectations. ☺️

[devincheca]

Yeah the intersection observer is a lifesaver for this sort of thing. Good stuff. Love the tutorial.

[berigfp]

Your videos would never stop making me impressed. Such a knowledge portion in just hundreds of seconds...

[katymapsa]

More of this please! Insanely good videos, thanks a lot for these.

[anton]

Pretty cool tutorial, simple and goes straight to the point!

[Showmatic]

I just learned about intersection observer a few months ago and man, I love it. It's been so useful ever since.

[filiplaskowski]

Bro you are a fucking hero for making 5 min videos on these topics instead of making them 20 min with unnecessary filler. Thank you!!

[Yuri-qrml]

Thanks for this tutorial, found a way so I could put it into my own project, working on a website for my very first time and all tutorials and how things work have been incredibly insightful!

[phatakom]

Luckily I still have copilot cuz of Student pack.

[Tri-Technology]

Well done. A tutorial I would have needed one month ago, Now I figured it out the hard way

[MrSama]

Jeff, I just want to say thank you! Animations were the breaking point for me and you just made it soo easy. Top! 💯

[michaelflevier]

I love this, simple, clear and straightforward. This channel should be certified! well done!