skills.rest
mohamedgshoaib
mohamedgshoaibCOMMUNITY
Explore all skills by this author →
Website𝕏@mohamedgshoaibGitHub

motion-design

Apply motion design principles to create UI animations with CSS, Framer Motion, and GSAP.

5|Updated Jan 20, 2026
Search Tags:#ui#animation#choreography#ux#motion#easing
One-click install
npx skills add https://github.com/mohamedgshoaib/reway --skill motion-design-mohamedgshoaib
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: motion-design
Source: https://github.com/mohamedgshoaib/reway/tree/main/.agents/skills/motion-design
Command: npx skills add https://github.com/mohamedgshoaib/reway --skill motion-design-mohamedgshoaib

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This skill solves the problem of inconsistent, robotic, or distracting UI animations by providing a structured, design-led framework for creating emotionally resonant and technically sound motion.

Core Features & Use Cases

  • Motion Personality Archetypes: Choose between Playful, Premium, Corporate, or Energetic styles to ensure brand consistency.
  • Choreography & Staging: Learn how to coordinate multi-element sequences using the 1/3 rule and stagger budgets.
  • Use Case: When designing a new dashboard, use this skill to define the signature easing and duration palette for all card entrances, modal transitions, and button feedback, ensuring the interface feels polished and responsive.

Quick Start

Apply the motion-design skill to define the animation timing and easing curves for a new card entrance transition using the Corporate archetype.

Frequently Asked Questions about motion-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create UI animations that feel natural instead of robotic?▼

Natural UI animations require applying Disney animation principles adapted for digital products, using structured easing curves, timing, and choreography to evoke emotional resonance instead of mechanical transitions.

What's the best way to coordinate multi-element entrance animations?▼

Coordinate multi-element entrance animations using choreography and staging techniques like the 1/3 rule and stagger budgets to sequence UI components smoothly and maintain visual focus.

Can I use this motion design framework with Framer Motion and GSAP?▼

Yes, this motion design framework supports creating micro-interactions, page transitions, and scroll-triggered effects across various animation systems including CSS, Framer Motion, and GSAP.

How do I maintain brand consistency across UI motion design?▼

Maintain brand consistency by selecting a motion personality archetype—such as Playful, Premium, Corporate, or Energetic—to define a unified signature easing and duration palette for all interface transitions.

When do I need to define a signature easing and duration palette?▼

You need to define a signature easing and duration palette when designing new interfaces like dashboards to ensure all card entrances, modal transitions, and button feedback feel polished, responsive, and technically sound.

Related Skills

Explore More Design & Creative Skills→
ZiadNagarZiadNagar

animation-systems

Define motion tokens, choreography patterns, and reduced-motion support for design systems.

Community
Advanced
Aurora-AIAurora-AI
1

kinetic-physics

Apply the 12 Disney Principles to DOM/CSS transitions with easing curves and springs.

Community
Intermediate
SafiNguyenSafiNguyen

gsap-timeline

Coordinate multi-step animation sequences with GSAP timeline instances and playback controls.

Community
Intermediate
47thtechcorner47thtechcorner
21

gsap-timeline

Orchestrate GSAP animation sequences with tweens, labels, and nested timelines.

Community
Intermediate