Syntax - Tasty Web Development Treats cover image

695: 5 New CSS Features You Should Know

Syntax - Tasty Web Development Treats

Exploring CSS motion path and moving elements along SVG paths

2min Snip

00:00

Play full episode

Summary

Transcript

Episode notes

Learn about CSS motion path and how it can be used to move elements along SVG paths in CSS. Discover an example of using CSS motion path to create a signature effect on a webpage and the challenges of scaling SVGs and paths.

In this episode of Syntax, Wes and Scott talk about 5 new CSS features :nth-child(4 of .neat), CSS Motion Path, Scroll Snap, Scroll Driven Animations, and Margin Trim.

Show Notes

00:25 Welcome
01:10 :nth-child(4 of .neat)
selector list argument of :nth-child and :nth-last-child CSS pseudo-classes | Can I use
06:43 CSS Motion Path
10:38 Scroll Snap
Practical CSS Scroll Snapping
14:36 Scroll Driven Animations
Scroll-driven Animations
Supper Club × Bramus Van Damme on CSS
16:58 Margin Trim

Hit us up on Socials!

Syntax: X Instagram Tiktok LinkedIn Threads

Wes: X Instagram Tiktok LinkedIn Threads

Scott: X Instagram Tiktok LinkedIn Threads

Get the Snipd
podcast app

Unlock the knowledge in podcasts with the podcast player of the future.

App store banner

Play store banner

AI-powered
podcast player

Listen to all your favourite podcasts with AI-powered features

Discover
highlights

Listen to the best highlights from the podcasts you love and dive into the full episode

Save any
moment

Hear something you like? Tap your headphones to save it with AI-generated key takeaways

Share
& Export

Send highlights to Twitter, WhatsApp or export them to Notion, Readwise & more

AI-powered
podcast player

Listen to all your favourite podcasts with AI-powered features

Discover
highlights

Listen to the best highlights from the podcasts you love and dive into the full episode