The five best design links, every weekday

Category: Animation

All Categories

bram.us

CSS-only Custom Range Slider with Motion

@property + counters + anchoring + scroll-driven animations = 😍

emildziewanowski.com

Flat Planets

An exploration of creating planets to decorate a skybox.

chasem.co

New magic for animations in CSS

There are two new features coming to CSS that will make it much easier to further avoid JavaScript when implementing animations.

pawelgrzybek.com

Popover element entry and exit animations in a few lines of CSS

Creating entry and exit animations for elements has always been tedious.

yuanchuan.dev

Time-based CSS Animations

In my earlier post Time Uniform For CSS Animation, I took a note about a way to do CSS animations with time ticks instead of keyframes.

emildziewanowski.com

Flowfields

Complex flowfields without using computational fluid dynamics.

vercel.com

Building an interactive 3D event badge with React Three Fiber

See a full working demo of how we built the interactive Vercel Ship ’24 badge using React Three Fiber and react-three-rapier.

pudding.cool

The Flipbook Experiment

The results of making a crowd-sourced flipbook animation.

smashingmagazine.com

Sliding 3D Image Frames In CSS

Creating 3D effects in CSS isn’t an entirely new concept, but typical approaches use additional elements in the markup.

studiodumbar.com

Instagram — Motion Identity System

Instagram invited Studio Dumbar to collaborate on the next phase of expansion: the creation of a vibrant, all-encompassing motion system.

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.