skills.rest
DanielV-94
DanielV-94COMMUNITY
Explore all skills by this author →
GitHub

gsap-timeline

Sequence GSAP tweens with timelines, position parameters, and labels.

Updated Apr 13, 2026
Search Tags:#timeline#frontend#animation#gsap#scrolltrigger#sequencing#tween
One-click install
npx skills add https://github.com/DanielV-94/rg-medium --skill gsap-timeline-danielv-94
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gsap-timeline
Source: https://github.com/DanielV-94/rg-medium/tree/main/.agents/skills/gsap-timeline
Command: npx skills add https://github.com/DanielV-94/rg-medium --skill gsap-timeline-danielv-94

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill removes the complexity of coordinating multiple animations by providing clear guidance on using GSAP timelines to sequence, overlap, and control groups of tweens so animations play reliably and remain maintainable.

Core Features & Use Cases

  • Timeline sequencing: Append and position tweens precisely so multi-step animations play in order or in parallel as intended.
  • Position parameter & labels: Use absolute, relative, and label-based placement to choreograph timing without brittle delays.
  • Nesting & defaults: Compose nested timelines, inherit shared defaults, and keep reusable animation blocks clean.
  • Playback control: Programmatically play, pause, reverse, seek, or restart complex animation flows.
  • Use Case: Build a hero section entrance sequence, animate a multi-part component interaction, or orchestrate launch/exit sequences across a page.

Quick Start

Create a gsap.timeline(), add your tweens with the position parameter or labels, then call play() to run the composed animation from a specific label or time.

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 to play in order?▼

GSAP timeline sequencing appends and positions tweens precisely so multi-step animations play in order or in parallel. You create a gsap.timeline(), add your tweens using the position parameter or labels, then call play() to run the composed animation.

What is the best way to choreograph web UI entrance and exit sequences without brittle delays?▼

Choreograph web UI sequences using GSAP timeline labels and the position parameter for absolute or relative placement. This positioning method coordinates multiple tweens reliably, removing the complexity and brittleness associated with standard delays.

Can I control playback to pause, reverse, or restart a complex GSAP animation flow?▼

GSAP timeline playback control allows you to programmatically play, pause, reverse, seek, or restart complex animation flows. You can run the composed animation from a specific label or time to manage multi-step component transitions dynamically.

How does ScrollTrigger integration work with GSAP timelines for scroll-driven playback?▼

ScrollTrigger integration enables scroll-driven playback by linking GSAP timeline progress to scroll position. This allows complex multi-step component transitions and launch or exit sequences to animate precisely as users scroll through a web page.

Do I need to know GSAP timeline methods to compose nested timelines and shared defaults?▼

Composing nested timelines and inheriting shared defaults requires knowledge of GSAP timeline methods, the position parameter, and labels. This prerequisite understanding keeps reusable animation blocks clean and ensures multi-step animations remain maintainable.

Related Skills

Explore More Design & Creative Skills→
LuXDAmoreLuXDAmore

gsap-timeline

Sequence and choreograph GSAP animations with timeline control.

Community
Intermediate
SafiNguyenSafiNguyen

gsap-timeline

Coordinate multi-step animation sequences with GSAP timeline instances and playback controls.

Community
Intermediate
MicrockMicrock

gsap-scrolltrigger

Implement scroll-driven animations with GSAP ScrollTrigger for pinning and scrubbing.

Community
Intermediate
yyykkkunyyykkkun

gsap-timeline

Sequence GSAP timeline animations and manage keyframes for webpages.

Community
Intermediate