Revolutionizing CSS Animation with Linear Functions

In this supper club episode of Syntax, Wes and Scott talk with Adam Argyle about a ton of new CSS features that have arrived or are coming soon, as well as his new site Gradient.style.

• 00:34 Welcome
• 01:05 Guest introduction
• Adam on Bluesky
• Adam on Twitter
• 01:48 CSS buckets
• New CSS Relative Units · January 6, 2023
• 03:16 rex rch ric rlh
• 08:06 Gradient.style
• CSS HD Gradients
• Open Props: sub-atomic styles
• 13:49 What are style queries vs container queries vs state queries?
• una.im | Style Queries
• Getting Started with Style Queries - Chrome Developers
• CSS Container Style Queries | Can I use… Support tables for HTML5, CSS3, etc
• 18:09 Trig functions
• Trigonometric functions in CSS
• CSS Trigonometric Functions: cos() and sin(): dots on a circle
• 19:57 Live transitions
• Understand Disney’s 12 principles of animation | Creative Bloq
• 25:08 View transitions
• View Transitions Demo
• View Transitions API - Web APIs | MDN
• 26:01 Text-wrap balance
• CSS text-wrap: balance - Chrome Developers
• 26:45 Text-wrap pretty
• 27:44 What’s the future of the browser landscape?
• 31:44 nth-child(An+B [of S])
• 33:06 Cascade layers
• 34:40 CSS Nesting
• 38:03 Animate discrete properties
• 39:42 Linear function
• Linear easing generator
• 41:33 Media query range syntax
• 42:04 Subgrid everywhere
• 44:41 Media query range and variables?
• UI Elements - Basics, Best Practice, and Built Ins — Syntax Podcast 612
• 45:32 env variables
• Hasty Treat - CSS Nesting 1 — Syntax Podcast 343
• 46:59 Animation composition
• 49:50 Select menu HTML element
• 52:16 SIIIIICK ××× PIIIICKS ×××

• Onewheel // Future Motion
• Adam Argyle

• Scott’s Instagram
• LevelUpTutorials Instagram
• Wes’ Instagram
• Wes’ Twitter
• Wes’ Facebook
• Scott’s Twitter
• Make sure to include @SyntaxFM in your tweets
• Wes Bos on Bluesky
• Scott on Bluesky
• Syntax on Bluesky