gsap-performance

Optimize GSAP animations using transforms, opacity, and ScrollTrigger tuning.

Updated Apr 12, 2026
One-click install
npx skills add https://github.com/Bharathadi01/export-work --skill gsap-performance-bharathadi01
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gsap-performance
Source: https://github.com/Bharathadi01/export-work/tree/main/.agents/skills/gsap-performance
Command: npx skills add https://github.com/Bharathadi01/export-work --skill gsap-performance-bharathadi01

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps developers optimize GSAP animations to reduce jank and achieve smooth 60fps, by focusing on transforms, opacity, and controlled batching.

Core Features & Use Cases

  • Prefer transform and opacity for animation to keep work on the compositor and avoid layout thrashing.
  • Use batching, stagger, and quickTo for high-frequency updates; tune ScrollTrigger for performance.
  • Apply will-change strategically and avoid over-optimizing every element; use performance-oriented patterns for scroll-based and heavy timelines.

Quick Start

Enhance a GSAP timeline by replacing layout-affecting properties with transforms and applying will-change for smoother 60fps.

Frequently Asked Questions about gsap-performance

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

FAQPage Schema
Why does my GSAP animation have jank and drop below 60fps?▼

GSAP animation jank typically happens when animating layout-affecting properties instead of transforms and opacity, which forces the browser to recalculate the layout and triggers scroll lag.

How do I optimize ScrollTrigger animations for high-frequency updates?▼

Optimize ScrollTrigger animations by using GSAP batching and quickTo to minimize layout thrashing during high-frequency updates, and apply will-change strategically to offload compositing work.

What is the best way to use will-change for GSAP transform animations?▼

Apply will-change strategically only to elements actively animating transforms in GSAP, avoiding over-optimization across the entire page to prevent excessive memory consumption and maintain smooth rendering.

Can I use GSAP quickTo to prevent layout thrashing on scroll?▼

Yes, you can use GSAP quickTo to prevent layout thrashing on scroll by replacing standard tween updates with highly optimized function instances designed for high-frequency property changes.

Does animating opacity and transforms in GSAP improve scroll performance?▼

Animating opacity and transforms in GSAP improves scroll performance by keeping rendering work on the compositor thread, effectively bypassing the main thread's layout and paint recalculation phases.

When should I use stagger instead of standard tweens in GSAP timelines?▼

Use stagger instead of standard tweens in GSAP timelines when animating multiple elements, as it batches execution to reduce layout thrashing and optimize high-frequency scroll-triggered updates.