skills.rest
NalinDalal
NalinDalalCOMMUNITY
Explore all skills by this author →
Website𝕏@nalin82929GitHub

gsap-performance

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

1|Updated Aug 17, 2026
Search Tags:#performance#frontend#animation#gsap#transforms#ScrollTrigger#60fps
One-click install
npx skills add https://github.com/NalinDalal/skillset --skill gsap-performance-nalindalal
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gsap-performance
Source: https://github.com/NalinDalal/skillset/tree/main/skills/ui/gsap-performance
Command: npx skills add https://github.com/NalinDalal/skillset --skill gsap-performance-nalindalal

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires gsap.

What problem does it solve? GSAP animations can cause jank and dropped frames when they animate layout-heavy properties, create too many simultaneous tweens, or trigger repeated layout thrashing. This Skill provides concrete rules and patterns to keep animations on the compositor thread and running at 60fps. ## Core Features & Use Cases - Compositor-Friendly Properties: Enforces animating transform and opacity instead of width, height, top, left, margin, or padding. - 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 page with scroll-driven animations stutters on low-end devices, apply this Skill to replace left/top animations with x/y transforms, add will-change hints, and kill off-screen tweens. ## Quick Start Ask the agent to review your GSAP animation code for performance issues and optimize it for smooth 60fps playback.

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 only transform properties (x, y, scale, rotation) and opacity, which stay on the compositor thread. Avoid animating width, height, top, left, margin, or padding since they trigger layout and cause jank.

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

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

Should I use will-change on all animated elements?▼

No, apply will-change: transform only to elements that will actually animate. Setting it on every element wastes memory and can hurt performance instead of helping.

Why does my GSAP ScrollTrigger animation stutter on scroll?▼

Stutter often comes from pinning too many elements, calling ScrollTrigger.refresh() on every resize, or running too many simultaneous triggers. Pin only what is needed, use a small scrub value, and debounce refresh calls.

How do I animate many elements efficiently with GSAP?▼

Use the stagger property instead of creating many separate tweens with manual delays. For long lists, consider virtualization or animating only visible items, and reuse timelines rather than creating new ones every frame.

Related Skills

Explore More Software Engineering Skills→
X-manistX-manist

gsap-core

Implements GSAP core tweens, eases, staggers, and responsive matchMedia animations in JavaScript.

Community
Intermediate
pradeepmoulipradeepmouli

axiom-display-performance

Diagnose and optimize frame-rate issues on ProMotion devices via render loop configuration and MetricKit telemetry.

Community
Advanced
polaroidkiddpolaroidkidd

gsap-scrolltrigger

Create scroll-driven animations and element pinning with GSAP ScrollTrigger.

Community
Advanced
taxmaxitaxmaxi
1

css-animations

Write CSS transitions, keyframes, transforms, and clip-path animations without JavaScript libraries.

Official
Intermediate