Compétences gsap-scrolltrigger

📦

gsap-scrolltrigger

Name: gsap-scrolltrigger
Author: greensock

Révision du contenu r1 Sûr ⚙️ Commandes externes🌐 Accès réseau

Build Scroll Animations with GSAP ScrollTrigger

Scroll-driven interfaces can break when triggers, pinning, refresh order, or cleanup are configured incorrectly. This skill provides focused GSAP ScrollTrigger implementation guidance.

Prend en charge: Claude Codex Code(CC)

🥉 77 Bronze

Maintain this Skill? Claim it 🥉 77 Bronze

Installer avec mon Agent

Copiez cette demande dans votre Agent. Elle contient la page Skill de référence et le manifeste.

Demande d’agent

Review the Skillstore skill "gsap-scrolltrigger" from https://skillstore.io/skills/greensock-gsap-scrolltrigger.md and its manifest at https://skillstore.io/api/skills/greensock-gsap-scrolltrigger/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.

Votre Agent doit toujours présenter son plan et demander toute confirmation exigée par la politique de sécurité.

Ressources lisibles par les agents

Utilisez ces liens lorsqu’un Agent IA, un crawler ou un script a besoin d’un contexte propre au lieu de lire toute la page.

Détail Markdown GET /skills/greensock-gsap-scrolltrigger.md manifest signé GET /api/skills/greensock-gsap-scrolltrigger/manifest lockfile signé GET /api/skills/greensock-gsap-scrolltrigger/lockfile

Tester

Utilisation de « gsap-scrolltrigger ». Make feature cards fade upward as they enter the viewport.

Résultat attendu:

Use ScrollTrigger.batch for the card selector.
Animate each delivered batch with opacity, vertical movement, and a short stagger.
Set an entry threshold near the lower viewport and define reverse behavior explicitly.

Utilisation de « gsap-scrolltrigger ». Pin a chapter and connect its timeline to scrolling.

Résultat attendu:

Attach one ScrollTrigger to the parent timeline.
Use top alignment for the start and a measured scroll distance for the end.
Enable numeric scrub and pin the chapter wrapper.
Refresh after content or font changes affect layout.

Utilisation de « gsap-scrolltrigger ». Stop ScrollTrigger instances after a React route change.

Résultat attendu:

Scope animation creation to the component.
Use the GSAP React hook or a GSAP context for cleanup.
Revert the scope during unmount and refresh after the next route layout settles.

Audit de sécurité

Sûr

v1 • 24/08/2026 Ouvrir le rapport versionné

All 62 static findings are false positives caused by Markdown formatting, JavaScript API examples, official GSAP documentation links, and benign API identifiers. No executable shell commands, system reconnaissance, prompt injection, credential access, or data exfiltration behavior was found.

Fichiers analysés

297

Lignes analysées

Éléments à examiner

Faux positifs ignorés

Facteurs de risque

⚙️ Commandes externes (50)

🌐 Accès réseau (4)

SKILL.md:44 SKILL.md:118 SKILL.md:149 SKILL.md:295

Le dernier audit statique et sémantique terminé n’a détecté aucun constat de sécurité confirmé. Cela ne prouve pas que le skill est sans effets secondaires.

Audité par: codex

Partager et citer ce rapport

Partagez le rapport d’évaluation versionné, le badge neutre, la carte intégrable et les citations. Skillstore présente les preuves sans décider si ce Skill est sûr.

Ouvrir le rapport versionné

Copier le lien du rapport

https://skillstore.io/skills/greensock-gsap-scrolltrigger/audits/1?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Badge Markdown

