skills.rest
marcmarti9
marcmarti9COMMUNITY
Explore all skills by this author →
GitHub

gsap-performance

Optimizes GSAP animations for smooth 60fps rendering using transforms, batching, and will-change.

3|Updated Jul 28, 2026
Search Tags:#performance#frontend#animation#gsap#transforms#ScrollTrigger#60fps
One-click install
npx skills add https://github.com/marcmarti9/agentit --skill gsap-performance-marcmarti9
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gsap-performance
Source: https://github.com/marcmarti9/agentit/tree/main/skills/gsap-performance
Command: npx skills add https://github.com/marcmarti9/agentit --skill gsap-performance-marcmarti9

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? GSAP animations can cause jank, dropped frames, and layout thrashing when they animate layout-heavy properties or create excessive tweens. This Skill provides concrete rules and patterns to keep animations on the compositor and running at 60fps. ## Core Features & Use Cases - Compositor-Friendly Properties: Guides you to animate transform and opacity instead of width, height, top, or left to avoid layout and paint cost. - Efficient Update Patterns: Recommends gsap.quickTo() for frequently updated properties like mouse followers, and stagger instead of many manual tweens. - ScrollTrigger Tuning: Covers pin promotion, scrub values, and debounced ScrollTrigger.refresh() calls to reduce scroll-time work. - Use Case: When a user reports a stuttering scroll-driven animation, apply this Skill to replace left/top animations with x/y, add will-change hints, and clean up off-screen tweens. ## Quick Start Ask the agent to review your GSAP animation code for performance issues and rewrite it to use transforms, quickTo, and proper ScrollTrigger cleanup.

Frequently Asked Questions about gsap-performance

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I make GSAP animations run at 60fps?▼

Animate transform properties (x, y, scale, rotation) and opacity, which stay on the compositor and avoid layout. Add will-change: transform in CSS only on elements that actually animate, and avoid animating width, height, top, or left.

What is gsap.quickTo() and when should I use it?▼

gsap.quickTo() creates a single reusable tween for a property that updates frequently, such as mouse-follower x/y positions. It avoids creating a new tween on every mousemove event, reducing overhead.

Why does animating width or height cause jank in GSAP?▼

Width, height, top, left, margin, and padding trigger layout recalculation and paint on every frame. Use x, y, or scale transforms instead, which the browser compositor handles without layout.

How do I improve ScrollTrigger performance?▼

Pin only the elements that need it, use a small scrub value like scrub: 1, and call ScrollTrigger.refresh() only when layout actually changes, debounced rather than on every resize.

Should I set will-change on every animated element?▼

No. Apply will-change only to elements that are actually animating. Setting it everywhere wastes memory and compositor layers without benefit.

How do I handle animations for long lists or many elements?▼

Use stagger instead of many separate tweens with manual delays, consider virtualization for long lists, animate only visible items, and kill or pause off-screen animations to reduce simultaneous work.

Related Skills

Explore More Software Engineering Skills→
polaroidkiddpolaroidkidd

gsap-core

Provide a framework-agnostic GSAP core API for tweens, timelines, and scroll interactions.

Community
Intermediate
zakariafzakariaf

flutter-performance

Diagnoses and fixes Flutter UI jank through rebuild scoping, lazy lists, and profile-mode measurement.

Community
Intermediate
malikkotbmalikkotb

gsap-performance

Optimizes GSAP animations for smooth 60fps rendering using transforms, batching, and will-change.

Community
Basic
Samuelca6399Samuelca6399

motion-design

Implement web animations with CSS, Framer Motion, and GSAP.

Community
Intermediate