# Build accessible GSAP animations

Modern web animations can hurt performance and accessibility when they are implemented without clear guardrails. This skill gives Claude practical GSAP patterns, testing steps, and launch checks for polished animation work.

## Install

```bash
npx skillstore add crazyswami/gsap-animations
```

## Metadata

- Status: approved
- Slug: crazyswami-gsap-animations
- Skillstore revision: r1
- Version status: missing
- Tree hash: c5eb79022d9b6282d765aa9797c90c36a1e9f8bebed6bd72d9c883acc112ca72
- Author: CrazySwami
- GitHub username: CrazySwami
- License: MIT
- Repository: https://github.com/CrazySwami/wordpress-dev-skills/tree/main/skills/gsap-animations
- Ref: 7db9b9f06e0ab79c575b58bc48c4d8dc9849f424
- Supported tools: Claude, Codex, Claude Code
- Audit status: complete
- Agent install advisory: allowed
- Manual install advisory: allowed
- Artifact signature: available
- Audit attestation: unavailable
- Human verification: not\_verified
- Risk factors: external\_commands, network
- Quality score: 77
- Quality tier: bronze
- Public page: https://skillstore.pages.dev/skills/crazyswami-gsap-animations
- Manifest: https://skillstore.pages.dev/api/skills/crazyswami-gsap-animations/manifest

## Capabilities

- Provides GSAP and ScrollTrigger setup examples for HTML and WordPress enqueue workflows.
- Suggests animation patterns for fade-ins, staggered cards, parallax, hero timelines, and text reveals.
- Includes reduced-motion handling and CSS fallback guidance for accessible experiences.
- Explains responsive animation setup with GSAP matchMedia and resize refresh behavior.
- Gives performance guidance focused on transform and opacity animations.
- Includes testing and visual QA steps for screenshots and Playwright checks.

## Use Cases

- Add scroll animations to a marketing page: Use the skill to design fade, stagger, and parallax effects that keep content usable without JavaScript.
- Review animations before launch: Apply the checklist for reduced motion, performance, mobile behavior, and visual QA readiness.
- Integrate GSAP in a WordPress theme: Follow the enqueue examples and dependency structure for GSAP core, ScrollTrigger, and theme animation files.

## Prompt Templates

### Plan a simple fade-in animation

```
Use this skill to add a simple GSAP fade-in animation for my section. Respect reduced motion and keep the content visible without JavaScript.
```

### Create responsive ScrollTrigger effects

```
Use this skill to create ScrollTrigger animations with different desktop and mobile behavior. Include cleanup and refresh handling.
```

### Audit animation performance

```
Use this skill to review my GSAP animation code for layout thrashing, excessive triggers, missing cleanup, and reduced-motion issues.
```

### Prepare animations for visual QA

```
Use this skill to make my animations reliable for Playwright screenshots and visual QA across viewport sizes.
```

## Limitations

- It is a guidance-only skill and does not include executable automation scripts.
- It assumes the project can use GSAP and selected plugins under their licenses.
- It does not replace browser profiling on target devices.
- It focuses on front-end animation patterns, not full WordPress theme architecture.

## Best Practices

- Start with accessible static content, then add animations as progressive enhancement.
- Animate transform and opacity before considering any layout-changing property.
- Test reduced motion, mobile devices, resize behavior, and visual QA snapshots before launch.

## Anti Patterns

- Do not hide essential content until JavaScript or animation libraries load.
- Do not leave ScrollTrigger markers enabled in production.
- Do not rely on desktop DevTools alone for performance validation.

## Security Audit

- Audited at: 2026-07-09T01:06:45.964\+00:00
- Summary: All static findings were assessed as false positives in documentation examples and checklists. The skill contains GSAP setup guidance, code snippets, and reference links, with no evidence of command execution, data exfiltration, prompt injection, or screenshot upload behavior.

## Stats

- Views: 326
- Downloads: 7
- Favorites: 0
- Popularity score: 0