813: CSS: Scroll Driven Animations

Syntax - Tasty Web Development Treats

Aug 26, 2024•22 min

--:--

Listen in podcast apps:

Apple Podcasts

Spotify

Download

Listen to this episode in Metacast mobile app

Don't just listen to podcasts. Learn from them with transcripts, summaries, and chapters for every episode. Skim, search, and bookmark insights. Learn more

Episode description

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.
- Syntax 695: 5 New CSS Features You Should Know
- Scroll-driven animations demos and tools.
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

Scott: X Instagram Tiktok LinkedIn Threads

Randy: X Instagram YouTube Threads

For the best experience, listen in Metacast app for iOS or Android