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

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:41  - 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-animati...

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

• #science_technology
• #chrome
• #developers
• #google
• #web
• #pr_pr_chrome
• #type_devbyte_video
• #gdsplease_select
• #scroll_driven_animation
• #css
• #javascript
• #chrome
• #chrome_developers
• #can_i_use_a_css_scroll_driven_animation
• #how_do_i_make_css_animations_work_on_scroll
• #gds_yes