# Motion Design

> Premium motion and interaction design skill. Covers Lottie animation integration, GSAP easing vectors, and visual micro-interactions.

- Skill: `goharabbas321/motion-design` (Agent Skill)
- Install (CLI): `npx skillmds@latest add goharabbas321/motion-design`
- Raw SKILL.md: https://api.skillmd.com/api/skills/goharabbas321/motion-design/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Integrations & APIs
- Author: goharabbas321 (https://skillmd.com/u/goharabbas321)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/goharabbas321/motion-design

---


# /motion-design — Premium Motion Design & Micro-Interactions

**Motion-Design** implements premium, Awwwards-quality motion layout systems, fluid CSS transitions, Lottie animation files, and dynamic visual micro-interactions.

---

## 🎨 Motion & Easing Principles

### 1. Easing Vectors & Dynamics
- **Standard Easing**: Standard entry animations must utilize ease-out vectors (`cubic-bezier(0.25, 1, 0.5, 1)`) for premium, organic transitions.
- **GSAP Timelines**: Coordinate complex multi-element entries using choreographed GSAP timelines.
- **Spring Physics**: Enforce spring animations (`stiffness: 100`, `damping: 15`) for tactile hover and tap card transitions.

### 2. Lottie & Vector Integration
- Integrate lightweight `.lottie` or JSON vectors for key interaction checkpoints (e.g., success checkmarks, loading spinners).
- Bind Lottie animations to viewport scroll events using Locomotive Scroll or GSAP ScrollTrigger.