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/l... Intersection Observer Video:    • Learn Intersection Observer In 15 Minutes   Intersection Observer Article: https://blog.webdevsimplified.com/202... 🌎 Find Me Here: My Blog: https://blog.webdevsimplified.com My Courses: https://courses.webdevsimplified.com Patreon:   / webdevsimplified   Twitter:   / devsimplified   Discord:   / discord   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