SShinUI

AutoAnimate

One line of code, animated list transitions

Animation & MotionOpen sourceReactVueSvelte

Live site

auto-animate.formkit.com

Preview AutoAnimate inline

Loads the real site in a frame. Some sites block embedding — if it comes up blank, use Open instead.

What it is

Add a single ref to a parent element and its children animate on add, remove and reorder. The highest ratio of perceived polish to effort in this entire index.

Get started

terminal
npm i @formkit/auto-animate

Tags

zero-configliststiny

Related in Motion

View all

GSAP

gsap.com

The animation engine everything else is measured against

MotionFreeJavaScript

by GreenSock@greensock

Anime.js

animejs.com

Small, elegant JavaScript animation engine

MotionOpen sourceJavaScript

by Julian Garnier@juliangarnier

Motion

motion.dev

The React animation standard, now framework-agnostic

MotionFreemiumReactJavaScript

by Matt Perry@mattgperry