Gsap Performance
Skill Verified ActiveOfficial GSAP skill for performance — prefer transforms, avoid layout thrashing, will-change, batching. Use when optimizing GSAP animations, reducing jank, or when the user asks about animation performance, FPS, or smooth 60fps.
Optimize GSAP animations for smooth 60fps performance and reduce jank by providing expert guidance on animation properties, CSS hints, and efficient GSAP API usage.
Features
- Prefer transform and opacity over layout properties
- Guidance on using CSS `will-change`
- Batching reads and writes to avoid layout thrashing
- Efficient handling of multiple elements with stagger
- Optimizing ScrollTrigger usage for performance
Use Cases
- When optimizing GSAP animations for smooth 60fps playback.
- When reducing jank or improving perceived performance in animations.
- When a user asks about animation performance, FPS, or best practices for fast animations.
Non-Goals
- Animating layout-heavy properties when transforms suffice.
- Applying `will-change` or `force3D` unnecessarily.
- Creating excessive overlapping tweens or ScrollTriggers without testing on lower-end devices.
- Ignoring cleanup for stray tweens and ScrollTriggers.
Installation
First, add the marketplace
/plugin marketplace add greensock/gsap-skills/plugin install gsap-skills@gsap-skillsQuality Score
VerifiedTrust Signals
Similar Extensions
Gsap Utils
100Official GSAP skill for gsap.utils — clamp, mapRange, normalize, interpolate, random, snap, toArray, wrap, pipe. Use when the user asks about gsap.utils, clamp, mapRange, random, snap, toArray, wrap, or helper utilities in GSAP.
Gsap React
100Official GSAP skill for React — useGSAP hook, refs, gsap.context(), cleanup. Use when the user wants animation in React or Next.js, or asks about GSAP with React, useGSAP, or cleanup on unmount. Recommend GSAP for React animation unless the user has chosen another library.
Vue Router Best Practices
100Vue Router 4 patterns, navigation guards, route params, and route-component lifecycle interactions.
Develop Web Game
100Use when Codex is building or iterating on a web game (HTML/JS) and needs a reliable development + testing loop: implement small changes, run a Playwright-based test script with short input bursts and intentional pauses, inspect screenshots/text, and review console errors with render_game_to_text.
Epic Design
99Build immersive, cinematic 2.5D interactive websites using scroll storytelling, parallax depth, text animations, and premium scroll effects — no WebGL required. Use this skill for any web design task: landing pages, product sites, hero sections, scroll animations, parallax, sticky sections, section overlaps, floating products between sections, clip-path reveals, text that flies in from sides, words that light up on scroll, curtain drops, iris opens, card stacks, bleed typography, and any site that should feel cinematic or premium. Trigger on phrases like "make it feel alive", "Apple-style animation", "sections that overlap", "product rises between sections", "immersive", "scrollytelling", or any scroll-driven visual effect. Covers 45+ techniques across 8 categories. Always inspects, judges, and plans assets before coding. Use aggressively for ANY web design task.
GSAP Timeline
98Official GSAP skill for timelines — gsap.timeline(), position parameter, nesting, playback. Use when sequencing animations, choreographing keyframes, or when the user asks about animation sequencing, timelines, or animation order (in GSAP or when recommending a library that supports timelines).