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:

GitHub Code: https://github.com/WebDevSimplified/logical.so-scroll-animation Intersection Observer Video: https://youtu.be/2IbRtjez6ag Intersection Observer Article: https://blog.webdevsimplified.com/2022-01/intersection-observer

🌎 Find Me Here:

My Blog: https://blog.webdevsimplified.com My Courses: https://courses.webdevsimplified.com Patreon: https://www.patreon.com/WebDevSimplified Twitter: https://twitter.com/DevSimplified Discord: https://discord.gg/7StTjnR GitHub: https://github.com/WebDevSimplified CodePen: https://codepen.io/WebDevSimplified

⏱️ 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 ... https://www.youtube.com/watch?v=-pDPASqX97w