| Animations Libs

Index

Animation Curve Blueprint:

Enter/exit animations: ease-out
An element that is already on the screen and is changing position: ease-in-out (car accelerating and decelerating)
Constant animations (marquee): linear
Simple hover effects (background color, text color, etc.): ease

Avoid using ease-in, almost never looks good as it's slower at the beginning which makes the UI feel unresponsive/slow.

⇒ General Animation (animates all)

⇒ API animation (CSS/DOM/SVG) 💕

Animation Battle → Libs comparison

DESIGN (UI / Layout)
│
├─ Figma
├─ Sketch
├─ Penpot
└─ Framer (também entra em website builder)

MOTION DESIGN (UI Animation)
│
├─ Lottie ecosystem
│   ├─ LottieFiles Editor
│   ├─ LottieLab
│   └─ After Effects → Lottie export
│
├─ Timeline-based motion tools
│   ├─ Jitter
│   ├─ Misaki Studio
│   ├─ Haiku Animator
│   └─ Motionity
│
└─ Interactive animation
    ├─ Rive
    └─ ProtoPie (mais para prototipagem)

3D / INTERACTIVE SCENES
│
├─ Spline
├─ Three.js (low level)
├─ PlayCanvas
└─ Babylon.js

WEBSITE BUILDERS / EXPERIENCE LAYER
│
├─ Framer
├─ Webflow
└─ Readymag

CODE-FIRST MOTION (DEV STACK)
│
├─ Framer Motion / Motion
├─ GSAP
├─ React Spring
└─ Three.js + React Three Fiber