The five best design links, every weekday

Category: Animation

All Categories

css-tricks.com

Typewriter Animation That Handles Anything You Throw at It

I watched Kevin Powell’s video where he was able to recreate a nice typewriter-like animation using CSS.

wsj.com

Web Designers Grapple With Downside to Flashy Animation: Motion Sickness

Web animations make some users sick. Companies are designing antidotes.

uxdesign.cc

Accessible design: How much motion is too much motion?

A process breakdown of how to create Accessibility compliant interaction design within a framework.

wayfinder.nfb.ca

Wayfinder

A relaxing 'art game' in your browser that combines illustration, procedural generation, and computational poetry.

getloaf.io

SVG animations made easySponsored

Loaf is a tool that makes SVG animations easy. Hundreds of premium animations packaged in a beautiful app for Windows and macOS. Get started for free!

domevents.dev

Explore DOM Events

Learn how the DOM Event system works through exploration

varun.ca

Noise in Creative Coding

An overview of the noise function and its myriad applications in the world of creative coding. With lots of interactive examples.

css-tricks.com

Nailing That Cool Dissolve Transition

We’re going to create an impressive transition effect between images that’s, dare I say, very simple to implement and apply to any site.

bootcamp.uxdesign.cc

Designing micro-interactions with Figma interactive components

Designing some components states and micro-interactions with the new beta feature of Figma.

tympanus.net

Circular SVG Text Animation

Exploring some experimental circular SVG text effects for an intro animation.

bram.us

The Future of CSS: Scroll-Linked Animations with @scroll-timeline (Part 2)

Create (pure CSS) Scroll-Linked Animations with Element-based Offsets using @scroll-timeline from the “Scroll-linked Animations“ CSS Specification.

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…