Навыки gsap-scrolltrigger

📦

gsap-scrolltrigger

Name: gsap-scrolltrigger
Author: greensock

Ревизия содержимого r1 Безопасно ⚙️ Внешние команды🌐 Доступ к сети

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.

Поддерживает: Claude Codex Code(CC)

🥉 77 Бронза

Установить с помощью моего Агента

Скопируйте этот запрос в своего Агента. Он содержит каноническую страницу Skill и манифест.

Запрос агента

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.

Ваш Агент по-прежнему должен показать план и запросить все подтверждения, требуемые политикой безопасности.

Ресурсы для AI-агентов

Используйте эти ссылки, когда AI-агенту, crawler или script нужен чистый контекст вместо полной страницы.

Markdown-детали GET /skills/greensock-gsap-scrolltrigger.md Подписанный manifest GET /api/skills/greensock-gsap-scrolltrigger/manifest Подписанный lockfile GET /api/skills/greensock-gsap-scrolltrigger/lockfile

Протестировать

Использование «gsap-scrolltrigger». Make feature cards fade upward as they enter the viewport.

Ожидаемый результат:

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.

Использование «gsap-scrolltrigger». Pin a chapter and connect its timeline to scrolling.

Ожидаемый результат:

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.

Использование «gsap-scrolltrigger». Stop ScrollTrigger instances after a React route change.

Ожидаемый результат:

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.

Аудит безопасности

Безопасно

v1 • 24.08.2026 Открыть версионный отчет

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.

Просканировано файлов

297

Проанализировано строк

Пункты проверки

Ложные срабатывания проигнорированы

Факторы риска

⚙️ Внешние команды (50)

🌐 Доступ к сети (4)

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

Последний завершенный статический и семантический аудит не обнаружил подтвержденных проблем безопасности. Это не доказывает отсутствие побочных эффектов у навыка.

Аудитор:: codex

Поделиться и цитировать этот отчет

Делитесь версионным отчетом об оценке, нейтральным значком, встраиваемой карточкой и цитатами. Skillstore публикует доказательства, не решая, безопасен ли этот Skill.

Открыть версионный отчет

Копировать ссылку на отчёт

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

Значок 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)

Значок 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>

Встраиваемая карточка

<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>

Академические ссылки (APA · BibTeX · CFF)

Цитата APA

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

Цитата 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"

Оценка Skillstore

Почему такая оценка Достоверность доказательств: Средний

Архитектура

Сопровождаемость

Контент

Сообщество

Соответствие спецификации

Что вы можете построить

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.

Попробуйте эти промпты

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.

Лучшие практики

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.

Избегать

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.

Часто задаваемые вопросы

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.

Сведения для разработчиков

Автор

greensock

Лицензия

MIT

Ревизия Skillstore

Примечание о версии

Автор не указал версию.

Репозиторий

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

Ссылка

13167b3442447d4882aa7ba1c8c7b961abd851fd

Актуальность поддержки

25.08.2026

Использование

0 загрузок · 0 просмотров

Структура файлов

📄 SKILL.md