Skill LibraryPrompt Skill1 DesignsTop Views

GSAP Timeline

Official GSAP timeline skill for gsap.timeline(), position parameters, labels, nesting, and playback control.

Skill Uses0

Recorded selections across prompt workflows.

Public Designs1

Ranked by views, then community favorites.

Prompt Lines8

Reusable instruction lines for generation.

Author@Interface Lab

Animation

Skill Directive

Description

Official GSAP timeline skill for gsap.timeline(), position parameters, labels, nesting, and playback control.

TagsAnimation

Skill Prompt

- Use for multi-step sequencing, keyframe-like choreography, and animation order; prefer gsap.timeline() over chaining many tweens with manual delays.
- Use timeline defaults for shared duration/ease/stagger values so individual tweens only express their differences.
- Use the position parameter to control relationships: default appends in order, '<' starts with the previous animation, '>' aligns to the previous end, '+=0.2' adds a gap, and '-=0.1' overlaps.
- Use labels for meaningful timeline moments, then control playback with addLabel, play(label), seek(label), or tweenTo(label).
- Nest timelines for reusable sequences; keep child timelines focused instead of putting all page motion into one unmaintainable master timeline.
- Store interactive timeline instances and control them with pause, resume, reverse, restart, progress, and timeScale.
- Clean up timelines on unmount or condition changes; in React prefer useGSAP scope/context or ctx.revert().
- Source: greensock/gsap-skills official MIT skill material, fixed to commit aed9cfd3277740755f6bfc1155c7aa645403b760.

Public directive summary shown; Pro unlocks the full prompt.

Layout Info

Designs below are ordered by views. Top items use live previews; the rest stay fast thumbnail cards.

Unlock Pro All Skills

GSAP Timeline

More pages using GSAP Timeline