83.3K+Télécharger
Aller au guide d’utilisation
gsap-timelinepar GreenSock

GSAP Timeline Skill.

Un skill Claude Code et Codex pour le mouvement et la vidéo : timelines gSAP : paramètre de position, imbrication et contrôle de lecture.

  • Mouvement et vidéo
  • Code UI
Télécharger OpenDesignVoir le guide d'utilisation
greensock/gsap-skills · skills/gsap-timeline/SKILL.mdSKILL.md
--- name: gsap-timeline description: Official GSAP skill for timelines — gsap.timeline(), position parameter, nesting, playback. Use when sequencing animations, choreographing keyframes, or when the user asks about animation sequencing, timelines, or animation order (in GSAP or when recommending a library that supports timelines). --- ## When to Use This Skill ## Creating a Timeline ## Position Parameter ## Timeline Defaults ## Timeline Options (constructor) ## Labels
En-tête et titres de section lus depuis le fichier source le 2026-09-14 · 4 338 caractères au total

01 Ce qu'il fait

Ce que fait le skill gsap-timeline dans Claude Code et Codex

Résumé, workflow et sorties, tous lus dans le SKILL.md du skill.

D'après le SKILL.mdLu le 14-09-2026 · pas une exécution enregistrée

Dans les termes du Skill

Un skill officiel GSAP pour séquencer des animations avec gsap.timeline(). Il couvre la création d'une timeline et l'enchaînement de tweens qui s'ajoutent par défaut, puis leur repositionnement avec le paramètre position — secondes absolues, décalages relatifs "+=0.5"/"-=0.2", labels, et placement "<"/">".

Il documente les options du constructeur de timeline (paused, repeat, yoyo, onComplete/onStart/onUpdate, defaults), l'étiquetage avec addLabel() et la navigation avec play()/tweenFromTo(), l'imbrication de timelines enfants dans une timeline principale, et les méthodes de lecture incluant restart, time, progress et kill. Il se termine par les bonnes pratiques GSAP et les pièges à éviter, notamment le chaînage avec delay et le fait de placer ScrollTrigger sur des tweens à l'intérieur d'une timeline.

Ce qu'il produit

  • Un objet timeline stocké dans une variable, le tl dans chaque exemple, auquel les tweens chaînés sont ajoutés et sur lequel agissent les méthodes de lecture.
  • Un nouveau Tween renvoyé par tweenFromTo qui anime la tête de lecture entre deux labels pendant que la timeline est en pause, sans ease.
  • Une timeline détruite : appeler kill() supprime la timeline et, par défaut, ses enfants également.
Voir l'exemple de prompt ↗

Fonctionnement

  1. 01
    Créer une Timeline et Enchaîner des Tweens

    Appelez gsap.timeline() et enchaînez les appels .to(). Sans position fournie, chaque tween est ajouté après la fin du précédent, donc l'ordre est celui de l'écriture.

  2. 02
    Placer Chaque Tween dans le Temps

    Le placement est défini par le troisième argument ou une propriété position dans vars : secondes absolues, décalages relatifs, noms de labels, ou < et > par rapport à l'animation la plus récemment ajoutée.

  3. 03
    Donner à la Timeline des Valeurs par Défaut Partagées

    Les valeurs par défaut passées au constructeur de la timeline sont fusionnées dans chaque tween enfant, ainsi duration et ease sont déclarées une seule fois pour toute la séquence.

  4. 04
    Étiqueter les moments clés

    addLabel() marque un point nommé dans la timeline, et cette étiquette peut ensuite servir de cible de position pour des tweens ultérieurs au lieu d’un nombre brut.

  5. 05
    Imbriquer des timelines dans une timeline maîtresse

    Une timeline maîtresse peut prendre une timeline enfant comme unité et la placer à un instant donné, après quoi d’autres tweens sont ajoutés relativement à elle.

  6. 06
    Piloter toute la séquence d’un seul coup

    Une fois construite, la timeline est jouée et mise en pause comme une seule unité plutôt que tween par tween.

02 Trouvez celui qui vous convient

Quand Utiliser le Skill gsap-timeline

Utilisez le skill gsap-timeline dans Claude Code ou Codex lorsque le travail concerne le motion et la vidéo de ce type. L'adéquation et les limites ci-dessous sont tirées du propre fichier du skill.

