Habilidades gsap-scrolltrigger
📦
gsap-scrolltrigger
Revisión del contenido r1 Seguro ⚙️ Comandos externos🌐 Acceso a red
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.
Compatible con: Claude Codex Code(CC)
Instalar con mi Agente
Copia esta solicitud en tu Agente. Incluye la página canónica del Skill y el manifiesto.
Solicitud de agente
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.Tu Agente debe seguir mostrando su plan y solicitar cualquier confirmación exigida por la política de seguridad.
Recursos legibles por agentes
Usa estos enlaces cuando un agente de IA, crawler o script necesite contexto limpio en vez de leer la página completa.
Pruébalo
Usando "gsap-scrolltrigger". Make feature cards fade upward as they enter the viewport.
Resultado esperado:
- 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.
Usando "gsap-scrolltrigger". Pin a chapter and connect its timeline to scrolling.
Resultado esperado:
- 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.
Usando "gsap-scrolltrigger". Stop ScrollTrigger instances after a React route change.
Resultado esperado:
- 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.
Auditoría de seguridad
Segurov1 • 24/8/2026 Abrir el informe versionado
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.
1
Archivos escaneados
297
Líneas analizadas
0
Elementos de revisión
0
Falsos positivos ignorados
Factores de riesgo
⚙️ Comandos externos (50)
SKILL.md:19-21 SKILL.md:21-27 SKILL.md:27-38 SKILL.md:38-40 SKILL.md:40 SKILL.md:44 SKILL.md:49 SKILL.md:50 SKILL.md:52-53 SKILL.md:53 SKILL.md:54-55 SKILL.md:55 SKILL.md:56-58 SKILL.md:58 SKILL.md:59-62 SKILL.md:62-63 SKILL.md:63 SKILL.md:65 SKILL.md:68-70 SKILL.md:70-77 SKILL.md:77-83 SKILL.md:83-84 SKILL.md:84 SKILL.md:88-94 SKILL.md:94-105 SKILL.md:105-109 SKILL.md:109-116 SKILL.md:116-122 SKILL.md:122 SKILL.md:124 SKILL.md:128 SKILL.md:130 SKILL.md:131 SKILL.md:133-135 SKILL.md:135-147 SKILL.md:147-155 SKILL.md:155-165 SKILL.md:165-167 SKILL.md:167-173 SKILL.md:173-181 SKILL.md:181-183 SKILL.md:183 SKILL.md:190-197 SKILL.md:197-205 SKILL.md:205-216 SKILL.md:216-227 SKILL.md:227 SKILL.md:231-255 SKILL.md:255-264 SKILL.md:264-268
🌐 Acceso a red (4)
La auditoría estática y semántica completada más reciente no detectó hallazgos de seguridad confirmados. Esto no demuestra que el skill no tenga efectos secundarios.
Auditado por: codex
Compartir y citar este informe
Comparte el informe de evaluación versionado, la insignia neutral, la tarjeta insertable y las citas. Skillstore presenta evidencias sin decidir si este Skill es seguro.
Copiar enlace del informe
https://skillstore.io/skills/greensock-gsap-scrolltrigger/audits/1?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportInsignia Markdown
[](https://skillstore.io/skills/greensock-gsap-scrolltrigger?utm_source=security_passport_badge)Insignia 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>Tarjeta para insertar
<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>Citas académicas (APA · BibTeX · CFF)
Cita APA
greensock. (2026). gsap-scrolltrigger security audit report (audit version 1) [Author version unspecified]. Skillstore. https://skillstore.io/skills/greensock-gsap-scrolltrigger/audits/1Cita 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"
Puntuación de Skillstore
Por qué esta puntuación Confianza de la evidencia: Medio 55
Arquitectura
85
Mantenibilidad
87
Contenido
65
Comunidad
83
Cumplimiento de la especificación
Lo que puedes crear
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.
Prueba estos 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.
Mejores prácticas
- 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.
Evitar
- 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.
Preguntas frecuentes
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.