skills.rest
josippapez
josippapezCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

gsap-timeline

Sequences GSAP tweens into timelines using position parameters, labels, and nesting.

Updated May 5, 2026
Search Tags:#timeline#frontend#javascript#animation#gsap#sequencing#tweens
One-click install
npx skills add https://github.com/josippapez/ai-setup --skill gsap-timeline-josippapez
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gsap-timeline
Source: https://github.com/josippapez/ai-setup/tree/main/claude/plugins/better-design/skills/gsap-timeline
Command: npx skills add https://github.com/josippapez/ai-setup --skill gsap-timeline-josippapez

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires gsap.

What problem does it solve? Coordinating multiple animations with chained delays is fragile and hard to maintain. This Skill provides guidance for building GSAP timelines that sequence, overlap, and control tweens deterministically. ## Core Features & Use Cases - Timeline Creation & Defaults: Build timelines with gsap.timeline() and shared defaults for duration and easing across child tweens. - Position Parameter & Labels: Place tweens at absolute times, relative offsets, or named labels for readable sequencing. - Nesting & Playback Control: Nest child timelines into master timelines and control playback with play, reverse, seek, and progress methods. - Use Case: Choreograph a landing page intro where a logo fades in, a headline slides up 0.2s later, and a call-to-action button scales in at the same time as the headline. ## Quick Start Ask the AI to create a GSAP timeline that fades in a header, then slides in a subtitle 0.3 seconds later, with both tweens sharing a power2.out ease.

Frequently Asked Questions about gsap-timeline

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

FAQPage Schema
How do I sequence multiple GSAP animations in order?▼

Create a timeline with gsap.timeline() and chain .to() calls; tweens run one after another by default. Use the position parameter as the third argument to overlap or offset tweens precisely.

What is the GSAP position parameter and how does it work?▼

The position parameter is the third argument of timeline methods controlling when a tween starts. It accepts absolute times, relative offsets like "+=0.5", labels, and "<" or ">" to align with the previous tween's start or end.

Can I nest GSAP timelines inside other timelines?▼

Yes, timelines can contain other timelines using master.add(child, position). This lets you build modular animation sequences and compose them into a single master timeline.

Should I use delay or a timeline for multi-step GSAP animations?▼

Use a timeline instead of chaining delays. Timelines with the position parameter give precise, maintainable sequencing, while chained delays break easily when durations change.

Can I put ScrollTrigger on tweens inside a GSAP timeline?▼

No, ScrollTriggers should only be placed on top-level tweens or timelines. Nesting ScrollTriggers inside timeline children causes conflicting scroll and timeline control.

Related Skills

Explore More Software Engineering Skills→
AlejandroFiginiAlejandroFigini

gsap-core

Create GSAP tweens and timelines for UI animations across frameworks.

Community
Advanced
brunoolfbrunoolf

gsap-timeline

Sequences and choreographs GSAP animations using timelines, labels, and the position parameter.

Community
Intermediate
magicpro97magicpro97
8

gsap-react

Implement GSAP animations in React components with the useGSAP hook.

Community
Advanced
HoussamMrabetHoussamMrabet

gsap-timeline

Sequences and choreographs GSAP animations using timelines, labels, and the position parameter.

Community
Intermediate