Web Animation
Planted 02023-05-18
Web animation implementation areas:
- CSS animation property
- JavaScript
- requestAnimationFrame
- Web Animations API
- WebGL
- WebGPU
Web animation intent areas:
- π Animate CSS properties
- π Animate DOM attributes
- β¨ Animate particle systems
- βοΈ Animate full 2D scenes
- ποΈ Animate full 3D scenes
JavaScript animation libraries
-
GreenSock
-
GSAP (GreenSock Animation Platform)
- Paid subscription plugins
-
Plugins
- Flip plugin π
- MotionPathPlugin π
- ($$) MorphSVGPlugin π
- ($) DrawSVGPlugin π
- TextPlugin π
- Physics2DPlugin β¨
- Draggable π
- SplitText π
-
GSAP (GreenSock Animation Platform)
- anime.js π π
-
Popmotion π
π
- Powers Framer Motion (React)
- Motion One π π (By the author of Popmotion and Framer motion)
- Typed.js π
- AutoAnimate π
- mo.js β¨
- Paper.js β¨
- Proton particles β¨
- Pts.js β¨
- p5.js
- D3.js π
- (React) react-spring π π
- Pixi.js βοΈ
-
three.js ποΈ
- (React) React Three Fiber
Other animation workflows
Resources
Specs
- CSS animation
- JavaScript animation
Articles
- web.dev: Animations
- MDN: Animation performance and frame rate
- MDN: CSS and JavaScript animation performance
- Josh Comeau: An Interactive Guide to Keyframe Animations
- Josh Comeau: Building a Magical 3D Button
- Josh Comeau: A Friendly Introduction to Spring Physics
- Josh Comeau: Accessible Animations in React
- Josh Comeau: Boop!
- Josh Comeau: Animated Sparkles in React
- Maxime Heckel: Everything about Framer Motion layout animations
- Maxime Heckel: Guide to creating animations that spark joy with Framer Motion
- Motion One: Feature comparison
- Motion One: Performance
- GreenSock: JavaScript Animation Speed Test
- Proper use of animation in UX
Talks
Courses
- Josh Comeau: CSS for JavaScript Developers
- Bruno Simon: three.js journey
- School of motion
- Tilda: Web animation
- Sam Selikoff: Build UI: Framer Motion Recipes