The five best design links, every weekday

Category: Animation

All Categories

textlab.dev

Animating Font Palette

With the release of Chrome 121 we can now animate a smooth transition between font-palettes in Color Fonts using only CSS.

jmberesford.github.io

WebGPU-kit

WebGPU-kit is a collection of libraries that make it easy to build high-performance, cross-platform, web-based graphics applications.

tympanus.net

A Practical Introduction to Scroll-Driven Animations

With CSS you can add scroll animations that toggle shadows on navbars, reveal images, add scrollytelling, link up carousel elements and much more.

smashingmagazine.com

The View Transitions API And Delightful UI Animations

The View Transitions API is a new — but game-changing — feature.

12daysofweb.dev

View Transitions

Animating DOM state changes no longer requires a mountain of code thanks to the new View Transitions API.

viget.com

Create Rive-ting Animations

Rive reduces the time it takes to make complex animation, making some motion items easier and faster to build.

smashingmagazine.com

Creating Accessible UI Animations

Animation and accessibility are often seen as two separate powers at odds with one another.

bram.us

Scroll-Driven Animations: Style an element based on the scroll direction & speed

Combine Scroll-Driven Animations with @​property, transition-delay, calc(), sign() and abs() … and you can do Scroll Detection using only CSS!

reuters.com

Disney’s 100 years: Meeting change with innovation

As Walt Disney Studios turns 100, investors worry it’s beginning to show its age.

smashingmagazine.com

How To Animate Along A Path In CSS

CSS loaders and progress indicators are some of the most widely used examples in tutorials and documentation.

gsap.com

GSAP

A fun new homepage for the JavaScript animation framework.

uxdesign.cc

Transition animations: a practical guide

Principles that can be used immediately by anyone in their design process.

youtube.com

Our Frasier Remake

More than 130 animators, filmmakers, and Frasier fans from 11 different countries have remade the Seattle psychiatrist's most meta episode.

tympanus.net

Animating Multi-Page Navigations

A beginner-friendly guide that walks you through the use of the Browser View Transitions API with Astro for a smoother navigation experience.

smashingmagazine.com

Revealing Images With CSS Mask Animations

Let’s play with images and experiment with CSS masks.

developer.chrome.com

Astro View Transitions

Highlight how the Astro community embraced View Transitions when Chrome was shaping up the API.

tympanus.net

Connected Grid Layout Animation

Some ideas for simple on-scroll animations on grid layouts with “connected” items.

developer.mozilla.org

Creating custom easing effects in CSS animations using the linear() function

Explore how linear() works compared with other timing functions used for easing, with practical examples.

developer.chrome.com

Four new CSS features for smooth entry and exit animations

Learn about new capabilities that enable smooth transitioning of discrete animations and between the top layer.

tympanus.net

On-Scroll Column & Row Animations

Some inspiration for scroll-driven animations on column and row items.