awwwards-animations

仓库: devmartinese/awwwards-animations-skill
安装量: 380
排名: #2514

安装

npx skills add https://github.com/devmartinese/awwwards-animations-skill --skill awwwards-animations

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)

GSAP + React hook (v3.14.1)

npm install gsap @gsap/react

Lenis (v1.3.17) - includes React components

npm install lenis

Motion (Framer Motion)

npm install motion

Anime.js (v4.0.0)

npm
install
animejs
React Setup
1. GSAP Configuration (app-wide)
// lib/gsap.ts
'use client'
// Next.js App Router
import
gsap
from
'gsap'
import
{
ScrollTrigger
}
from
'gsap/ScrollTrigger'
import
{
useGSAP
}
from
'@gsap/react'
// Register plugins once
gsap
.
registerPlugin
(
ScrollTrigger
,
useGSAP
)
export
{
gsap
,
ScrollTrigger
,
useGSAP
}
2. Lenis + GSAP ScrollTrigger Integration (Critical)
// components/SmoothScroll.tsx
'use client'
import
{
ReactLenis
,
useLenis
}
from
'lenis/react'
import
{
useEffect
}
from
'react'
import
{
gsap
,
ScrollTrigger
}
from
'@/lib/gsap'
export
function
SmoothScroll
(
{
children
}
:
{
children
:
React
.
ReactNode
}
)
{
const
lenis
=
useLenis
(
)
useEffect
(
(
)
=>
{
if
(
!
lenis
)
return
lenis
.
on
(
'scroll'
,
ScrollTrigger
.
update
)
gsap
.
ticker
.
add
(
(
time
)
=>
lenis
.
raf
(
time
*
1000
)
)
gsap
.
ticker
.
lagSmoothing
(
0
)
return
(
)
=>
{
gsap
.
ticker
.
remove
(
lenis
?.
raf
)
}
}
,
[
lenis
]
)
return
(
<
ReactLenis
root
options
=
{
{
lerp
:
0.1
,
duration
:
1.2
,
smoothWheel
:
true
}
}
>
{
children
}
</
ReactLenis
>
)
}
// Wrap in layout: {children}
Core Patterns (React)
Detailed implementations in references:
GSAP + useGSAP
See
references/gsap-react.md
Motion (Framer Motion)
See
references/motion-patterns.md
Anime.js 4.0
See
references/animejs-react.md
Lenis React
See
references/lenis-react.md
Geometric Shapes
See
references/geometric-shapes.md
(SVG, Canvas, Zdog, p5.js, Tetris-style)
Audio Reactive
See
references/audio-reactive.md
(Tone.js, Web Audio, scroll audio)
Physics 2D
See
references/physics-2d.md
(Matter.js, collisions, constraints)
Advanced (Three.js, WebGL)
See
references/advanced-patterns.md
Algorithmic & Generative Art
See
references/algorithmic-art.md
(fractals, L-systems, flow fields, attractors, noise, sacred geometry)
Advanced Text Effects
See
references/text-effects.md
(glitch, kinetic typography, morphing, explosion, circular text, scramble)
Geometric Puzzles
See
references/geometric-puzzles.md
(Dudeney, tangram, tessellations, Penrose, polyominoes)
Design Philosophy
See
references/design-philosophy.md
(brutalist, minimalist, abstract, mixing styles, palettes)
Performance
See references/performance.md Quick Patterns (React) 1. Magnetic Cursor (GSAP + useGSAP) 'use client' import { useRef , useEffect } from 'react' import { gsap , useGSAP } from '@/lib/gsap' export function MagneticCursor ( ) { const cursorRef = useRef < HTMLDivElement

( null ) const pos = useRef ( { x : 0 , y : 0 , cx : 0 , cy : 0 } ) useEffect ( ( ) => { const h = ( e : MouseEvent ) => { pos . current . x = e . clientX ; pos . current . y = e . clientY } window . addEventListener ( 'mousemove' , h ) return ( ) => window . removeEventListener ( 'mousemove' , h ) } , [ ] ) useGSAP ( ( ) => { gsap . ticker . add ( ( ) => { const p = pos . current p . cx += ( p . x - p . cx ) * 0.15 ; p . cy += ( p . y - p . cy ) * 0.15 gsap . set ( cursorRef . current , { x : p . cx , y : p . cy } ) } ) } ) return < div ref = { cursorRef } className = " fixed w-10 h-10 border border-white rounded-full pointer-events-none mix-blend-difference z-[9999] -translate-x-1/2 -translate-y-1/2 " /> } 2. Magnetic Button (Motion) 'use client' import { useRef , useState } from 'react' import { motion } from 'motion/react' export function MagneticButton ( { children } : { children : React . ReactNode } ) { const ref = useRef < HTMLButtonElement

( null ) const [ pos , setPos ] = useState ( { x : 0 , y : 0 } ) const onMove = ( e : React . MouseEvent ) => { const { left , top , width , height } = ref . current ! . getBoundingClientRect ( ) setPos ( { x : ( e . clientX - left - width / 2 ) * 0.3 , y : ( e . clientY - top - height / 2 ) * 0.3 } ) } return ( < motion.button ref = { ref } onMouseMove = { onMove } onMouseLeave = { ( ) => setPos ( { x : 0 , y : 0 } ) } animate = { pos } transition = { { type : 'spring' , stiffness : 150 , damping : 15 } } className = " px-8 py-4 bg-white text-black rounded-full "

{ children } </ motion.button

) } 3. Parallax Hero (GSAP + useGSAP) 'use client' import { useRef } from 'react' import { gsap , ScrollTrigger , useGSAP } from '@/lib/gsap' export function ParallaxHero ( ) { const containerRef = useRef < HTMLDivElement

( null ) useGSAP ( ( ) => { gsap . to ( '.parallax-bg' , { yPercent : 50 , ease : 'none' , scrollTrigger : { trigger : containerRef . current , start : 'top top' , end : 'bottom top' , scrub : true , } , } ) gsap . to ( '.hero-title' , { yPercent : 100 , opacity : 0 , scrollTrigger : { trigger : containerRef . current , start : 'top top' , end : '50% top' , scrub : true , } , } ) } , { scope : containerRef } ) return ( < div ref = { containerRef } className = " relative h-screen overflow-hidden "

< div className = " parallax-bg absolute inset-0 bg-cover bg-center " /> < h1 className = " hero-title absolute inset-0 flex items-center justify-center text-6xl "

Hero Title </ h1

</ div

) } 4. Text Character Reveal (Motion) 'use client' import { motion } from 'motion/react' const container = { hidden : { opacity : 0 } , visible : { opacity : 1 , transition : { staggerChildren : 0.02 } , } , } const child = { hidden : { opacity : 0 , y : 50 , rotateX : - 90 } , visible : { opacity : 1 , y : 0 , rotateX : 0 , transition : { type : 'spring' , damping : 12 } , } , } export function TextReveal ( { text } : { text : string } ) { return ( < motion.span variants = { container } initial = " hidden " whileInView = " visible " viewport = { { once : true } } className = " inline-block "

{ text . split ( '' ) . map ( ( char , i ) => ( < motion.span key = { i } variants = { child } className = " inline-block "

{ char === ' ' ? '\u00A0' : char } </ motion.span

) ) } </ motion.span

) } 5. Image Reveal (GSAP) 'use client' import { useRef } from 'react' import { gsap , useGSAP } from '@/lib/gsap' export function ImageReveal ( { src , alt } : { src : string ; alt : string } ) { const containerRef = useRef < HTMLDivElement

( null ) useGSAP ( ( ) => { gsap . from ( containerRef . current , { clipPath : 'inset(100% 0% 0% 0%)' , duration : 1.2 , ease : 'power4.inOut' , scrollTrigger : { trigger : containerRef . current , start : 'top 80%' , } , } ) gsap . from ( '.reveal-img' , { scale : 1.3 , duration : 1.5 , ease : 'power2.out' , scrollTrigger : { trigger : containerRef . current , start : 'top 80%' , } , } ) } , { scope : containerRef } ) return ( < div ref = { containerRef } className = " overflow-hidden "

< img src = { src } alt = { alt } className = " reveal-img w-full h-full object-cover " /> </ div

) } 6. Glitch Text Effect (CSS + GSAP) 'use client' import { useRef , useEffect } from 'react' import { gsap } from '@/lib/gsap' export function GlitchText ( { text } : { text : string } ) { const ref = useRef < HTMLDivElement

( null ) useEffect ( ( ) => { const layers = ref . current ! . querySelectorAll ( '.g-layer' ) const tl = gsap . timeline ( { repeat : - 1 , repeatDelay : 3 } ) tl . to ( layers [ 0 ] , { x : - 5 , duration : 0.05 , ease : 'none' } , 0 ) . to ( layers [ 0 ] , { x : 5 , duration : 0.05 } , 0.05 ) . to ( layers [ 0 ] , { x : 0 , duration : 0.05 } , 0.1 ) . to ( layers [ 1 ] , { x : 5 , duration : 0.05 } , 0.02 ) . to ( layers [ 1 ] , { x : - 5 , duration : 0.05 } , 0.07 ) . to ( layers [ 1 ] , { x : 0 , duration : 0.05 } , 0.12 ) return ( ) => { tl . kill ( ) } } , [ ] ) return ( < div ref = { ref } className = " relative font-mono text-5xl font-black "

< span className = " relative z-10 "

{ text } </ span

< span className = " g-layer absolute inset-0 text-cyan-400 mix-blend-multiply " aria-hidden

{ text } </ span

< span className = " g-layer absolute inset-0 text-red-400 mix-blend-multiply " aria-hidden

{ text } </ span

</ div

) } 7. Fractal Tree (Canvas 2D) 'use client' import { useRef , useEffect } from 'react' export function FractalTree ( { depth = 10 , angle = 25 } : { depth ? : number ; angle ? : number } ) { const canvasRef = useRef < HTMLCanvasElement

( null ) useEffect ( ( ) => { const canvas = canvasRef . current ! const ctx = canvas . getContext ( '2d' ) ! canvas . width = canvas . offsetWidth * 2 ; canvas . height = canvas . offsetHeight * 2 ; ctx . scale ( 2 , 2 ) let progress = 0 , raf = 0 function branch ( x : number , y : number , len : number , a : number , d : number ) { if ( d

depth || len < 2 ) return const dp = Math . max ( 0 , Math . min ( 1 , progress * depth - d ) ) if ( dp <= 0 ) return const ex = x + Math . cos ( a * Math . PI / 180 ) * len * dp const ey = y - Math . sin ( a * Math . PI / 180 ) * len * dp ctx . beginPath ( ) ; ctx . moveTo ( x , y ) ; ctx . lineTo ( ex , ey ) ctx . strokeStyle = hsl( ${ 120 + d * 15 } , 60%, ${ 30 + d * 5 } %) ctx . lineWidth = Math . max ( 1 , ( depth - d ) * 1.5 ) ; ctx . stroke ( ) branch ( ex , ey , len * 0.72 , a + angle , d + 1 ) branch ( ex , ey , len * 0.72 , a - angle , d + 1 ) } const animate = ( ) => { progress = Math . min ( 1 , progress + 0.008 ) ctx . clearRect ( 0 , 0 , canvas . offsetWidth , canvas . offsetHeight ) branch ( canvas . offsetWidth / 2 , canvas . offsetHeight , canvas . offsetHeight * 0.28 , 90 , 0 ) if ( progress < 1 ) raf = requestAnimationFrame ( animate ) } animate ( ) return ( ) => cancelAnimationFrame ( raf ) } , [ depth , angle ] ) return < canvas ref = { canvasRef } className = " w-full h-full bg-gray-950 " /> } See references/algorithmic-art.md for L-systems, flow fields, attractors, noise, sacred geometry. 8. Geometric Dissection (SVG + GSAP) 'use client' import { useRef , useState } from 'react' import { gsap } from '@/lib/gsap' const P = [ { id : 'A' , tri : 'M 0,173 L 50,87 L 100,173 Z' , sq : 'M 0,0 L 100,0 L 100,87 L 0,87 Z' , c : '#f43f5e' } , { id : 'B' , tri : 'M 50,87 L 100,0 L 150,87 Z' , sq : 'M 100,0 L 200,0 L 200,87 L 100,87 Z' , c : '#8b5cf6' } , { id : 'C' , tri : 'M 100,173 L 150,87 L 200,173 Z' , sq : 'M 0,87 L 100,87 L 100,173 L 0,173 Z' , c : '#06b6d4' } , { id : 'D' , tri : 'M 50,87 L 100,173 L 150,87 L 100,0 Z' , sq : 'M 100,87 L 200,87 L 200,173 L 100,173 Z' , c : '#f59e0b' } , ] export function GeometricDissection ( ) { const svg = useRef < SVGSVGElement

( null ) const [ isSq , setSq ] = useState ( false ) const morph = ( ) => { const t = ! isSq P . forEach ( ( p , i ) => { const el = svg . current ! . querySelector ( `

d-

${ p . id } ` ) if ( el ) gsap . to ( el , { attr : { d : t ? p . sq : p . tri } , duration : 1.5 , ease : 'power2.inOut' , delay : i * 0.15 } ) } ) ; setSq ( t ) } return ( < div className = " flex flex-col items-center gap-4 "

< svg ref = { svg } viewBox = " -10 -10 220 200 " className = " w-64 h-64 "

{ P . map ( p => < path key = { p . id } id = { d- ${ p . id } } d = { p . tri } fill = { p . c } stroke = "

000

" strokeWidth = " 1.5 " /> ) } </ svg

< button onClick = { morph } className = " px-6 py-2 bg-white text-black font-mono text-sm "

{ isSq ? '△' : '□' } </ button

</ div

) } See references/geometric-puzzles.md for tangram, tessellations, Penrose tiles, polyominoes. 9. Brutalist Grid (Motion) 'use client' import { motion } from 'motion/react' export function BrutalistGrid ( { items } : { items : string [ ] } ) { return ( < div className = " grid grid-cols-3 border-2 border-black "

{ items . map ( ( item , i ) => ( < motion.div key = { i } className = " border-2 border-black p-6 font-mono font-black uppercase text-2xl " style = { { mixBlendMode : i % 2 === 0 ? 'normal' : 'difference' } } initial = { { opacity : 0 } } whileInView = { { opacity : 1 } } viewport = { { once : true } } transition = { { duration : 0 , delay : i * 0.1 } } whileHover = { { backgroundColor : '#000' , color : '#BAFF39' , transition : { duration : 0 } } }

{ item } </ motion.div

) ) } </ div

) } 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 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 // Motion: useReducedMotion() → conditionally disable/reduce animations import { useReducedMotion } from 'motion/react' const reduced = useReducedMotion ( ) // true if prefers-reduced-motion: reduce @media ( prefers-reduced-motion : reduce ) { * , * ::before , * ::after { animation-duration : 0.01 ms !important ; transition-duration : 0.01 ms !important ; } } Performance Rules Only animate transform and opacity Use will-change sparingly Always cleanup: useGSAP handles it automatically Scope GSAP selectors to container refs Use contextSafe() for event handlers with GSAP Memoize Motion variants objects Common Pitfalls Not integrating Lenis with ScrollTrigger Missing scope in useGSAP Not using contextSafe() for click handlers React 18 Strict Mode calling effects twice Forgetting 'use client' in Next.js App Router 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

← 返回排行榜