Professional React animation skill for creating Awwwards/FWA-level animations using GSAP (useGSAP), Motion (Framer Motion), Anime.js, and Lenis. Use when building premium scroll experiences, custom cursors, page transitions, text animations, parallax effects, micro-interactions, or any animation tha

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 Creative coding/generative p5.js Rich ecosystem Audio reactive Tone.js Web Audio, synths, effects Physics 2D Matter.js Gravity, collisions, constraints Algorithmic/generative art Canvas 2D + p5.js Math driven visuals Fractals/L systems Canvas 2D recursivo Recursive rendering Tessellations/geometric puzzles SVG + GSAP Precise animated transforms Kinetic typography advanced GSAP SplitText + Canvas Per char control Glitch effects CSS + GSAP Layered RGB split, clip path Brutalist animation CSS raw + Motion Hard cuts, no easing Minimalist animation Motion springs Subtle, purposeful motion Installation (Latest Stable 2025) React Setup 1. GSAP Configuration (app wide) 2. Lenis + GSAP ScrollTrigger Integration (Critical) Core Patterns (React) Detailed implementations in references: GSAP + useGSAP : See [references/gsap react.md](references/gsap react.md) Motion (Framer Motion) : See [references/motion patterns.md](references/motion patterns.md) Anime.js 4.0 : See [references/animejs react.md](references/animejs react.md) Lenis React : See [references/lenis react.md](references/lenis react.md) Geometric Shapes : See [references/geometric shapes.md](references/geometric shapes.md) (SVG, Canvas, Zdog, p5.js, Tetris style) Audio Reactive : See [references/audio reactive.md](references/audio reactive.md) (Tone.js, Web Audio, scroll audio) Physics 2D : See [references/physics 2d.md](references/physics 2d.md) (Matter.js, collisions, constraints) Advanced (Three.js, WebGL) : See [references/advanced patterns.md](references/advanced patterns.md) Algorithmic & Generative Art : See [references/algorithmic art.md](references/algorithmic art.md) (fractals, L systems, flow fields, attractors, noise, sacred geometry) Advanced Text Effects : See [references/text effects.md](references/text effects.md) (glitch, kinetic typography, morphing, explosion, circular text, scramble) Geometric Puzzles : See [references/geometric puzzles.md](references/geometric puzzles.md) (Dudeney, tangram, tessellations, Penrose, polyominoes) Design Philosophy : See [references/design philosophy.md](references/design philosophy.md) (brutalist, minimalist, abstract, mixing styles, palettes) Performance : See [references/performance.md](references/performance.md) Quick Patterns (React) 1. Magnetic Cursor (GSAP + useGSAP) 2. Magnetic Button (Motion) 3. Parallax Hero (GSAP + useGSAP) 4. Text Character Reveal (Motion) 5. Image Reveal (GSAP) 6. Glitch Text Effect (CSS + GSAP) 7. Fractal Tree (Canvas 2D) See [references/algorithmic art.md](references/algorithmic art.md) for L systems, flow fields, attractors, noise, sacred geometry. 8. Geometric Dissection (SVG + GSAP) See [references/geometric puzzles.md](references/geometric puzzles.md) for tangram, tessellations, Penrose tiles, polyominoes. 9. Brutalist Grid (Motion) Design Philosophy (Quick Reference) Style Motion Feel Easing Typography Key Trait Brutalist Hard, instant, jarring none / steps() Mono, 15 30vw Raw honesty Minimalist Smooth, subtle, slow power2.out Sans serif light Purposeful restraint Abstract Noise driven, parametric Organic/sine Varies Mathematical beauty Neo Brutalist Bold but controlled power1.out Mono + color Brutalism + restraint See [references/design philosophy.md](references/design philosophy.md) for full guide with color palettes and mixing strategies. Easing Reference Feel GSAP Motion Smooth power2.out [0.16, 1, 0.3, 1] Snappy power4.out [0.87, 0, 0.13, 1] Bouncy back.out(1.7) { type: 'spring', stiffness: 300, damping: 20 } Dramatic power4.inOut [0.76, 0, 0.24, 1] Timing Micro interactions: 150 300ms UI transitions: 300 500ms Page transitions: 500 800ms Stagger: 0.02 0.1s per item Accessibility Performance Rules 1. Only animate transform and opacity 2. Use will change sparingly 3. Always cleanup: useGSAP handles it automatically 4. Scope GSAP selectors to container refs 5. Use contextSafe() for event handlers with GSAP 6. Memoize Motion variants objects Common Pitfalls 1. Not integrating Lenis with ScrollTrigger 2. Missing scope in useGSAP 3. Not using contextSafe() for click handlers 4. React 18 Strict Mode calling effects twice 5. Forgetting 'use client' in Next.js App Router 6. Not calling ScrollTrigger.refresh() after dynamic content Testing Checklist [ ] 60fps on scroll (Chrome DevTools Performance) [ ] Keyboard navigation works [ ] Respects prefers reduced motion [ ] No layout shifts (CLS) [ ] Mobile touch works [ ] ScrollTrigger markers removed in prod [ ] No memory leaks on unmount Inspiration Active Theory, Studio Freight, Locomotive, Resn, Aristide Benoist, Immersive Garden

awwwards-animations