The five best design links, every weekday

Category: Animation

All Categories

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.

developer.chrome.com

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

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

amitmerchant.com

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.

antfu.me

Animated SVG Logo

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

developer.chrome.com

A case study on scroll-driven animations performance

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

varun.ca

Iridescent crystal with raymarching and signed distance fields

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

blog.jim-nielsen.com

Watch Transitions in Slow Motion in Chrome’s DevTools

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

kottke.org

Logo Factory

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

joshwcomeau.com

Animated Pride Flags

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

tympanus.net

UI Interactions & Animations Roundup #33

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

scroll-driven-animations.style

Scroll-driven Animations

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

fullystacked.net

Using linear() for better animation

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

motion.zajno.com

Motion

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

daverupert.com

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+.

julienthibeaut.xyz

Crafting a modern spotlight effect with React and CSS

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