The five best design links, every weekday

Category: Animation

All Categories

tympanus.net

Simple CSS Line Hover Animations for Links

A couple of simple & subtle CSS-based line hover animations for links.

varun.ca

Let’s Build a Confetti Cannon

A tutorial teaching you how to build a confetti cannon. Along the way, you'll learn about particle systems and get a refresher on high school physics.

animxyz.com

AnimXYZ

The first composable CSS animation toolkit

artofthetitle.com

Title Design of The Queen’s Gambit and Using Processing

Designer Saskia Marka and physicist-turned-animator Dave Whyte discuss their work for Netflix hit The Queens Gambit including using Processing.js

codersblock.com

What Can You Put in a CSS Variable?

A tour of the various things that CSS variables can hold, including animated values.

tympanus.net

UI Interactions & Animations Roundup #13

A fresh set of trendy UI interactions and animations for your inspiration.

uxdesign.cc

How to make ultra-smooth animations in Figma Motion plugin

Every UX/UI designer comes to the moment when they need to animate their design.

spline.design

Spline - 3D for the web (Preview Release)

Create web-based 3D experiences with a visual tool.

varun.ca

Making things move

One of my favourite forms of creative coding is to add motion to static images. The process is always the same: pick an image, recreate it…

joshwcomeau.com

Boop!

Sometime a simple state change on mouse-enter doesn't quite work. Instead, what if the icons only popped over to their hover state for a brief moment?

tympanus.net

UI Interactions & Animations Roundup #12

Some fresh UI interaction and animation concepts for your inspiration.

danielcwilson.com

Additive Animations in CSS

What happens when you have two simultaneous animations in CSS that modify the same property?

mattperry.is

Layout projection: A method for animating browser layouts at 60fps

Browser layouts are difficult to animate. Layout projection provides a method of animating layouts at 60fps with no visual distortion.

css-tricks.com

How to Create a Realistic Motion Blur with CSS Transitions

Before we delve into making a realistic motion blur in CSS, it’s worth doing a quick dive into what motion blur is.

withcode.cmiscm.com

With Code

Learning basic movements for interactions with visual examples.

frontend.horse

Buttons that Spark Joy

What if we could make certain actions not just successful, but celebrations?

bennettfeely.com

Ztext.js

Easy to implement, 3D typography for any website and every font.

css-tricks.com

Lessons Learned from Sixty Days of Re-Animating Zombies with Hand-Coded CSS

Caution: Terrible sense of humor ahead. We’ll talk about practical stuff, but the examples pretty much all involve zombies and silly jokes.

css-tricks.com

How to Get Handwriting Animation With Irregular SVG Strokes

I wanted to do a handwriting animation for calligraphy fonts — the kind where the words animate like they are being written by an invisible pen.

css-tricks.com

Ground Rules for Web Animations

Animations can make a site stand out. Or, they can just as easily kill the experience.