motion-choreography

Build coordinated GSAP motion sequences with timelines, scroll triggers, and spring easing.

2|Updated Apr 23, 2026
One-click install
npx skills add https://github.com/gajjalaashok75-UI/GakrCLI --skill motion-choreography-gajjalaashok75-ui
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: motion-choreography
Source: https://github.com/gajjalaashok75-UI/GakrCLI/tree/main/assets/skills/design-skills/motion-choreography
Command: npx skills add https://github.com/gajjalaashok75-UI/GakrCLI --skill motion-choreography-gajjalaashok75-ui

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you design complex, multi-step animation sequences that feel cohesive instead of fragmented, making it easier to coordinate several moving elements with deliberate timing and visual flow.

Core Features & Use Cases

  • GSAP Timeline Orchestration: Build sequenced animations with labels, nested timelines, and relative offsets for reliable control.
  • Scroll-Linked Storytelling: Create pinned, scrubbed experiences that reveal content chapter by chapter as the user scrolls.
  • Physics-Inspired Motion: Add spring-like entrances and natural-feeling transitions for hero sections, feature reveals, and layered UI motion.
  • Use Case: A landing page can animate the hero background, headline, call to action, and feature cards in a single coordinated sequence that stays synchronized on scroll and resize.

Quick Start

Ask for a GSAP timeline plan that choreographs a hero reveal and scroll-linked section transitions with spring-eased entrances.

Frequently Asked Questions about motion-choreography

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

FAQPage Schema
How do I choreograph multi-element GSAP timeline animations for a hero reveal?

Choreograph multi-element GSAP timeline animations by building sequenced reveals with labels, nested timelines, and relative offsets to coordinate moving elements with deliberate timing and visual flow.

How does scroll-linked storytelling work with GSAP ScrollTrigger?

Scroll-linked storytelling with GSAP ScrollTrigger creates pinned, scrubbed experiences that reveal content chapter by chapter as the user scrolls, maintaining synchronized visual flow on resize.

Can I use spring-like easing for physics-inspired motion in layered UI transitions?

Yes, you can apply spring-like easing to build physics-inspired motion that adds natural-feeling entrances and transitions for hero sections, feature reveals, and layered UI motion.

What is the best way to manage precise timing control for nested animation phases?

The best way to manage precise timing control is using reusable sub-timelines with relative offsets and labels, ensuring reliable control over complex nested animation phases and coordinated sequences.

Does GSAP choreography support refresh-safe sequencing for responsive layouts?

Yes, GSAP choreography supports refresh-safe sequencing for responsive layouts, ensuring your coordinated motion sequences stay synchronized and maintain visual flow during scroll and resize events.

Why do my coordinated motion sequences feel fragmented instead of cohesive?

Coordinated motion sequences feel fragmented without deliberate timing control, but using GSAP timelines with relative offsets and nested sub-timelines orchestrates cohesive, synchronized multi-step animations.