gsap-timeline
The gsap-timeline skill provides instructions and patterns for sequencing animations using the GSAP library. It covers timeline creation, the position parameter for timing, label management, nesting, and playback control.
Is gsap-timeline safe to install?
Safe to install: our audit of gsap-timeline's source files found 0 shell commands, 0 external URLs, no file writes (none risk). Every command and URL listed appears verbatim in the skill's source. This skill provides documentation and code patterns for GSAP. It does not execute code, access the file system, or perform network requests.
How we audit skills: our security review methodology.
Who is this skill for?
Developers using GSAP for multi-step animations, keyframe sequencing, or complex animation choreography.
What can you do with it?
- Building multi-step animations
- Coordinating tweens in sequence or parallel
- Managing animation keyframes
- Controlling timeline playback and progress
- Nesting timelines for complex animation structures
How good is this skill?
Quality score: 10/10. The skill documentation is clear, follows official GSAP best practices, and provides concise code examples for all described features.
What does the skill file contain?
# GSAP Timeline
## When to Use This Skill
Apply when building multi-step animations, coordinating several tweens in sequence or parallel, or when the user asks about timelines, sequencing, or keyframe-style animation in GSAP.
**Related skills:** For single tweens and eases use **gsap-core**; for scroll-driven timelines use **gsap-scrolltrigger**; for React use **gsap-react**.
## Creating a Timeline
```javascript
const tl = gsap.timeline();
tl.to(".a", { x: 100, duration: 1 })
.to(".b", { y: 50, duration: 0.5 })
.to(".c", { opacity: 0, duration: 0.3 });
```
By default, tweens are **ap...Frequently asked questions
How do I place a tween relative to the end of the previous animation?
Use the position parameter with a relative string such as '+=0.5' to start 0.5 seconds after the previous animation ends.
Can I nest timelines within other timelines?
Yes. You can create a child timeline and add it to a master timeline using the master.add(child, position) method.
How do I ensure all child tweens share the same duration and ease?
Pass a defaults object into the timeline constructor, for example: gsap.timeline({ defaults: { duration: 0.5, ease: 'power2.out' } }).
Where should I place a ScrollTrigger when using a timeline?
Place the ScrollTrigger on the timeline itself or a top-level tween, rather than on individual tweens inside a timeline.
Related skills
frontend-design
618.4KAI agents tasked with designing and building web interfaces who need to produce unique, high-quality visual identities rather than generic, templated designs
The frontend-design skill provides guidance for creating distinctive, intentional visual designs for web interfaces. It instructs the agent to act as a design lead at a small studio, focusing on avoiding templated defaults by making deliberate choices regarding typography, color palettes, layout, and motion. The skill emphasizes a structured process of brainstorming, planning, and self-critique before writing code.
shadcn
217.3KDevelopers building UI components and design systems using shadcn/ui
The shadcn skill manages UI components and design systems for projects using the shadcn/ui framework. It provides tools to search, add, debug, and style components, while enforcing strict composition and styling rules based on project-specific configuration.
remotion-to-hyperframes
157.2KDevelopers migrating existing Remotion video projects to the HyperFrames framework
The remotion-to-hyperframes skill translates Remotion (React) video compositions into HyperFrames (HTML + GSAP) compositions. It uses a linting process to identify incompatible React patterns, maps Remotion APIs to HyperFrames equivalents, generates HTML/CSS/GSAP output, and validates the translation using SSIM-based image comparison against a tiered test corpus.
hyperframes
157.0KDevelopers and content creators who need to automate video production, motion graphics, or code-based video editing using HTML and CLI-based workflows
HyperFrames is an intent-routing skill that manages video, animation, and motion graphic creation by directing requests to specialized workflows. It renders video from HTML compositions where timing is defined by data attributes. The skill acts as a central entry point for authoring, editing, and rendering video projects.