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: github.com/WebDevSimplified/logical.so-scroll-anim… Intersection Observer Video:    • Learn Intersection Observer In 15 Min...   Intersection Observer Article: blog.webdevsimplified.com/2022-01/intersection-obs… 🌎 Find Me Here: My Blog: blog.webdevsimplified.com/ My Courses: courses.webdevsimplified.com/ Patreon: www.patreon.com/WebDevSimplified Twitter: twitter.com/DevSimplified Discord: discord.gg/7StTjnR GitHub: github.com/WebDevSimplified CodePen: 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

• #
• #webdevsimplified
• #scroll_animation
• #css_scroll_animation
• #js_scroll_animation
• #javascript_srcoll_animation
• #ts_scroll_animation
• #typescript_scroll_animation
• #scroll_animation_web_dev
• #advanced_scroll_animation
• #advanced_css_scroll_animation
• #advanced_js_scroll_animation
• #advanced_javascript_scroll_animation
• #advanced_ts_scroll_animation
• #advanced_typescript_scroll_animation