Introducing “Unleash the power of Scroll-Driven Animations”, a free video course that teaches you all about Scroll-Driven Animations in CSS or JavaScript.
With Scroll-Driven Animations – a feature available in Chrome 115 and up – you can take an existing CSS or WAAPI Animation and connect it to a scroller using only a few lines of code.
Chapters:
0:00 – Intro
0:58 – What is a Scroll-Driven Animation?
2:97 – Why you shouldn’t use a third-party library
3:50 – Catering for older browsers and users who are not fine with things moving around
4:56 – Outro
Resources:
Website: Google Visitor Experience → https://goo.gle/visit
Article: Learn CSS Animations → https://goo.gle/learn-css-animations
Demo: Scroll-Driven Image Reveal (CSS) → https://goo.gle/4dgytUP
Demo: Scroll-Triggered Image Reveal (CSS) → https://goo.gle/49PadX2
Demo: Janky Reading Indicator (JS) → https://goo.gle/4bea4NO
Demo: Non-Janky Reading Indicator (CSS) → https://goo.gle/49TPkdg
Article: Scroll-Driven Animations Performance Case Study → https://goo.gle/3wb1f8C
Check out more Scroll-Driven Animations Demos → https://goo.gle/scroll-driven-animations-demos
Watch more Unleash the Power of Scroll-Driven Animations → https://goo.gle/SDA
Subscribe to Chrome for Developers → https://goo.gle/ChromeDevs
#CSS #ScrollDrivenAnimations #Animation #Chrome
Speaker: Bramus Van Damme