gsap-performance
The gsap-performance skill provides guidelines and patterns for optimizing GSAP animations to maintain 60fps, reduce layout thrashing, and minimize jank.
Is gsap-performance safe to install?
Safe to install: our audit of gsap-performance's source files found 0 shell commands, 0 external URLs, no file writes (none risk). Every command and URL listed appears verbatim in the skill's source. The skill provides static documentation and code patterns for performance optimization and does not execute code or perform file operations.
How we audit skills: our security review methodology.
Who is this skill for?
Developers using GSAP for web animations who need to optimize performance and resource usage.
What can you do with it?
- Optimizing GSAP animations for smooth frame rates
- Reducing layout and paint costs in animations
- Implementing efficient mouse-follower animations with gsap.quickTo
- Managing ScrollTrigger performance
- Reducing jank in animations with many elements
How good is this skill?
Quality score: 5/10. The skill provides clear, actionable technical advice for GSAP performance optimization based on official best practices.
What does the skill file contain?
# GSAP Performance ## When to Use This Skill Apply when optimizing GSAP animations for smooth 60fps, reducing layout/paint cost, or when the user asks about performance, jank, or best practices for fast animations. **Related skills:** Build animations with **gsap-core** (transforms, autoAlpha) and **gsap-timeline**; for ScrollTrigger performance see **gsap-scrolltrigger**. ## Prefer Transform and Opacity Animating **transform** (`x`, `y`, `scaleX`, `scaleY`, `rotation`, `rotationX`, `rotationY`, `skewX`, `skewY`) and **opacity** keeps work on the compositor and avoids layout and most pain...
Frequently asked questions
Which CSS properties should I avoid animating for performance?
Avoid animating width, height, top, left, margin, and padding as these trigger layout and paint cycles.
How do I efficiently update properties like mouse followers?
Use gsap.quickTo to reuse a single tween instead of creating new tweens on every update.
When should I use will-change?
Apply will-change in CSS only to elements that are actively animating to hint the browser to promote the layer.
How can I optimize animations with many elements?
Use stagger instead of manual delays, consider virtualization for long lists, and avoid creating hundreds of simultaneous tweens.
Related skills
frontend-design
618.4KAI agents tasked with designing and building web interfaces who need to produce unique, high-quality visual identities rather than generic, templated designs
The frontend-design skill provides guidance for creating distinctive, intentional visual designs for web interfaces. It instructs the agent to act as a design lead at a small studio, focusing on avoiding templated defaults by making deliberate choices regarding typography, color palettes, layout, and motion. The skill emphasizes a structured process of brainstorming, planning, and self-critique before writing code.
supabase-postgres-best-practices
264.3KDevelopers and database administrators working with Postgres and Supabase
This skill provides a structured set of Postgres performance optimization rules and best practices maintained by Supabase. It guides developers in writing, reviewing, and optimizing SQL queries, schema designs, and database configurations.
caveman-compress
224.1KDevelopers and users who want to optimize memory files like CLAUDE
The caveman-compress skill reduces input token usage by rewriting natural language files into a concise, caveman-style format while preserving technical content, code blocks, and file structure.
remotion-to-hyperframes
157.2KDevelopers migrating existing Remotion video projects to the HyperFrames framework
The remotion-to-hyperframes skill translates Remotion (React) video compositions into HyperFrames (HTML + GSAP) compositions. It uses a linting process to identify incompatible React patterns, maps Remotion APIs to HyperFrames equivalents, generates HTML/CSS/GSAP output, and validates the translation using SSIM-based image comparison against a tiered test corpus.