Bon choix

  • Construction d’une animation multi-étapes où plusieurs tweens doivent s’exécuter en séquence ou en parallèle.
  • Quand l’utilisateur pose une question sur les timelines, l’enchaînement ou l’animation de type keyframe dans GSAP.
  • Timelines pilotées par le scroll, que le fichier associe au skill scroll-trigger.

Connaître les limites

  • Un tween unique ou un ease isolé sont hors périmètre ; le fichier renvoie cela vers le skill principal.

Quoi fournir

  • Une cible et des vars pour chaque tween enfantChaque appel .to() enchaîné prend un sélecteur et un objet vars ; la timeline les compose en une seule séquence.
  • repeat et yoyo au niveau de la timelinerepeat et yoyo se comportent comme sur les tweens, mais s’appliquent à toute la timeline plutôt qu’à un seul tween.
  • Callbacks au niveau de la timelineonComplete, onStart et onUpdate sont transmis au niveau de la timeline, donc ils se déclenchent pour la séquence dans son ensemble.

03 Dans le skill

Règles que le skill gsap-timeline donne à Claude Code et Codex

8 instructions concrètes, valeurs par défaut et limites que le SKILL.md fixe pour l'agent — la partie du fichier qui change le résultat.

  1. Pas d’enchaînement par delay

    Ne pas enchaîner les animations avec delay quand une timeline peut les séquencer ; le fichier renvoie vers gsap.timeline() et le paramètre de position pour une animation multi-étapes.

  2. Le paramètre de position plutôt que le tâtonnement

    Toujours utiliser le paramètre de position, le troisième argument, pour placer les tweens à des instants précis ou par rapport à des étiquettes.

  3. Nommez vos étiquettes

    Ajoutez des étiquettes avec addLabel() afin que le séquençage reste lisible et maintenable.

  4. Des valeurs par défaut sur le constructeur

    Passez des valeurs par défaut au constructeur de la timeline pour que les tweens enfants héritent de duration, ease et vars similaires au lieu de les répéter pour chaque tween.

  5. ScrollTrigger se place sur la timeline

    Placez ScrollTrigger sur la timeline ou sur le tween de premier niveau, jamais sur les tweens à l’intérieur d’une timeline.

  6. Ne jamais imbriquer une animation ScrollTrigger

    Les animations contenant un ScrollTrigger ne doivent pas être imbriquées ; les ScrollTriggers ne s'appliquent qu'aux Tweens ou Timelines de premier niveau.

  7. La durée du constructeur n'est pas la longueur de la séquence

    Ne lisez pas la durée sur le constructeur de la timeline comme étant la durée du tween — le fichier appelle cela une erreur courante.

  8. Connaître le placement par défaut

    « > » démarre un tween à la fin de l'animation récemment ajoutée et constitue le placement par défaut, tandis que « < » l'aligne sur le début de cette animation.

04 Mettez-le en pratique

Installer gsap-timeline dans Claude Code ou Codex

Une commande npx skills add, puis une première tâche dans votre agent et une checklist pour le résultat.

Ajouter gsap-timeline à Claude Code, Codex ou Votre Agent

Exécutez-la dans votre projet ; l'installateur demande à quel agent l'ajouter.

Terminal
npx skills add https://github.com/greensock/gsap-skills --skill gsap-timeline

Forme générique de la CLI skills pour skills/gsap-timeline/SKILL.md ; le dépôt peut documenter son propre chemin.

Donner au skill une première tâche de motion et vidéo

Rédigé dans les termes propres du skill ; remplacez les parties entre crochets par votre contenu.

Starter prompt
I'm sequencing a [hero banner] animation: [the headline] slides up, then [the CTA button] appears 0.5s later, and [the product shot] scales in at the same start time as the button. I want shared duration and ease defaults on the timeline, and labels for the intro and outro so I can play from either one.

Source : rédigé à partir du SKILL.md, dans les termes propres du skill.

Vérifiez le premier résultat

Ce que le SKILL.md lui-même présente comme un résultat correct :

  • Positionnez la tête de lecture sur une seconde précise avec tl.time(2) et vérifiez que chaque tween démarre là où le paramètre de position l'indique.
  • Vérifiez que les valeurs par défaut ont bien atteint les enfants : dans l'exemple du fichier, les deux tweens utilisent 0.5s et power2.out sans les répéter.
  • Lancez la lecture depuis un nom de label pour confirmer que le label a été ajouté au moment attendu.
  • Inversez pour prévisualiser la séquence à l'envers ; le fichier montre progress(1) avant reverse() afin que la timeline se joue entièrement en sens inverse.

