How do I install the Motion Design skill?

Run npx skillmds@latest add goharabbas321/motion-design in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Motion Design safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Motion Design?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Motion Design free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Motion Design?

goharabbas321 (@goharabbas321) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Motion Design

Name: Motion Design
Author: goharabbas321

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

goharabbas321 eeeccac 1.1 KB Updated Sep 17, 2026

Integrations & APIs

Install

Press C to copy

$ npx skillmds@latest add goharabbas321/motion-design

Installs into ~/.claude/skills (or .claude/skills inside a project). Restart Claude Code to pick it up.

Download SKILL.md

＋ Add to collection

README badge

[![SkillMD](https://skillmd.com/badge/goharabbas321/motion-design.svg)](https://skillmd.com/skills/goharabbas321/motion-design)

Trust & safety

Audits pending

Not yet audited · commit eeeccac

Works with: Claude Code Claude.ai OpenAI Codex +

File contents

/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.

goharabbas321/zeoel-framework/tree/main/.agents/skills/zeoel/skills/motion-design commit eeeccac775

Frequently asked questions

npx skillmds@latest add goharabbas321/motion-design