skills.rest
HoussamMrabet
HoussamMrabetCOMMUNITY
Explore all skills by this author →
Website𝕏@MrabetHoussamGitHub

gsap-timeline

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

Updated Aug 9, 2026
Search Tags:#timeline#javascript#animation#gsap#sequencing#tween#position parameter
One-click install
npx skills add https://github.com/HoussamMrabet/ultimate-TicTacToe --skill gsap-timeline-houssammrabet
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gsap-timeline
Source: https://github.com/HoussamMrabet/ultimate-TicTacToe/tree/main/skills/gsap/gsap-timeline
Command: npx skills add https://github.com/HoussamMrabet/ultimate-TicTacToe --skill gsap-timeline-houssammrabet

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires gsap.

What problem does it solve? Coordinating multiple animations with chained delays becomes fragile and hard to maintain. This Skill provides the official GSAP approach to sequencing tweens with timelines, so multi-step animations stay readable, controllable, and easy to adjust. ## Core Features & Use Cases - Timeline Sequencing: Create timelines with gsap.timeline() and place tweens precisely using the position parameter (absolute times, relative offsets, labels, and "<"/">" placement). - Labels, Defaults, and Nesting: Use addLabel() for readable sequencing, pass defaults so child tweens inherit duration and ease, and nest timelines inside master timelines. - Playback Control: Play, pause, reverse, restart, seek with time() or progress(), and run timeline-level callbacks like onComplete. - Use Case: When building a landing page intro where a logo fades in, a headline slides up, and a button scales in with overlap, use this Skill to choreograph all three tweens on one timeline with labels instead of guessing delay values. ## Quick Start Ask the AI to build a GSAP timeline that fades in a header, slides up a subtitle 0.2 seconds before the header finishes, and then reveals a call-to-action button using labels and the position parameter.

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 are appended one after another by default. Use the position parameter as the third argument to place tweens at absolute times, relative offsets like "+=0.5", or labels.

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

The position parameter controls where a tween is placed on a timeline. It accepts absolute times (1), relative offsets ("+=0.5", "-=0.2"), labels ("intro"), and placement shortcuts like "<" to start with the previous tween or ">" to start after it.

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

Use a timeline instead of chaining delays. Timelines with the position parameter keep sequencing explicit and maintainable, while delay-based chaining breaks easily when durations change.

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), which lets you group related animations and reuse them as modular sequences.

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.

How do I control GSAP timeline playback like seeking or reversing?▼

Use tl.play(), tl.pause(), tl.reverse(), and tl.restart() for playback. Seek to a point with tl.time(2) for seconds or tl.progress(0.5) for a percentage, and use tl.tweenFromTo('intro', 'outro') to animate between labels.

Related Skills

Explore More Software Engineering Skills→
AlejandroFiginiAlejandroFigini

gsap-core

Create GSAP tweens and timelines for UI animations across frameworks.

Community
Advanced
Hendo10XHendo10X

gsap

Create GSAP animations with timelines, ScrollTrigger, and React integration.

Community
Advanced
DanielV-94DanielV-94

gsap-timeline

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

Community
Intermediate
Adham7843Adham7843

animejs

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

Community
Advanced