How To Create This Unbelievable CSS Scroll Animation

I was recently challenged on Twitter to recreate this amazing scroll based animation, and it was so fun. I even decided to make the challenge more difficult by doing nearly everything in just plain CSS instead of doing it all in JavaScript. In this video I show you how I created this animation.

📚 Materials/References:

🌎 Find Me Here:

⏱️ Timestamps:

00:00 - Introduction
01:03 - Demo
03:15 - How I examine this animation
05:30 - JavaScript scroll variable setup
11:03 - Top section scrolling CSS
20:41 - Top section image CSS
27:50 - Other image CSS (IntersectionObserver)
31:20 - IntersectionObserver JavaScript

#CSS #WDS #ScrollAnimation

[Davidspc]

Honestly, thank you for mixing your audio well. Listening on ear buds at a noisy location and not being injured when the intro music plays is not a given at all 😅

[kaustavroy]

This was much needed, the step by step breakdown.

Pls do more such videos.

[pablofernandezruiz]

I really love this kind of content. The web design part is kind of forgotten nowadays. Scroll animations are so necessary but I can’t barely find any videos about it. Thanks for creating this tutorial!

[Yimimura]

Since nobody point that out, using scroll & resize without passive option can hurt the perfomances of the page.
Using passive make the event out of the main thread and updating only when there is an available tick available.

[-Will-]

This is interesting and I am glad you have done the video. But as a visitor to a non-animated website, I've never thought, I wish there were some animations.

[maurosampietro]

You are incredibly clear and straight to the point. I wish everyone was like you. Amazing coder too

[thas_am]

this video is insanely clear, even to a begginer programmer

[mllr_nyc]

Incredible teacher, awesome tutorial, thank you 👏

[karandamania]

This helped me finish a project i was stuck! Thanks a lot man <3

[darkbluebossa]

So cool! Sometimes I enter those sites like ´One Page Love´ and I get completely lost about some of the effects I see there (and I dont even mention Awwwards). It would be cool if you posted more real world examples like this.

[omrividal]

To say that it's impressive is really an understatement.
Blew my mind on so many levels!

[martinwuehr]

This is Top Tier YouTube Content. Thank you Kyle!

[blaketheory]

It's impressive that you can do all that in mostly CSS, and I think it's good how you explained your thought process rather than just giving the code. But, as a user, I feel I'd just be SO confused by a site like this. You go to it and expect to scroll down normally, but all this distracting stuff happens. It's hard to know what are images or what is interactable UI, and the text that apparently goes with each image is often hidden behind it. As a user, I'd find a normally scrolling article-style site much more readable. 🤷

[tallawahh]

I'm just thinking I can design any moving containers this way 💡 it's nothing new but this logical page looks really nice, plus a step by step walkthrough of the changes

[MrAbbo]

nice. more scroll animations please :). Essential part of modern website building toolkit.

[Smurfis]

Please do more in-depth website analysis like this

[thanhnguyen-gskl]

Thank you for making this amazing video. This is exactly what I'm looking for. God bless you.

[libeoo]

Now first I will try to make it and then I will see your video, I got the idea how website work. Now let's go 😁

[justfun]

doing this in CSS is some skill. Respect Sir!

[jamesmassa]

Thank You. Excellent. Please do more videos like this one. 😀