skills.rest
Jatinkrmahato993203
Jatinkrmahato993203COMMUNITY
Explore all skills by this author →
GitHub

gsap-performance

Optimize GSAP animations for smooth 60fps rendering using transforms and batching.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires gsap.

What problem does it solve? GSAP animations can cause jank, dropped frames, and layout thrashing when developers animate layout-heavy properties or create too many simultaneous tweens. This Skill provides concrete rules and patterns to keep animations on the compositor thread and maintain smooth 60fps rendering. ## 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 costs. - Efficient Update Patterns: Covers gsap.quickTo() for frequently updated values like mouse followers, stagger for lists, and will-change usage. - ScrollTrigger Tuning: Explains pin promotion, scrub values, and debounced ScrollTrigger.refresh() calls to reduce scroll-related work. - Use Case: A developer notices a page with animated cards stuttering on scroll. Apply this Skill to convert left/top animations to x/y transforms, replace per-element tweens with stagger, and debounce ScrollTrigger.refresh() calls. ## Quick Start Review my GSAP animation code and optimize it for 60fps performance using transforms, quickTo, and proper ScrollTrigger settings.

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 and avoid layout and paint. Add will-change: transform in CSS for elements that 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 properties updated frequently, such as mouse-follower x/y positions. It avoids creating a new tween on every mousemove event, reducing overhead and improving smoothness.

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

Width and height changes trigger layout recalculation and repaint on every frame, which is expensive. Use scale transforms instead to achieve the same visual effect while keeping work on the compositor thread.

How do I optimize ScrollTrigger performance?▼

Pin only elements that need it, use a small scrub value like scrub: 1 to reduce scroll work, 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 broadly wastes memory and compositor layers, which can hurt performance instead of helping it.

Related Skills

Explore More Software Engineering Skills→
hanzoaihanzoai

gsap-core

Create timeline-based web animations with GSAP core API across frameworks.

Official
Intermediate
pradeepmoulipradeepmouli

axiom-display-performance

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

Community
Advanced
hii-saikrishnahii-saikrishna

gsap-scrolltrigger

Create scroll-triggered animations using GSAP and ScrollTrigger libraries.

Community
Advanced
MARUCIEMARUCIE
1

gsap-performance

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

Community
Intermediate