The five best design links, every weekday

Category: Animation

All Categories

Revealing Images With CSS Mask Animations

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

Astro View Transitions

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

Connected Grid Layout Animation

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

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.

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.

On-Scroll Column & Row Animations

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

Create complex animation curves in CSS with the `linear()` easing function

Introducing linear(), an easing function in CSS that interpolates linearly between its points.

Resume and pause animations in CSS

I have been working with CSS for like 10+ years now and I have worked with CSS animations for a fair amount of time.

Animated SVG Logo

I recently replaced the logo on the top left corner with an animated SVG.

A case study on scroll-driven animations performance

The new API is much smoother than the classic way of implementing scroll-driven animations.

Iridescent crystal with raymarching and signed distance fields

Ray marching is the technique behind all those super fancy demos on shadertoy.

Watch Transitions in Slow Motion in Chrome’s DevTools

For those of you about to do view transitions, I salute you!

Logo Factory

Jigar Patel uses 3D modelling software to imagine factory production lines that “build” logos and app icons.

Animated Pride Flags

Happy Pride month! In this tutorial, I’ll share a handful of my favourite animation tricks.

UI Interactions & Animations Roundup #33

Get inspired with new motion designs and creative UI interactions in our newest roundup.

Scroll-driven Animations

A bunch of demos and tools to show off Scroll-driven Animations.

Using linear() for better animation

Using the linear() easing function with CSS transitions, animations and the JavaScript Web Animations API.


Motion is a website that showcases the power of UI/UX animation in conveying the mood and character of a brand.

Getting started with View Transitions on multi-page apps

I hadn’t realized View Transitions for multi-page apps (MPAs) and static sites are ready for testing behind a flag in Chrome 113+.

Crafting a modern spotlight effect with React and CSS

How to create a modern spotlight effect with React and CSS?