GSAP Animation

來源狀態

可用來源

原始名稱: gsap-core

資源類型

Skill

與類似 Skill 有什麼不同？

• Design Taste Frontend

  GSAP Animation 實作元素動態；Design Taste Frontend 著重整體介面視覺判斷。

來源描述的能力

這些是來源描述的可能操作，不代表 2lus 已授予權限或已測試。

尚未列出能力，請審查原始來源。

這個 Skill 是什麼？

針對 from、to、fromTo、easing、duration、stagger 與 matchMedia 的核心用法建立可維護動態。

可以做什麼？何時適合使用？

• 頁面元素需有清楚的進場動態。
• 多元素動畫要錯開。
• 不同視窗或動態偏好需調整效果。

如何使用

1. 提供元素結構與想傳達的互動意義。
2. 選擇 GSAP 核心 API 與時間、緩動設定。
3. 檢查清理、效能及 prefers-reduced-motion 的替代呈現。

使用前你需要準備

• 網頁元素與互動目的
• GSAP 核心套件與動態偏好規格

你可以替換：

請說明目標讀者、來源、範圍與交付形式；檢查輸出中的推論。

環境與相依需求

• 網頁元素與互動目的
• GSAP 核心套件與動態偏好規格

使用範例與 Prompt

以下是 2lus 撰寫的示範需求；請替換為你有權處理的檔案與專案，不代表已執行或保證結果。

入門

為一張卡片規劃 gsap.from 進場，保留內容立即可讀。

實務

用 stagger 讓列表逐項顯示，指定 duration、easing 與重複進入時的清理方式。

進階

設計桌面/手機 matchMedia 動畫與 reduced-motion 靜態替代，列出切換與元件卸載的驗收點。

實用提醒

• 先定義動畫的使用者目的。

限制與注意事項

• 此條目只對應 gsap-core，未涵蓋同專案的 timeline 等其他 Skill。

安全注意事項

• 避免閃爍與過度位移；尊重 reduced-motion，勿讓重要內容只靠動畫可見。

使用與設定

此條目不提供已確認的通用安裝指令；請依官方文件與 Agent 版本操作。

支援平台

未確認特定 Agent 相容性

來源與授權

來源查核日期（非安全認證）: 2026-10-01

MIT

GitHub 關注趨勢

成長數未核實

快照日期（UTC）: 2026-09-30

快照來源: weekly-agent-skills-ranking

歷史快照

由需求選定的 Weekly Rising 批次；本批未提供可核實的七日 Star 增量。僅表示編輯選錄，不代表排名或 GitHub 官方 Analytics。

Star 成長代表近期 GitHub 關注度，不代表品質排名。

相關 Skills

• Design Taste Frontend

Source status

Active source

Original name: gsap-core

Resource type

Skill

How is this different from similar skills?

• Design Taste Frontend

  GSAP Animation implements element motion; Design Taste Frontend addresses overall visual direction.

Documented capabilities

These are operations described upstream, not permissions granted or tested by 2lus.

Capabilities not declared here; review the original source.

What is this skill?

Build maintainable motion using core from, to, fromTo, easing, duration, stagger and matchMedia patterns.

Use cases and when to use it

• Introduce a page element.
• Stagger a group of elements.
• Adapt motion by viewport or preference.

How to use it

1. Provide element structure and the interaction purpose.
2. Choose a core GSAP API and timing/easing.
3. Review cleanup, performance and a prefers-reduced-motion alternative.

What you need

• Page elements and interaction purpose
• GSAP core package and motion preferences

You can replace:

Specify audience, sources, scope and deliverable; review inferences in the output.

Environment and dependencies

• Page elements and interaction purpose
• GSAP core package and motion preferences

Usage and prompt examples

These example requests were written by 2lus. Substitute files and projects you may use; examples are not executed results or guarantees.

Beginner

Plan a gsap.from entrance for a card while leaving content immediately readable.

Practical

Stagger a list with explicit duration, easing and cleanup on repeated entry.

Advanced

Design desktop/mobile matchMedia motion with a reduced-motion static state and checks for breakpoint changes and unmount.

Tips

• Define the user purpose before animating.

Limitations

• This entry covers gsap-core only, not the repository’s other skills such as timeline.

Security notes

• Avoid flashing and excess movement; respect reduced motion and keep essential content accessible.

Usage and setup

No verified universal installation command is provided for this entry. Follow the official documentation for your agent version.

Supported agents

Specific agent compatibility unknown

Sources and license

Source check date (not a safety certification): 2026-10-01

MIT

GitHub Momentum

Growth count not verified

Snapshot date (UTC): 2026-09-30

Snapshot source: weekly-agent-skills-ranking

Historical snapshot

Selected for a Weekly Rising editorial batch; no verifiable seven-day Star gain was supplied. This is not a ranking or official GitHub Analytics.

Star growth reflects recent GitHub attention, not a quality ranking.

Related skills

• Design Taste Frontend