skills.rest
abhinaaaavvv
abhinaaaavvvCOMMUNITY
Explore all skills by this author →
Website𝕏@abhinaaaavvvGitHub

gsap-timeline

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

Updated Mar 12, 2026
Search Tags:#timeline#frontend#javascript#animation#gsap#sequencing#tween
One-click install
npx skills add https://github.com/abhinaaaavvv/dotfiles --skill gsap-timeline-abhinaaaavvv
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gsap-timeline
Source: https://github.com/abhinaaaavvv/dotfiles/tree/main/.agents/skills/gsap-timeline
Command: npx skills add https://github.com/abhinaaaavvv/dotfiles --skill gsap-timeline-abhinaaaavvv

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 the official GSAP patterns for sequencing tweens with gsap.timeline(), so multi-step animations stay readable, controllable, and easy to adjust. ## Core Features & Use Cases - Timeline creation and defaults: Build timelines with shared defaults (duration, ease) inherited by every child tween. - Position parameter and labels: Place tweens at absolute times, relative offsets, or named labels for precise choreography. - Nesting and playback control: Nest child timelines into a master timeline and control playback with play, pause, reverse, seek, and progress. - Use Case: A landing page needs a hero heading to slide in, an image to fade up 0.2s later, and a button to scale in at the same time. Use a timeline with labels and the position parameter instead of stacking setTimeout or delay values. ## Quick Start Ask the AI to create a GSAP timeline that animates three elements in sequence with shared defaults and a label for the outro section.

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, such as "+=0.5" or "<".

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

The position parameter controls where a tween is placed in a timeline. It accepts absolute times like 1, relative offsets like "+=0.5" or "-=0.2", label names, and placement shortcuts like "<" (start with previous) or ">" (after previous ends).

Can I nest GSAP timelines inside other timelines?▼

Yes, timelines can contain other timelines. Add a child timeline to a master timeline with master.add(child, position), letting you build modular animation sections and compose them into one sequence.

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

Use a timeline instead of chaining delays. Timelines with the position parameter and labels are easier to read, adjust, and control, while delay-based chaining becomes fragile as sequences grow.

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

No, ScrollTriggers should only be placed on top-level tweens or timelines, not on tweens nested inside a timeline. Attach the ScrollTrigger to the timeline itself so it scrubs the whole sequence.

Related Skills

Explore More Software Engineering Skills→
AlejandroFiginiAlejandroFigini

gsap-core

Create GSAP tweens and timelines for UI animations across frameworks.

Community
Advanced
calesthiocalesthio
55.1k

gsap-scrolltrigger

Implements scroll-linked animations, pinning, and scrubbing with the GSAP ScrollTrigger plugin.

Community
Intermediate
greensockgreensock
13.3k

gsap-core

Animate JavaScript objects with GSAP core API tweens and easing.

Official
Intermediate
Adham7843Adham7843

animejs

Create timeline-based, staggered, SVG morphing, and keyframe animations with Anime.js.

Community
Advanced