Dans OpenDesign gsap-timeline est intégré : Plugins → Skills, sélectionnez-le dans la barre supérieure.

Télécharger OpenDesignLire le démarrage rapide

05 Open source, traçable

Source, licence et vérification

D'où proviennent les faits de cette page et quand ils ont été vérifiés pour la dernière fois.

Author
GreenSock
Repository
github.com/greensock/gsap-skills Branche main
Fichier du skill
skills/gsap-timeline/SKILL.md Checksum du contenu enregistré lors de la vérification ; commit aed9cfd
License
MIT D'après LICENSE ; SKILL.md indique « MIT ».
Étoiles du dépôt
15 248 Instantané GitHub pris le 14/09/2026 pour l'ensemble du dépôt greensock/gsap-skills, qui contient 8 skills dans ce catalogue. Pas un score ou un nombre d'utilisations pour gsap-timeline.
Vérifié par OpenDesign
14/09/2026 Le fichier source, le chemin, le texte de licence et le nombre d'étoiles ont été vérifiés. Inclus dans OpenDesign main (vérifié le 28/08/2026) ; aucune exécution en direct n'a été enregistrée sur cette page.

Dans le SKILL.md

  1. Quand utiliser ce skillS'applique aux animations multi-étapes et au séquençage ; renvoie aux skills core, scroll-trigger et React.
  2. Créer une Timelinegsap.timeline() avec des appels .to() chaînés ; les tweens s'ajoutent par défaut à la suite, sauf repositionnement.
  3. Paramètre de positionTroisième argument ou propriété vars : décalages absolus, relatifs, labels et placement avec chevrons.
  4. Valeurs par défaut de la TimelineLes valeurs par défaut passées au constructeur de la timeline sont héritées par chaque tween enfant.
  5. Options de la Timeline (constructeur)paused, repeat, yoyo, callbacks au niveau de la timeline, et l'objet defaults transmis aux enfants.
  6. LabelsaddLabel(), puis play() et tweenFromTo() pour démarrer à partir de points étiquetés.
  7. Imbrication de TimelinesUne timeline maîtresse peut contenir des timelines enfants via master.add(child, 0).
  8. Contrôle de la lectureplay, pause, reverse, restart, time, progress et kill listés pour la timeline.
  9. Bonnes pratiques officielles GSAPCinq bonnes pratiques cochées : timelines plutôt que délais, paramètre de position, labels, valeurs par défaut, ScrollTrigger de premier niveau.
  10. À éviterQuatre erreurs marquées d'une croix, dont le chaînage de délais, les valeurs par défaut sautées et les ScrollTriggers imbriqués.
Description du skill lui-même
« Skill GSAP officiel pour les timelines — gsap.timeline(), paramètre position, imbrication, lecture. À utiliser lors du séquençage d'animations, de la chorégraphie de keyframes, ou lorsque l'utilisateur pose des questions sur le séquençage d'animations, les timelines ou l'ordre d'animation (dans GSAP ou lors de la recommandation d'une bibliothèque prenant en charge les timelines). »

Description du front-matter tirée de SKILL.md. Le fichier complet fait environ 4 338 caractères. Lire le fichier complet sur GitHub.

06 Avant d'installer

Questions sur le skill gsap-timeline

Les réponses proviennent du SKILL.md tel que lu le 2026-09-14, et non d'une exécution enregistrée.

Comment créer une timeline qui ne démarre que lorsque je la déclenche ?

Créez-la avec paused: true dans le constructeur, ce qui laisse la timeline en pause, puis appelez .play() lorsque vous souhaitez la lancer.

GSAP Timeline

Exécuter gsap-timeline sur une Vraie Tâche de Motion et Vidéo.

Le skill gsap-timeline est fourni dans OpenDesign. Téléchargez l'application, sélectionnez le skill dans Plugins → Skills, collez le prompt ci-dessus et lisez le plan avant le résultat.

Télécharger OpenDesignParcourir tous les skills
Terminal
npx skills add https://github.com/greensock/gsap-skills --skill gsap-timeline