meta_pixel
Tapesearch Logo
Log in
Syntax - Tasty Web Development Treats

813: CSS: Scroll Driven Animations

Syntax - Tasty Web Development Treats

Wes Bos

Js, Technology, Css, Html5, Tech News, Webdevelopment, News, Javascript, Html

4.91.1K Ratings

🗓️ 26 August 2024

⏱️ 22 minutes

🧾️ Download transcript

Summary

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

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

Transcript

Click on a timestamp to play from that location

0:00.0

Welcome to Syntax on this Monday hasty treat.

0:04.4

We're going to be talking all about scroll-driven animations.

0:07.6

We're going to be giving you a little bit of an introduction as to what they are, what you

0:11.0

can do with them, and just how incredible of an awesome new technology

0:14.4

this is for the browser. My name is Scott Tolinsky and with me as always is Wes Boss. What's up Wes?

0:20.0

Hey, Stoked to talk about this, it's such a cool

0:23.9

API that's hit, CSS and JavaScript,

0:27.1

and it's unreal, all the fun stuff you can do with it.

0:30.9

I'm so stoked.

0:31.9

This is one, View Transition, starting

0:34.8

style. There's so many cool new APIs, but this one in particular feels like it

0:38.8

has a lot of depth into what you can accomplish with it. So I'm stoked to see some of the things

0:44.5

that you're going to be talking about today. I'm also stoked to see my Century dashboard

0:49.5

because it does not show any major errors at this time because guess why we use Century to fix

0:55.4

those errors on the syntax website so if you're having bugs and issues and stuff on

0:59.5

your website you need visibility into that and you can get that with Century.

1:03.2

So you just sign up for Century, you drop a script in your site, next thing you know you're

1:07.4

cruising, you're getting all your errors popping in, you're getting those stack traces,

1:11.6

it's looking at your source maps, it's telling you exactly

1:14.0

where the problem is and who's hitting that problem. Maybe there's an obscure bug

1:18.9

with one specific browser. You're gonna know what browser it is and where that bug is. You can go fix that thing.

1:25.0

How many people don't have an issue. So if you want to check this out, head on under

...

Please login to see the full transcript.

Disclaimer: The podcast and artwork embedded on this page are from Wes Bos, and are the property of its owner and not affiliated with or endorsed by Tapesearch.

Generated transcripts are the property of Wes Bos and are distributed freely under the Fair Use doctrine. Transcripts generated by Tapesearch are not guaranteed to be accurate.

Copyright © Tapesearch 2025.