gsap-performance

Guide GSAP animation optimization to minimize layout thrashing and maintain 60fps.

19|4|Updated Jan 11, 2026

Search Tags:#gsap #web-performance #transform #scrolltrigger #animation-performance #will-change #batched-reads

Ready to run

npx skills add https://github.com/ZanebonoAlter/Syntopica --skill gsap-performance-zanebonoalter

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: gsap-performance
Source: https://github.com/ZanebonoAlter/Syntopica/tree/main/.agents/skills/gsap-performance
Command: npx skills add https://github.com/ZanebonoAlter/Syntopica --skill gsap-performance-zanebonoalter

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

GSAP performance optimization is needed to reduce jank, keep animations crisp, and achieve smooth 60fps across devices.

Core Features & Use Cases

Prefer transforms and opacity to keep work on the compositor.
Use will-change for elements that will animate.
Batch reads and writes to minimize layout thrashing; apply for complex timelines and frequent updates.
Use Stagger, gsap.quickTo for performance-critical properties, and ScrollTrigger with careful pinning and scrub settings.
Real-world use: optimizing a long scrolling animation or a card hover sequence to maintain 60fps.

Quick Start

Identify expensive properties and replace them with transforms and opacity, enable will-change on animating elements, and batch reads and writes to minimize layout thrashing.

Frequently Asked Questions about gsap-performance

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

FAQPage Schema

How do I fix GSAP animation jank and achieve smooth 60fps?▼

Fix GSAP animation jank by replacing layout-affecting properties with transforms and opacity, enabling will-change, and batching reads and writes to minimize layout thrashing for smooth 60fps.

Why does my GSAP ScrollTrigger animation cause layout thrashing?▼

GSAP ScrollTrigger animations cause layout thrashing when unbatched read/write cycles force synchronous layout recalculations, which you solve by batching operations and carefully managing pinning and scrub settings.

What's the best way to animate high element counts in complex GSAP timelines?▼

The best way to animate high element counts in complex GSAP timelines is using Stagger and gsap.quickTo for performance-critical properties while enforcing will-change on animating elements.

Does GSAP performance optimization work with only transforms and opacity?▼

GSAP performance optimization works best with transforms and opacity because it shifts animation work to the compositor thread, bypassing the main thread layout and paint bottlenecks.

When should I not use will-change for GSAP animations?▼

Do not use will-change on every element or permanently, as overuse consumes excessive memory; apply it only to elements that will animate and remove it when animations complete to maintain 60fps.