スキル gsap-scrolltrigger
📦
gsap-scrolltrigger
コンテンツリビジョン 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)
自分のエージェントでインストール
このリクエストをエージェントにコピーしてください。正規の 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 エージェント、クローラー、スクリプトがページ全体ではなく整理されたコンテキストを必要とする場合は、これらのリンクを使ってください。
テストする
「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 • 2026/8/24 バージョン別レポートを開く
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
スキャンされたファイル
297
解析済み行数
0
レビュー項目
0
誤検知を無視
リスク要因
⚙️ 外部コマンド (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
🌐 ネットワークアクセス (4)
最新の完了済み静的・セマンティック監査では、確認済みのセキュリティ検出事項は見つかりませんでした。これは、スキルに副作用がないことを証明するものではありません。
監査者: codex
このレポートを共有・引用
バージョン付き評価レポート、中立的なバッジ、埋め込みカード、引用を共有できます。Skillstore は証拠を報告しますが、この Skill が安全かどうかは判断しません。
レポートリンクをコピー
https://skillstore.io/skills/greensock-gsap-scrolltrigger/audits/1?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdownバッジ
[](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/1BibTeX形式の引用
@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 スコア
このスコアの理由 証拠の信頼度: 中 55
アーキテクチャ
85
保守性
87
コンテンツ
65
コミュニティ
83
仕様準拠
作成できるもの
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.