awwwards-animations
Installation
Summary
Premium React animations at Awwwards/FWA quality—60fps, scroll-driven, and award-worthy.
- Covers four core libraries: GSAP + ScrollTrigger for scroll-driven animations, Lenis for smooth scrolling, Motion (Framer Motion) for React-native effects, and Anime.js for lightweight tweens
- Includes decision matrix routing tasks to the right tool: magnetic cursors, parallax, text reveals, glitch effects, and page transitions with working React examples
- Supports advanced creative coding: fractals, L-systems, flow fields, tessellations, geometric dissections, kinetic typography, and generative art via Canvas, SVG, p5.js, and Zdog
- Provides design philosophy guidance for brutalist, minimalist, and neo-brutalist aesthetics with easing reference, timing rules, and performance constraints (transform/opacity only, proper cleanup, ScrollTrigger integration)
- Built-in accessibility patterns (prefers-reduced-motion), testing checklist, and common pitfalls to avoid in Next.js App Router
SKILL.md
Awwwards Animations
Create premium web animations at Awwwards/FWA quality level. React-first approach. 60fps non-negotiable.
Decision Matrix
| Task | Library | Why |
|---|---|---|
| Scroll-driven animations | GSAP + ScrollTrigger + useGSAP | Industry standard, best control |
| Smooth scroll | Lenis + ReactLenis | Best performance, works with ScrollTrigger |
| React-native animations | Motion (Framer Motion) | Native React, useScroll/useTransform |
| Simple/lightweight effects | Anime.js 4.0 | Small footprint, clean API |
| Complex timelines | GSAP | Unmatched timeline control |
| SVG morphing | GSAP MorphSVG or Anime.js | Both excellent |
| 3D + animation | Three.js + GSAP | GSAP controls Three.js objects |
| Page transitions | AnimatePresence or GSAP | Motion for React, GSAP for complex |
| Geometric shapes (vector) | SVG + GSAP/Motion | Native, animable |
| Geometric shapes (canvas) | Canvas 2D API | Programmatic, performant |
| Pseudo-3D shapes | Zdog | Flat design 3D, ~2kb |