Introduction | Unleash the power of Scroll-Driven Animations (1/10)

Опубликовано 3 мая 2024, 16:00

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 → goo.gle/visit
Article: Learn CSS Animations → goo.gle/learn-css-animations
Demo: Scroll-Driven Image Reveal (CSS) → goo.gle/4dgytUP
Demo: Scroll-Triggered Image Reveal (CSS) → goo.gle/49PadX2
Demo: Janky Reading Indicator (JS) → goo.gle/4bea4NO
Demo: Non-Janky Reading Indicator (CSS) → goo.gle/49TPkdg
Article: Scroll-Driven Animations Performance Case Study → goo.gle/3wb1f8C

Check out more Scroll-Driven Animations Demos → goo.gle/scroll-driven-animatio...

Watch more Unleash the Power of Scroll-Driven Animations → goo.gle/SDA
Subscribe to Chrome for Developers → goo.gle/ChromeDevs


#CSS #ScrollDrivenAnimations #Animation #Chrome


Speaker: Bramus Van Damme