What is the awwwards-animations skill?
The awwwards-animations skill is a React-first SKILL.md for building premium web animation. It maps each task to a library, GSAP with useGSAP, Motion, Anime.js or Lenis, and supplies copy-ready patterns for scroll, parallax, cursors, reveals and text effects, with reference files for deeper topics.
Its SKILL.md opens with a decision matrix. Each row pairs a task with a library and a reason, such as GSAP with ScrollTrigger for scroll-driven work and Lenis for smooth scroll that cooperates with it.
The skill sits at the root of its repository, next to a references folder. It describes itself as React-first, with proper hooks and cleanup, and treats 60fps as non-negotiable.
What changes in your agent's output
- The agent chooses a library per task from the decision matrix instead of defaulting to one tool for everything.
- GSAP code uses the useGSAP hook with a scope, and plugins are registered once in a shared module.
- Lenis is wired to ScrollTrigger so smooth scroll and scroll-linked animation stay in sync.
- Effects arrive as complete React components with cleanup, ready to paste and adapt.
What the skill covers
- Core libraries: GSAP, Motion (Framer Motion), Anime.js 4.0 and Lenis.
- Quick patterns: magnetic cursor, magnetic button, parallax hero, text character reveal, image reveal and glitch text.
- Creative coding: fractals, L-systems, flow fields, geometric dissections and tessellations on canvas or SVG.
- Extras: Three.js with GSAP, Matter.js physics, Tone.js audio-reactive effects and brutalist or minimalist motion styles.
Who the awwwards-animations skill is for
Best for
- React and Next.js developers building portfolio, agency or campaign pages with scroll storytelling.
- Anyone who wants a consistent GSAP and Lenis setup. Pair it with gsap-frameworks when working across frameworks.
- Teams that review motion afterward with review-animations.
Not for
- Non-React stacks. The examples are TSX components and hooks, and the skill calls itself React-first.
- Picking what to animate in the first place. For that, see find-animation-opportunities.
- A finished template. It supplies patterns to copy, not a ready site.
Use it with UiChemy
These patterns are React components, and WordPress does not run them directly. UiChemy Composer is an AI visual editor that writes real HTML, CSS and JS inside Elementor or Gutenberg, where you can port an effect by hand. Click Get Started on uichemy.com.
How to install Awwwards Animations Skill: GSAP, Motion and Lenis for React
git clone https://github.com/DevMartinese/awwwards-animations-skill.git awwwards-animationsClone into a named folder
Run the clone command above. The repository root holds SKILL.md and a references folder, so the clone itself is the skill folder, named awwwards-animations.
Place it where skills load
The README shows copying the folder to
.claude/skills/for a project, or to~/.claude/.agents/skills/for a global install.Install the animation libraries
In your React project run
npm install gsap @gsap/react lenis motion animejs. For physics and audio patterns, the README adds matter-js and tone.Ask for an effect
Try a prompt from the README, such as a hero section with parallax and smooth scroll, or a magnetic cursor with blend mode difference.
Check that it loaded
Ask for a hero section with parallax and smooth scroll. The result should use useGSAP with a scope and connect Lenis to ScrollTrigger as the skill describes.
Key features
- Library decision matrixA table maps tasks to tools, for example complex timelines to GSAP, React-native animation to Motion, lightweight effects to Anime.js and smooth scroll to Lenis.
- GSAP setup with useGSAPA shared module registers ScrollTrigger and useGSAP once, then re-exports them for use across the app, with a use client note for the Next.js App Router.
- Lenis and ScrollTrigger syncThe setup calls ScrollTrigger.update on Lenis scroll events, feeds Lenis from the GSAP ticker and turns lag smoothing off. ReactLenis options include a lerp of 0.1 and a duration of 1.2.
- Scroll patternsA parallax hero moves a background and fades the title with scrubbed ScrollTrigger tweens, and an image reveal animates a clip-path while the picture scales down.
- Motion patternsA magnetic button follows the pointer with a spring (stiffness 150, damping 15), and a character-by-character text reveal uses staggered variants triggered in view.
- Magnetic cursorA custom cursor eases toward the pointer inside the GSAP ticker, with mix-blend-mode difference so it stays visible on any background.
- Text effectsReference material covers glitch, kinetic typography, morphing, explosion, circular text and scramble effects, and the glitch pattern layers colored copies of the text.
- Generative and geometric artFractal trees, L-systems, flow fields, strange attractors, sacred geometry, tessellations and geometric dissections come with canvas and SVG approaches.
- Physics, audio and 3DReference files cover Matter.js physics, Tone.js and Web Audio reactions, and Three.js or WebGL work driven by GSAP.
- Design philosophy and performanceReferences describe brutalist and minimalist animation styles and how to mix them, plus a performance file for keeping frame rates high.
Frequently asked questions
What is the awwwards-animations skill?
It is a React-first SKILL.md for building Awwwards and FWA style web animation. It covers GSAP with useGSAP, Motion, Anime.js and Lenis, with a decision matrix, quick patterns, setup code and reference files for text effects, physics, audio, generative art and performance.
How do I install the awwwards-animations skill?
Clone the repository into a folder named awwwards-animations, then copy it to .claude/skills/ for one project or ~/.claude/.agents/skills/ for all projects, as the README shows. Install the npm packages in your app separately, since the skill is guidance and not a package.
Which libraries does the skill use?
GSAP with the useGSAP hook and ScrollTrigger, Lenis for smooth scroll, Motion (Framer Motion), and Anime.js 4.0. Optional references add Matter.js for physics, Tone.js for audio, Three.js for 3D, p5.js and Zdog for creative coding, according to the SKILL.md decision matrix.
Which AI coding agents can use the awwwards-animations skill?
The README describes it as a Claude Code skill and shows Claude Code folder paths. The SKILL.md format is plain markdown with frontmatter, but the repository does not list other supported agents, so check your agent's skill loading before relying on it.
Does it work outside React?
The skill states a React-first approach and its patterns are TSX components with hooks and cleanup. The underlying libraries also run elsewhere, but you would need to translate the examples yourself. For vocabulary to describe motion in any stack, see animation-vocabulary.
Do I need all the animation libraries?
No. The README's project setup installs gsap, @gsap/react, lenis, motion and animejs as the core set, and treats matter-js and tone as optional. Install only what the effects you ask for use, and let the decision matrix steer the agent.
Does the skill guarantee 60fps?
The skill sets 60fps as a goal and includes a performance reference. It cannot guarantee frame rates on your own page, because heavy images, many scroll triggers and slow devices all matter. Measure real pages, and compare with motion design patterns for restraint.
What license does the awwwards-animations skill use?
GitHub shows no license field for the repository, but the README ends with an MIT License line. Because the two sources disagree, check the repository for a license file before you redistribute the skill in a product.