skills.rest
monoes
monoesOFFICIAL
Explore all skills by this author →
Website𝕏@monoes_meGitHub

monomotion

Create live browser animations with GSAP timelines and seekable playback.

15|1|Updated Apr 26, 2026
Search Tags:#timeline#animation#svg#websocket#motion#gsap#scrolltrigger
One-click install
npx skills add https://github.com/monoes/monomind --skill monomotion
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: monomotion
Source: https://github.com/monoes/monomind/tree/main/.claude/skills/monomotion
Command: npx skills add https://github.com/monoes/monomind --skill monomotion

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Monomotion helps you create rich browser animations that stay fully interactive and easy to control, instead of exporting motion as fixed video or hard-coding one-off effects.

Core Features & Use Cases

  • Timeline-driven motion: Build sequences with precise timing, labels, pauses, reversals, and scrubbing.
  • Live playback control: Drive animations through JavaScript, WebSocket, REST, or simple UI controls.
  • Reusable animation patterns: Apply consistent fade, slide, scale, reveal, stagger, scroll, text, and SVG effects across interfaces.
  • Use case: Animate a landing page hero, then connect the same timeline to a dashboard control panel, a scroll-triggered section, or an embedded web component.

Quick Start

Create a GSAP timeline for your interface and wire it to browser controls so the animation can be played, paused, reversed, and seeked live.

Frequently Asked Questions about monomotion

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

FAQPage Schema
How do I build GSAP timeline animations that can be paused and scrubbed live in the browser?▼

Build seekable GSAP timelines with labels, pauses, and staggered effects to create live browser animations. You can wire these timelines to UI controls, JavaScript, WebSocket, REST, or SSE for real-time playback manipulation.

Can I control browser animations through a WebSocket or REST API?▼

Yes, you can control browser animations through WebSocket, REST, or SSE control surfaces. This allows you to drive timeline playback, trigger reversals, and coordinate motion sequences dynamically from external inputs or dashboard panels.

How do I create scroll-triggered SVG motion and text reveals without exporting video?▼

Create scroll-triggered SVG motion and text reveals using timeline-driven motion directly in the browser. This approach keeps animations fully interactive and controllable without relying on fixed video exports or React dependencies.

Does this approach work for animating landing pages and dashboards without using React?▼

Yes, this approach works for animating landing pages and dashboards without any React dependency. You build reusable animation patterns like fades, slides, and scales, then apply them across interfaces using standard browser technologies.

What is the best way to coordinate staggered animation effects across multiple UI components?▼

The best way to coordinate staggered effects is by building a centralized GSAP timeline. This timeline manages precise timing, labels, and sequencing, allowing you to apply consistent motion patterns across multiple UI components simultaneously.

Related Skills

Explore More Design & Creative Skills→
yyykkkunyyykkkun

gsap-timeline

Sequence GSAP timeline animations and manage keyframes for webpages.

Community
Intermediate
BintzGavinBintzGavin
94

example-lottie

Synchronize Lottie animations with the Helios timeline using goToAndStop.

Community
Intermediate
hii-saikrishnahii-saikrishna

gsap-scrolltrigger

Create scroll-triggered animations using GSAP and ScrollTrigger libraries.

Community
Advanced
daffy0208daffy0208
34

animation-designer

Implement motion design improvements for React web applications using Framer Motion, CSS, Tailwind, and GSAP.

Community
Intermediate