skills.rest
greensock
greensockOFFICIAL
Explore all skills by this author →
Website𝕏@GreenSockGitHub

gsap-performance

Optimize GSAP animations with transform properties, will-change, and batching.

13.3k|785|Updated Mar 4, 2026
Search Tags:#performance#JavaScript#ScrollTrigger#GSAP#animation optimization
One-click install
npx skills add https://github.com/greensock/gsap-skills --skill gsap-performance-greensock
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gsap-performance
Source: https://github.com/greensock/gsap-skills/tree/main/skills/gsap-performance
Command: npx skills add https://github.com/greensock/gsap-skills --skill gsap-performance-greensock

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This Skill provides guidance on optimizing GSAP animations to achieve smooth 60fps performance, reducing layout thrashing and improving user experience.

Core Features & Use Cases

  • Transform Optimization: Emphasizes using transform properties like x, y, scale, and rotation over layout properties for efficient animations.
  • will-change: Recommends using will-change in CSS to hint browser optimization for animated elements.
  • Batching Reads and Writes: Offers strategies to batch DOM reads and writes to minimize layout thrashing.
  • List and Element Optimization: Suggests using stagger for list animations and virtualization for long lists to avoid jank.
  • Frequent Property Updates: Introduces gsap.quickTo() for efficient updating of frequently changed properties like mouse followers.
  • ScrollTrigger Performance: Provides best practices for ScrollTrigger to enhance performance, including pinning, scrubbing, and refresh calls.
  • Reduce Simultaneous Work: Offers advice on pausing or killing animations for off-screen elements and simplifying animation sequences.
  • Best Practices: Outlines general best practices for performance, including the use of will-change, staggering, and quickTo.

Quick Start

Use the gsap-performance skill to analyze the performance of an existing GSAP animation and identify optimization opportunities.

Frequently Asked Questions about gsap-performance

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

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

Improve GSAP ScrollTrigger performance by optimizing pinning and scrubbing configurations, minimizing refresh calls, and pausing or killing animations for off-screen elements to reduce simultaneous workload and jank.

How do I fix layout thrashing in JavaScript animations?▼

Fix layout thrashing in JavaScript animations by batching DOM reads and writes, preventing the browser from repeatedly recalculating styles, and utilizing gsap.quickTo() for efficiently updating frequently changed properties like mouse followers.

Does GSAP work with long list animations without dropping frames?▼

GSAP handles long list animations without dropping frames by applying stagger configurations and implementing list virtualization, ensuring smooth rendering and preventing jank during heavy DOM element updates.

What is the best way to update mouse follower animations in GSAP?▼

The best way to update mouse follower animations in GSAP is using gsap.quickTo(), which provides an efficient method for frequently updating specific properties, reducing performance overhead and ensuring smooth movement.

When should I use will-change for JavaScript animation optimization?▼

Use will-change for JavaScript animation optimization when elements are about to be animated, providing a hint to the browser to prepare optimization layers in advance and ensuring smooth GSAP transitions.

Related Skills

Explore More Software Engineering Skills→
AlejandroFiginiAlejandroFigini

gsap-performance

Optimize GSAP animations with transforms and compositor-friendly practices.

Community
Intermediate
yequdesuyequdesu

gsap-performance

Analyze and optimize GSAP animations to reduce jank and layout thrashing.

Community
Intermediate
gyalamanch001agyalamanch001a

gsap-performance

Optimize GSAP animations with transforms, opacity, will-change, and batching.

Community
Intermediate
santanapolsantanapol

fixing-motion-performance

Fix CSS, WAAPI, Motion, rAF, or GSAP animation performance issues.

Community
Intermediate