awwwards-animations

Name: awwwards-animations
Author: Hainrixz

26installs100forks

How to install awwwards-animations?

hainrixz/editor-pro-max/awwwards-animations

$npx -y skills add Hainrixz/editor-pro-max --skill awwwards-animations

Installs into the current project.

Summary

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,

Files · 1

View on GitHub

SKILL.md

1	# Awwwards Animations
2
3	Create premium web animations at Awwwards/FWA quality level. React-first approach. 60fps non-negotiable.
4
5	## Decision Matrix
6
7	\| Task \| Library \| Why \|
8	\|------\|---------\|-----\|
9	\| Scroll-driven animations \| GSAP + ScrollTrigger + useGSAP \| Industry standard, best control \|
10	\| Smooth scroll \| Lenis + ReactLenis \| Best performance, works with ScrollTrigger \|
11	\| React-native animations \| Motion (Framer Motion) \| Native React, useScroll/useTransform \|
12	\| Simple/lightweight effects \| Anime.js 4.0 \| Small footprint, clean API \|
13	\| Complex timelines \| GSAP \| Unmatched timeline control \|
14	\| SVG morphing \| GSAP MorphSVG or Anime.js \| Both excellent \|
15	\| 3D + animation \| Three.js + GSAP \| GSAP controls Three.js objects \|
16	\| Page transitions \| AnimatePresence or GSAP \| Motion for React, GSAP for complex \|
17	\| Geometric shapes (vector) \| SVG + GSAP/Motion \| Native, animable \|
18	\| Geometric shapes (canvas) \| Canvas 2D API \| Programmatic, performant \|
19	\| Pseudo-3D shapes \| Zdog \| Flat design 3D, ~2kb \|
20	\| Creative coding/generative \| p5.js \| Rich ecosystem \|
21	\| Audio reactive \| Tone.js \| Web Audio, synths, effects \|
22	\| Physics 2D \| Matter.js \| Gravity, collisions, constraints \|
23	\| Algorithmic/generative art \| Canvas 2D + p5.js \| Math-driven visuals \|
24	\| Fractals/L-systems \| Canvas 2D recursivo \| Recursive rendering \|
25	\| Tessellations/geometric puzzles \| SVG + GSAP \| Precise animated transforms \|
26	\| Kinetic typography advanced \| GSAP SplitText + Canvas \| Per-char control \|
27	\| Glitch effects \| CSS + GSAP \| Layered RGB split, clip-path \|
28	\| Brutalist animation \| CSS raw + Motion \| Hard cuts, no easing \|
29	\| Minimalist animation \| Motion springs \| Subtle, purposeful motion \|
30
31	## Installation (Latest Stable - 2025)
32
33	```bash
34	# GSAP + React hook (v3.14.1)
35	npm install gsap @gsap/react
36
37	# Lenis (v1.3.17) - includes React components
38	npm install lenis
39
40	# Motion (Framer Motion)
41	npm install motion
42
43	# Anime.js (v4.0.0)
44	npm install animejs
45	```
46
47	## React Setup
48
49	### 1. GSAP Configuration (app-wide)
50
51	```tsx
52	// lib/gsap.ts
53	'use client' // Next.js App Router
54
55	import gsap from 'gsap'
56	import { ScrollTrigger } from 'gsap/ScrollTrigger'
57	import { useGSAP } from '@gsap/react'
58
59	// Register plugins once
60	gsap.registerPlugin(ScrollTrigger, useGSAP)
61
62	export { gsap, ScrollTrigger, useGSAP }
63	```
64
65	### 2. Lenis + GSAP ScrollTrigger Integration (Critical)
66
67	```tsx
68	// components/SmoothScroll.tsx
69	'use client'
70	import { ReactLenis, useLenis } from 'lenis/react'
71	import { useEffect } from 'react'
72	import { gsap, ScrollTrigger } from '@/lib/gsap'
73
74	export function SmoothScroll({ children }: { children: React.ReactNode }) {
75	const lenis = useLenis()
76	useEffect(() => {
77	if (!lenis) return
78	lenis.on('scroll', ScrollTrigger.update)
79	gsap.ticker.add((time) => lenis.raf(time * 1000))
80	gsap.ticker.lagSmoothing(0)
81	return () => { gsap.ticker.remove(lenis?.raf) }
82	}, [lenis])
83
84	return (
85	<ReactLenis root options={{ lerp: 0.1, duration: 1.2, smoothWheel: true }}>
86	{children}
87	</ReactLenis>
88	)
89	}
90	// Wrap in layout: <SmoothScroll>{children}</SmoothScroll>
91	```
92
93	## Core Patterns (React)
94
95	Detailed implementations in references:
96	- GSAP + useGSAP: See [references/gsap-react.md](references/gsap-react.md)
97	- Motion (Framer Motion): See [references/motion-patterns.md](references/motion-patterns.md)
98	- Anime.js 4.0: See [references/animejs-react.md](references/animejs-react.md)
99	- Lenis React: See [references/lenis-react.md](references/lenis-react.md)
100	- Geometric Shapes: See [references/geometric-shapes.md](references/geometric-shapes.md) (SVG, Canvas, Zdog, p5.js, Tetris-style)
101	- Audio Reactive: See [references/audio-reactive.md](references/audio-reactive.md) (Tone.js, Web Audio, scroll audio)
102	- Physics 2D: See [references/physics-2d.md](references/physics-2d.md) (Matter.js, collisions, constraints)
103	- Advanced (Three.js, WebGL): See [references/advanced-patterns.md](references/advanced-patterns.md)
104	- Algorithmic & Generative Art: See [r

People who liked this also viewed

6 picks

Type

awwwards-animations

26installs100forks

View on GitHub

How to install awwwards-animations?

hainrixz/editor-pro-max/awwwards-animations

$npx -y skills add Hainrixz/editor-pro-max --skill awwwards-animations

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Awwwards Animations
2
3	Create premium web animations at Awwwards/FWA quality level. React-first approach. 60fps non-negotiable.
4
5	## Decision Matrix
6
7	\| Task \| Library \| Why \|
8	\|------\|---------\|-----\|
9	\| Scroll-driven animations \| GSAP + ScrollTrigger + useGSAP \| Industry standard, best control \|
10	\| Smooth scroll \| Lenis + ReactLenis \| Best performance, works with ScrollTrigger \|
11	\| React-native animations \| Motion (Framer Motion) \| Native React, useScroll/useTransform \|
12	\| Simple/lightweight effects \| Anime.js 4.0 \| Small footprint, clean API \|
13	\| Complex timelines \| GSAP \| Unmatched timeline control \|
14	\| SVG morphing \| GSAP MorphSVG or Anime.js \| Both excellent \|
15	\| 3D + animation \| Three.js + GSAP \| GSAP controls Three.js objects \|
16	\| Page transitions \| AnimatePresence or GSAP \| Motion for React, GSAP for complex \|
17	\| Geometric shapes (vector) \| SVG + GSAP/Motion \| Native, animable \|
18	\| Geometric shapes (canvas) \| Canvas 2D API \| Programmatic, performant \|
19	\| Pseudo-3D shapes \| Zdog \| Flat design 3D, ~2kb \|
20	\| Creative coding/generative \| p5.js \| Rich ecosystem \|
21	\| Audio reactive \| Tone.js \| Web Audio, synths, effects \|
22	\| Physics 2D \| Matter.js \| Gravity, collisions, constraints \|
23	\| Algorithmic/generative art \| Canvas 2D + p5.js \| Math-driven visuals \|
24	\| Fractals/L-systems \| Canvas 2D recursivo \| Recursive rendering \|
25	\| Tessellations/geometric puzzles \| SVG + GSAP \| Precise animated transforms \|
26	\| Kinetic typography advanced \| GSAP SplitText + Canvas \| Per-char control \|
27	\| Glitch effects \| CSS + GSAP \| Layered RGB split, clip-path \|
28	\| Brutalist animation \| CSS raw + Motion \| Hard cuts, no easing \|
29	\| Minimalist animation \| Motion springs \| Subtle, purposeful motion \|
30
31	## Installation (Latest Stable - 2025)
32
33	```bash
34	# GSAP + React hook (v3.14.1)
35	npm install gsap @gsap/react
36
37	# Lenis (v1.3.17) - includes React components
38	npm install lenis
39
40	# Motion (Framer Motion)
41	npm install motion
42
43	# Anime.js (v4.0.0)
44	npm install animejs
45	```
46
47	## React Setup
48
49	### 1. GSAP Configuration (app-wide)
50
51	```tsx
52	// lib/gsap.ts
53	'use client' // Next.js App Router
54
55	import gsap from 'gsap'
56	import { ScrollTrigger } from 'gsap/ScrollTrigger'
57	import { useGSAP } from '@gsap/react'
58
59	// Register plugins once
60	gsap.registerPlugin(ScrollTrigger, useGSAP)
61
62	export { gsap, ScrollTrigger, useGSAP }
63	```
64
65	### 2. Lenis + GSAP ScrollTrigger Integration (Critical)
66
67	```tsx
68	// components/SmoothScroll.tsx
69	'use client'
70	import { ReactLenis, useLenis } from 'lenis/react'
71	import { useEffect } from 'react'
72	import { gsap, ScrollTrigger } from '@/lib/gsap'
73
74	export function SmoothScroll({ children }: { children: React.ReactNode }) {
75	const lenis = useLenis()
76	useEffect(() => {
77	if (!lenis) return
78	lenis.on('scroll', ScrollTrigger.update)
79	gsap.ticker.add((time) => lenis.raf(time * 1000))
80	gsap.ticker.lagSmoothing(0)
81	return () => { gsap.ticker.remove(lenis?.raf) }
82	}, [lenis])
83
84	return (
85	<ReactLenis root options={{ lerp: 0.1, duration: 1.2, smoothWheel: true }}>
86	{children}
87	</ReactLenis>
88	)
89	}
90	// Wrap in layout: <SmoothScroll>{children}</SmoothScroll>
91	```
92
93	## Core Patterns (React)
94
95	Detailed implementations in references:
96	- GSAP + useGSAP: See [references/gsap-react.md](references/gsap-react.md)
97	- Motion (Framer Motion): See [references/motion-patterns.md](references/motion-patterns.md)
98	- Anime.js 4.0: See [references/animejs-react.md](references/animejs-react.md)
99	- Lenis React: See [references/lenis-react.md](references/lenis-react.md)
100	- Geometric Shapes: See [references/geometric-shapes.md](references/geometric-shapes.md) (SVG, Canvas, Zdog, p5.js, Tetris-style)
101	- Audio Reactive: See [references/audio-reactive.md](references/audio-reactive.md) (Tone.js, Web Audio, scroll audio)
102	- Physics 2D: See [references/physics-2d.md](references/physics-2d.md) (Matter.js, collisions, constraints)
103	- Advanced (Three.js, WebGL): See [references/advanced-patterns.md](references/advanced-patterns.md)
104	- Algorithmic & Generative Art: See [r

People who liked this also viewed

6 picks

Type