# Awwwards-level React animations (/web--awwwards-animations)

/web--awwwards-animations is a Claude Code skill in the Web & Design section. Picks the right tool (GSAP, Motion, Anime.js or Lenis) and builds smooth, accessible React animations: scroll effects, magnetic hovers and reveals.

- Web version: https://skills.sgomez.dev/en/s/web--awwwards-animations
- Section: [Web & Design](https://skills.sgomez.dev/en/web.md)
- Author: Santiago Gómez de la Torre
- License: MIT
- Source: https://github.com/sgomez-dev/claude-skills/blob/main/skills/web/awwwards-animations.md
- Updated 28 Mar 2026

## Use it when

- You want scroll-driven animations or complex sequences in React
- You need to choose between GSAP, Motion, Anime.js and Lenis
- You are after effects like magnetic cursors or text and image reveals

## Not for

- Projects that do not use React
- Replacing a full accessibility review of your site

## What you get

React code with the animations implemented, following the skill's performance and reduced-motion rules.

## How to ask for it

- `/web--awwwards-animations add Awwwards-style smooth scroll with Lenis`
- `/web--awwwards-animations create a button with a magnetic hover effect`
- `/web--awwwards-animations animate sections on scroll with GSAP ScrollTrigger`

## Install

macOS · Linux:

```
curl -fsSL https://raw.githubusercontent.com/sgomez-dev/claude-skills/main/install.sh | bash
```

Windows:

```
irm https://raw.githubusercontent.com/sgomez-dev/claude-skills/main/install.ps1 | iex
```

Claude Code plugin:

```
/plugin marketplace add sgomez-dev/claude-skills
/plugin install web-skills@claude-skills-collection
```

## Permissions

- Reads: `**/*`
- Writes: `**/*`
- Runs: `npm install`, `pnpm add`
- Network: No
- Destructive: No

## Author's description

Awwwards-level React animations — GSAP, Motion, Anime.js, Lenis smooth scroll, ScrollTrigger, magnetic effects

## Questions about this skill

### Which library does it use for what?

GSAP with ScrollTrigger for scroll and timelines, Motion for component mount and unmount, Lenis for smooth scrolling and Anime.js for lightweight DOM animation.

### Does it respect users who disable motion?

Yes. It includes patterns for honoring prefers-reduced-motion and says not to hide essential content behind reveals that depend only on animation.

### Does it work without React?

It is written for React, with examples such as useGSAP and ReactLenis. Outside React you would have to adapt the patterns yourself.


- [How we review this](https://skills.sgomez.dev/en/methodology.md)