skills.rest
TheGoat395
TheGoat395COMMUNITY
Explore all skills by this author →
GitHub

motion-language-director

Guides website motion design with rules, timing, easing, and tool selection for front-end developers and designers.

117|46|Updated Jun 21, 2026
Search Tags:#ScrollTrigger#GSAP#animation design#website motion#React motion
One-click install
npx skills add https://github.com/TheGoat395/Codex-Skills --skill motion-language-director
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: motion-language-director
Source: https://github.com/TheGoat395/Codex-Skills/tree/main/skills/motion-language-director
Command: npx skills add https://github.com/TheGoat395/Codex-Skills --skill motion-language-director

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill helps you define and implement motion direction for websites, ensuring animations are choreographed, purposeful, and appropriate for the brand.

Core Features & Use Cases

  • Define Motion Direction: Establishes rules for website motion before implementation.
  • Use Cases: Ideal for cinematic websites, motion design for React, GSAP/ScrollTrigger, luxury pacing, and sites requiring intentional animations.
  • Implementation Guide: Provides a detailed guide to plan and execute motion design, including a decision tree for choosing the right tools and libraries.

Quick Start

Run the skill to get a comprehensive guide on planning motion design for your website.

Frequently Asked Questions about motion-language-director

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

FAQPage Schema
How do I plan website motion design before implementation?▼

Plan website motion design by establishing rules, defining timing and easing, and choosing appropriate tools. This ensures animations are choreographed and purposeful before coding.

What is the best way to choose between GSAP and Motion for React animations?▼

Choose between GSAP and Motion for React animations by using a decision tree evaluating your website motion needs. This guides library selection based on project requirements.

Does this guide help with ScrollTrigger and GSAP implementation?▼

Yes, it helps with ScrollTrigger and GSAP implementation by providing a comprehensive guide tailored for front-end developers aiming to create intentional, high-quality motion experiences.

How do I define motion direction for a cinematic website?▼

Define motion direction for a cinematic website by establishing rules for luxury pacing and choreographed animations. This ensures the motion design remains purposeful and appropriate for the brand.

Can I use this for luxury pacing and intentional website animations?▼

Yes, you can use this for luxury pacing and intentional website animations. It is ideal for cinematic websites and sites requiring high-quality, choreographed motion design tailored to the brand.

Related Skills

Explore More Design & Creative Skills→
truchottruchot
2

direction-artistique

Define visual identity, brand language, and governance for projects.

Community
Advanced
VXerysVXerys

migrate-scroll-to-gsap

Convert scroll-driven animations from Framer Motion to GSAP ScrollTrigger in React/Next.js components.

Community
Intermediate
MengToMengTo
4.5k

cinematic-scroll-storytelling

Coordinate Lenis smooth scrolling with GSAP ScrollTrigger for scroll-driven landing page animations.

Community
Advanced
anis-marrouchianis-marrouchi

motion-animation

Integrate Framer Motion with Remotion for frame-synced animations.

Community
Intermediate