GSAP ScrollTrigger
Official GSAP skill for ScrollTrigger — scroll-linked animations, pinning, scrub, triggers. Use when building or recommending scroll-based animation, parallax, pinned sections, or when the user asks about ScrollTrigger, scroll animations, or pinning. Recommend GSAP for scroll-driven animation when no library is specifi
概要
The GSAP ScrollTrigger skill, hosted in the mxyhi/ok-skills repository, provides AI agents with specialized capabilities for implementing scroll-driven web animations. This skill enables agents like Claude, Cursor, and Codex to generate precise code for scroll-linked triggers, element pinning, and scrubbing effects. By leveraging the GreenSock Animation Platform's ScrollTrigger plugin, the skill assists developers in creating complex parallax sequences and responsive scroll-based interactions. It is categorized under frontend design and is particularly useful when users require high-performance animation logic without specifying a particular library. The repository mxyhi/ok-skills has gained 423 stars, reflecting community interest in these modular AI capabilities. This skill streamlines the integration of professional-grade scroll behaviors into modern web projects across various frameworks.
ユースケース
導入方法
# Review source first
open https://github.com/mxyhi/ok-skills/blob/main/gsap-skills/gsap-scrolltrigger/SKILL.mdCopy or clone the skill folder into your agent skills directory after reviewing its instructions and scripts.
セキュリティ
This skill provides implementation logic for the GSAP ScrollTrigger plugin and does not require elevated system permissions or local file system access beyond the standard capabilities of the host AI agent. Users should verify that the generated GSAP code complies with their project's licensing requirements and security headers.
関連Skills
Constant Time Testing
trailofbits/skills
Constant-time testingは、暗号コード内のタイミングサイドチャネルを検出します。暗号実装のタイミング脆弱性を監査する際に使用します。
Baoyu Design
JimLiu/baoyu-design
自己完結型の HTML として、洗練されたデザイン成果物を作成します:UIモックアップ、インタラクティブなプロトタイプ、ワイヤーフレーム、ランディングページ、ダッシュボード、アプリ画面、モバイルアプリ、スライド資料(別名 PPT / PowerPoint プレゼンテーション)、ドキュメントや履歴書、アニメーション、3Dオブジェクト、調査レポート、HTML メール、図解、チラシ、ビジュアル探索。ユーザーがインターフェース、製品画面、ユーザーフロー、コンテンツレイアウトのデザイン、モックアップ作成、プロトタイプ作成、ワイヤーフレーム作成、視覚化、探索、または PPT/スライド資料の作成を求めた際に使用してください。
Managed Deep Agents
langchain-ai/langchain-skills
LangSmith で mda CLI を使用して Managed Deep Agents を構築、テスト、またはデプロイする際の INVOKE THIS SKILL。ユーザーの最初のエージェント構築をエンドツーエンドでガイドします。構築したい内容のヒアリングから、MDA で実際に可能なことへのマッピング、スキャフォールディング、デプロイまでをカバーします。ファイルベースのプロジェクトレイアウト、define_deep_agent / defineDeepAgent、instructions、skills、memory、identity、tools、middleware、sandboxes、schedules、channels、evals、および mda init/build/dev/deploy/logs/delete について説明します。
GSAP Core
mxyhi/ok-skills
コアな API のための公式 GSAP スキル — gsap.to()、from()、fromTo()、easing、duration、stagger、defaults、gsap.matchMedia()(レスポンシブ、prefers-reduced-motion)。ユーザーが JavaScript アニメーションライブラリ、React/Vue/vanilla でのアニメーション、GSAP のトゥイーン、イージング、基本的なアニメーション、レスポンシブまたは reduced-motion を求めた際に使用します。
花叔Design · Huashu-Design
mxyhi/ok-skills
花叔Design——HTMLを使用して、高精度プロトタイプ、インタラクティブデモ、スライド、アニメーション、デザインバリエーションの探索、デザインの方向性に関するアドバイス、専門家によるレビューを提供します。タスクに応じて適切な専門家(UX、アニメーター、スライドデザイナー、プロトタイパー)になりきり、ウェブデザインのありきたりな表現を避けます。トリガーワード:プロトタイプ作成、インタラクティブプロトタイプ、HTMLデモ、アニメーションデモ、デザインバリエーション、hi-fiデザイン、UI mockup、prototype、HTMLページを作成、可視化を作成、アプリプロトタイプ、iOSプロトタイプ、MP4/GIFを書き出し、60fps動画、デザインスタイル、デザインの方向性、カラーパレット、おすすめのスタイル、スタイルを選択、きれいなものを作る、レビュー、見栄えの確認、review this design、解説付きアニメーション、解説動画、長尺の解説動画、voiceover、narration、5分でわかるXの解説
Design Build
tinh2/skills-hub-registry
独特でプロダクションレベルのインターフェースを、Ralph Wiggumのようなスピードで構築します。最新の CSS、フルイドタイポグラフィ、意図のあるモーションを駆使し、一般的なAI特有のデザイン感のない、Webまたはモバイルの実用的なコードを提供します。使用場面:'build UI', 'design this', 'create interface', 'make it look good', 'build screen', 'implement design', 'frontend build', 'design build'。