[![Skillstore security assessment](https://skillstore.io/badges/skills/greensock-gsap-scrolltrigger/security.svg)](https://skillstore.io/skills/greensock-gsap-scrolltrigger?utm_source=security_passport_badge)

Badge HTML

<a href="https://skillstore.io/skills/greensock-gsap-scrolltrigger?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/greensock-gsap-scrolltrigger/security.svg" alt="Skillstore security assessment" loading="lazy"></a>

Carte intégrable

<iframe src="https://skillstore.io/embed/skills/greensock-gsap-scrolltrigger.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>

Citations académiques (APA · BibTeX · CFF)

Citation APA

greensock. (2026). gsap-scrolltrigger security audit report (audit version 1) [Author version unspecified]. Skillstore. https://skillstore.io/skills/greensock-gsap-scrolltrigger/audits/1

Citation BibTeX

@techreport{greensock-greensock-gsap-scrolltrigger-2026,
  author = {greensock},
  title = {gsap-scrolltrigger security audit report (audit version 1)},
  institution = {Skillstore},
  year = {2026},
  number = {1},
  url = {https://skillstore.io/skills/greensock-gsap-scrolltrigger/audits/1},
  note = {Author version unspecified}
}

CITATION.cff

cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "gsap-scrolltrigger security audit report (audit version 1)"
version: "unspecified"
type: report
authors:
  - name: "greensock"
date-released: "2026-08-24"
url: "https://skillstore.io/skills/greensock-gsap-scrolltrigger/audits/1"
identifiers:
  - type: other
    value: "skillstore:greensock-gsap-scrolltrigger:audit:1"
    description: "Skillstore immutable audit report identifier"

Score Skillstore

Pourquoi ce score Niveau de confiance des preuves: Moyen

Architecture

Maintenabilité

Contenu

Communauté

Conformité aux spécifications

Ce que vous pouvez créer

Create a Product Story

Build pinned, scrubbed sections that reveal product details as visitors scroll.

Animate Repeated Content

Batch card or gallery entrance animations while controlling stagger and reverse behavior.

Maintain React Animations

Structure ScrollTrigger setup, refresh logic, and cleanup around component lifecycles.

Essayez ces prompts

Add a Basic Trigger

Animate [selector] from [initial state] to [final state] when it reaches [viewport position]. Use GSAP ScrollTrigger.

Build a Scrubbed Section

Create a scrubbed animation for [section]. Define practical start and end values, optional pinning, and development markers.

Create Horizontal Movement

Design pinned horizontal movement for [content]. Include containerAnimation triggers, responsive distance calculations, refresh handling, and stated caveats.

Audit a React Integration

Review my React ScrollTrigger implementation for registration, scoping, refresh timing, responsive behavior, cleanup, reduced motion, and timeline composition.

Bonnes pratiques

Register ScrollTrigger once before creating any trigger.
Create triggers in page order and refresh after layout-changing content loads.
Clean up triggers when components or animated elements are removed.

Éviter

Do not place ScrollTrigger on a child tween inside a controlled timeline.
Do not combine scrub and toggleActions on the same trigger.
Do not leave development markers enabled in production.

Foire aux questions

Does this skill install GSAP?

No. It assumes GSAP and ScrollTrigger are available and focuses on implementation guidance.

Can it help with pinned sections?

Yes. It explains pin configuration, spacing behavior, wrapper usage, and common layout concerns.

Does it cover React cleanup?

Yes. It recommends the GSAP React hook or context-based cleanup during component unmount.

Can it integrate a smooth-scrolling library?

It explains scrollerProxy requirements, but each library needs adapter code for its own getter, setter, and update APIs.

Does it support horizontal scrolling effects?

Yes. It covers pinned horizontal movement and containerAnimation-based nested triggers.

Will it test the final animation?

No. You must run the page, inspect markers, test responsive layouts, and verify reduced-motion behavior.

Détails du développeur

Auteur

greensock

Licence

MIT

Révision Skillstore

Avis de version

L’auteur n’a déclaré aucune version.

Dépôt

https://github.com/greensock/gsap-skills/tree/aed9cfd3277740755f6bfc1155c7aa645403b760/skills/gsap-scrolltrigger

Réf

13167b3442447d4882aa7ba1c8c7b961abd851fd

Récence de maintenance

25/08/2026

Utilisation

0 téléchargements · 0 vues

Structure de fichiers

📄 SKILL.md