# Animations

> Motion — easing and timing rules, Framer Motion, GSAP, scroll-driven experiences, view transitions, reduced motion. Use when something has to move — entrances and exits, micro-interactions, hover states, scroll-driven sequences, parallax, route transitions, shared-element morphs, stagger, marquees, physics-based movement.

- **Type:** Skill
- **Install:** `agentstack add skill-krishna-modi12-frontend-design-pro-animations`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [Krishna-Modi12](https://agentstack.voostack.com/s/krishna-modi12)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [Krishna-Modi12](https://github.com/Krishna-Modi12)
- **Source:** https://github.com/Krishna-Modi12/frontend-design-pro/tree/main/skills/animations
- **Website:** https://krishna-modi12.github.io/frontend-design-pro/

## Install

```sh
agentstack add skill-krishna-modi12-frontend-design-pro-animations
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# Animations

## When to Use
Any motion work: entrance/exit transitions, micro-interactions, hover states, scroll-driven sequences, parallax, page/route transitions, shared-element morphs, stagger, marquees, physics-based movement.

## Stack
React 19 · Framer Motion (component motion) · GSAP + ScrollTrigger (scroll/timeline) · React View Transitions (route) · CSS (simple states)

## Core Rules
1. **Motion is feedback, not decoration.** If removing it doesn't harm understanding, cut it. Name what a transition communicates before adding it — arrival, departure, relationship, state change, progress, consequence.
2. **Pick one motion personality and hold it.** Precise (120–200ms, sharp ease-out) · Calm (300–450ms, gentle ease-in-out) · Playful (250–400ms, spring) · Cinematic (500–800ms, heroes only). Mixed personalities read as incoherent even when nobody can say why.
3. **Easing.** Enter `ease-out` `cubic-bezier(0.23,1,0.32,1)`; `ease-in` only for exits ≤200ms; `ease-in-out` for movement. **Never `ease-in` for entrances.**
4. **Duration.** Button 100–160ms · dropdown 150–250ms · modal 200–500ms · page transition ≤800ms. Never exceed 600ms for standard UI.
5. **Animate `transform` and `opacity` only** — they're compositor-driven. Never `width`, `height`, `top`, `left`. **Never `transition: all`** — list properties explicitly.
6. **Never scale from 0.** Start at `scale(0.95)` minimum; 0 reads as a glitch.
7. **`prefers-reduced-motion` is mandatory** wherever motion exists — `useReducedMotion()`, a `@media` block, or Tailwind's `motion-reduce:`. Reduce to opacity or nothing; never ship motion a user has opted out of.
8. **Animations are interruptible.** New input takes over mid-flight rather than queueing behind the current tween — springs do this naturally.
9. **Don't animate high-frequency actions** (100+ per day: toggles, shortcuts) — delay compounds into annoyance.
10. **One system per element.** Framer for component state, GSAP for scroll timelines. Never both on the same node.
11. **Set an intentional `transform-origin`**; SVG transforms go on a `` with `transform-box: fill-box`.

## Patterns
- **Stagger reveal** — container variants with `staggerChildren`, **80ms** apart per item (40ms per word when splitting text). Canonical config: `references/animation-framework.md`.
- **Shared-element morph** — `layoutId` (Framer) or `` (React VT).
- **Scroll sequence** — GSAP ScrollTrigger with `scrub`, pinned sections, `invalidateOnRefresh`.
- **Magnetic / hover lift** — small transform on pointer proximity, disabled under reduced motion.
- **Skeleton shimmer** — `animate-pulse` on a real loading state, never a fake delay.

## Examples
`examples/good-anim-recipes.tsx` (stagger, counter, magnetic, reduced-motion) · `examples/good-scroll.tsx` (GSAP ScrollTrigger, SplitText, pinning) · `examples/good-view-transitions.tsx` · `examples/good-vt-shared-element.tsx` · `examples/bad-animated.tsx` (anti-example).

## Reference Index
Load only for the specific task:

| Task | Load |
|---|---|
| **Motion direction — what a motion communicates, personality archetypes, choreography, Disney principles, animation smells** | **`references/motion-direction.md`** |
| **How much this page should move at all — the L1/L2/L3 tiers, intent→tier table, per-page ceilings, reveal granularity** | **`references/motion-budget.md`** |
| The tier's own catalogue — every move that belongs at L1, L2 or L3, framework-free | `references/interaction-patterns.md` |
| A forward sweep for motion that is *missing* — the four-stage gate, where to hunt, the mandatory rejected list, the report format | `references/finding-motion.md` |
| Cinematic scroll composites — constellation hero, card collapse, pinned narrative, the one WebGL moment | `references/scroll-story-patterns.md` |
| Timing/easing decisions, which library to reach for | `references/animation-framework.md` |
| 17 copy-paste recipes (stagger, counter, toast, marquee…) | `references/animation-recipes.md` |
| motion.*, AnimatePresence, variants, layoutId, springs | `references/motion.md` |
| Finger-driven motion — springs by feel, velocity handoff, momentum projection, rubber-banding, grab offset, native-feel gesture details | `references/native-motion-physics.md` |
| All 12 GSAP plugins, useGSAP, timelines | `references/gsap.md` |
| Scroll-driven patterns, parallax, pinning | `references/scroll-experience.md` |
| Smooth/momentum scroll — Lenis options, RAF loop, GSAP ticker handoff, reduced-motion gating | `references/lenis-smooth-scroll.md` |
| React View Transition API, CSS recipes, Next.js integration | `references/view-transitions.md` |
| An animation that renders wrong — seekability, font-load measurement, `zoom` vs `scale` text blur, flattened `preserve-3d`, missing glyphs | `references/animation-pitfalls.md` |

## Constraints
`MOTION-01` reduced-motion is functional, not a string mention · `MOTION-02` no bare `ease-in` in entrance context · `PERF-04` no `transition: all` · duration 80–600ms (800ms page transitions) · no infinite animation without user control · transform/opacity only · OKLCH tokens · TypeScript strict.

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [Krishna-Modi12](https://github.com/Krishna-Modi12)
- **Source:** [Krishna-Modi12/frontend-design-pro](https://github.com/Krishna-Modi12/frontend-design-pro)
- **License:** MIT
- **Homepage:** https://krishna-modi12.github.io/frontend-design-pro/

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-krishna-modi12-frontend-design-pro-animations
- Seller: https://agentstack.voostack.com/s/krishna-modi12
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.