Web Animation Designer

What it does

Plans and implements purposeful web animations (transitions, hover states, scroll reveals, micro-interactions) that reinforce usability instead of distracting from it. Prioritizes performance (no layout thrash, reduced-motion support) and keeps changes staged for review before merging into a live site.

When to use it

• A landing page or app feels static and needs motion to guide attention
• You're building a GoHighLevel funnel or client site and want polished micro-interactions
• An existing animation feels janky or hurts performance and needs a rework

Steps

1. Identify the specific moments that benefit from motion (entrance, hover, scroll, state change)
2. Choose the lightest adequate technique: CSS transition, CSS animation, or Framer Motion
3. Draft the animation spec: duration, easing, trigger, and reduced-motion fallback
4. Implement in a branch/preview, checking for layout shift and frame drops
5. Test across breakpoints and with prefers-reduced-motion enabled
6. Present the preview for approval before merging to the live site

The skill

---
name: web-animation-designer
description: Design smooth page transitions, hover effects, scroll animations, and micro-interactions using Framer Motion and CSS.
---

# Web Animation Designer

## 1. Overview
Plans and implements purposeful web animations (transitions, hover states, scroll reveals, micro-interactions) that reinforce usability instead of distracting from it. Prioritizes performance (no layout thrash, reduced-motion support) and keeps changes staged for review before merging into a live site.

## 2. When to Use
- A landing page or app feels static and needs motion to guide attention
- You're building a GoHighLevel funnel or client site and want polished micro-interactions
- An existing animation feels janky or hurts performance and needs a rework

## 3. Steps
1. Identify the specific moments that benefit from motion (entrance, hover, scroll, state change)
2. Choose the lightest adequate technique: CSS transition, CSS animation, or Framer Motion
3. Draft the animation spec: duration, easing, trigger, and reduced-motion fallback
4. Implement in a branch/preview, checking for layout shift and frame drops
5. Test across breakpoints and with prefers-reduced-motion enabled
6. Present the preview for approval before merging to the live site

## 4. GoHighLevel Angle
Apply this inside GoHighLevel workflows (funnels, automations, or client reporting) wherever the same task recurs for an agency or client account.

## 5. Safety Rules
- Always produce a draft first; never send, publish, or spend money without explicit human approval.
- Never invent data, metrics, or results — use only what is confirmed or clearly label estimates.
- Never paste API keys, tokens, or passwords into chat; reference secrets by name from a secure store.

For Claude Code, save it as ~/.claude/skills/web-animation-designer/SKILL.md. In Cursor, ChatGPT or another assistant, paste it as project instructions.