skills.rest
magicpro97
magicpro97COMMUNITY
Explore all skills by this author →
GitHub

gsap-timeline

Create and manipulate GSAP timelines with customizable tweens and callbacks.

8|3|Updated Jun 7, 2026
Search Tags:#timeline#web design#animation#sequence#GSAP
One-click install
npx skills add https://github.com/magicpro97/vibeflow --skill gsap-timeline-magicpro97
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gsap-timeline
Source: https://github.com/magicpro97/vibeflow/tree/main/.agents/skills/gsap-timeline
Command: npx skills add https://github.com/magicpro97/vibeflow --skill gsap-timeline-magicpro97

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires GSAP, and includes scripts (resource) and assets (resource) components.

What problem does it solve?

GSAP Timeline Skill streamlines GSAP timeline management by providing an interface to build complex sequences and keyframes for GSAP animations.

Core Features & Use Cases

  • Sequencing GSAP Animations: Manage complex animations through nested and parallel tweens in timelines.
  • Timeline Playback: Execute animations from the start or specific points within the timeline, reverse animations, or reset progress.
  • Custom Timings and Positioning: Adjust timing, ease, and placement of tweens for precise animation control.
  • Labels for Maintainability: Create readable, maintainable animation sequences with label markers.

Quick Start

Define and play a GSAP timeline using this command: 'create timeline for button animations on the welcome page.'

Frequently Asked Questions about gsap-timeline

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

FAQPage Schema
How do I sequence complex GSAP animations in a web UI?▼

Sequence complex GSAP animations by creating a timeline that manages nested and parallel tweens. This allows precise control over keyframes, custom timings, and ease adjustments for choreographing web UI animation sequences.

What is a GSAP timeline and when do I need it for web design?▼

A GSAP timeline is a mechanism for choreographing multiple tweens into a controllable sequence. You need it for web design when managing complex UI animation sequences that require synchronized playback, reversing, or specific positioning.

Do I need the GSAP library installed to manage animation timelines?▼

Yes, the GSAP library is a required dependency for managing animation timelines. It provides the core tween and timeline functions needed to build sequences, set custom timings, and execute playback control.

Can I control GSAP timeline playback from a specific point or reverse it?▼

Yes, you can control GSAP timeline playback by executing animations from the start or specific points. The timeline also supports reversing animations and resetting progress to manage complex sequence behaviors.

How do I add label markers to a GSAP timeline for maintainability?▼

Add label markers to a GSAP timeline to create readable and maintainable animation sequences. Labels allow you to mark specific positions, making it easier to manage complex nested tweens and adjust custom timings.

Related Skills

Explore More Design & Creative Skills→
LuXDAmoreLuXDAmore

gsap-timeline

Sequence and choreograph GSAP animations with timeline control.

Community
Intermediate
SafiNguyenSafiNguyen

gsap-plugins

Register GSAP plugins and implement complex web animations.

Community
Intermediate
ruskibeatsruskibeats

gpt-taste

Design AIDA-structured frontend pages with Python randomization, GSAP motion, and Tailwind CSS.

Community
Advanced
fanguyunfanguyun

gsap-timeline

Sequence GSAP animations with timing, placement, and nested timelines.

Community
Intermediate