August 26th, 2024 × #css#animations#scrolling
Introduction to capabilities of scroll driven animations to create interactive effects based on scroll position by scrubbing existing CSS animations and keyframes over a scroll timeline instead of time.
In this episode of Syntax, Wes and Scott talk about CSS' new scroll-driven animations, its implementation, uses, and potential pitfalls. They also discuss animation-timeline and animation-range, and how they can be utilized to control animations based on scroll positions.
Show Notes
- 00:00 Welcome to Syntax!
- 00:46 Brought to you by Sentry.io
- 01:35 Scroll-driven animations
- 04:13 @keyframes
- 05:22 animation-timeline
- 11:35 animation-range
- 08:49 View-based timelines
- 17:45 Neat uses: Dave Rupert on styling :stuck
Hit us up on Socials!
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
