The five best design links, every weekday

Category: Animation

All Categories

J.J. Gibson—The meaning of the world

Are we cut off from the outer world, trapped alone in our personal experience?

Motionity - web-based motion graphics editor

Open source motion editor to create videos with keyframing, masking, filters, text animations, and more.

The Study of Shaders with React Three Fiber

A complete guide on how to use shaders with React Three Fiber.

When animation is an accessibility problem

“Weird” access needs like mine show that true accessibility isn’t a checklist, it’s an ongoing conversation with the disability community.

Single Element Loaders: Going 3D!

For this fourth and final article of our little series on single-element loaders, we are going to explore 3D patterns.

How I Chose an Animation Library for My Solitaire Game

Follow the journey one front-end developer took to narrow down which animation library to use on a project to create a Solitaire online game.

UI Interactions & Animations Roundup #25

A fresh collection of the best and most creative animations from Dribbble from the past couple of weeks.

How Figma put the bounce in spring animations

The physics behind spring animations.

The World’s Most Satisfying Checkbox

A walkthrough of how (Not Boring) Software applies the art of 'game feel' to product design.

How to Animate SVG Shapes on Scroll

A short tutorial on how to animate SVG paths while smooth scrolling a web page using Lenis and GSAP’s ScrollTrigger plugin.

AutoAnimate: Add motion to your apps with a single line of code

A zero-config, drop-in animation utility that automatically adds smooth transitions to your web app.

Motion DevTools

A browser extension for inspecting and editing web animations.

Motion in UX Design: 6 Effective Types of Web Animation

Read about effective types of web animation and check plenty of motion design examples showing how motion supports web interactions and usability.

Shader Park

A JavaScript library for creating interactive procedural 2D and 3D shaders.

WebGPU: All of the cores, none of the canvas

WebGPU is an upcoming Web API that gives you low-level, general-purpose access GPUs.

Everything about Framer Motion layout animations

A complete guide to Framer Motion layout animations showcasing every concept.

Gooey Warping SVG Numbers

See how Fabio Ottaviani cleverly uses SVG filters and other SVG tricks to animate this fun countdown!

Shaders and Gradients

How to learn shaders, why gradients are so important, and exploring the hidden gradients in all kind of effects.

Painting SVG Paths with Masks

See how Tom Miller made this beautiful painterly effect with SVG paths, an image mask, and GSAP!

Background Shift Animation with CSS Blend Modes

A background color shift transition using CSS Blend Modes and a multi-layer animation.