skills.rest
brunoolf
brunoolfCOMMUNITY
Explore all skills by this author →
GitHub

gsap-performance

Optimizes GSAP animations for 60fps by preferring transforms, batching updates, and reducing layout thrashing.

Updated Aug 12, 2026
Search Tags:#frontend#gsap#scrolltrigger#60fps#layout thrashing#will-change#animation performance
One-click install
npx skills add https://github.com/brunoolf/frontend-craft --skill gsap-performance-brunoolf
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gsap-performance
Source: https://github.com/brunoolf/frontend-craft/tree/main/skills/gsap-performance
Command: npx skills add https://github.com/brunoolf/frontend-craft --skill gsap-performance-brunoolf

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires gsap.

What problem does it solve? GSAP animations can cause jank, dropped frames, and poor scroll performance when they animate layout-heavy properties or create excessive tweens. This Skill provides the rules and patterns to keep animations on the compositor thread at a smooth 60fps. ## Core Features & Use Cases - Compositor-Friendly Properties: Enforces animating transform and opacity (x, y, scale, rotation) instead of layout-triggering properties like width, height, top, and left. - Efficient Update Patterns: Covers gsap.quickTo() for frequently updated values like mouse followers, stagger for lists, and correct will-change usage. - ScrollTrigger Tuning: Guidance on pin promotion, scrub values, debounced ScrollTrigger.refresh() calls, and cleaning up off-screen animations. - Use Case: A page with scroll-driven animations stutters on mobile. Apply this Skill to replace left/top animations with x/y transforms, add will-change only to animating elements, and debounce ScrollTrigger.refresh() to restore smooth scrolling. ## Quick Start Review my GSAP animation code and optimize it for smooth 60fps performance on mobile devices.

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 and opacity properties (x, y, scale, rotation) so work stays on the compositor thread. Avoid width, height, top, left, margin, and padding, which trigger layout and cause jank.

How to optimize GSAP mouse follower animations?▼

Use gsap.quickTo() for frequently updated properties like mouse-follower x and y positions. It reuses a single tween instead of 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 actually animate, as a hint for layer promotion. 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 calling ScrollTrigger.refresh() on every resize or animating layout properties. Debounce refresh calls, use a small scrub value like scrub: 1, and pin only what is needed.

What GSAP properties should I avoid animating for performance?▼

Avoid animating width, height, top, left, margin, and padding because they trigger layout recalculation. Use x and y (which map to transforms) and scale to achieve the same visual movement on the compositor.

Related Skills

Explore More Software Engineering Skills→
polaroidkiddpolaroidkidd

gsap-core

Provide a framework-agnostic GSAP core API for tweens, timelines, and scroll interactions.

Community
Intermediate
pradeepmoulipradeepmouli

axiom-display-performance

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

Community
Advanced
Ritik-Sharma1Ritik-Sharma1

fixing-motion-performance

Audit and fix animation performance issues in CSS and JavaScript UI code.

Community
Advanced
arthtyagiarthtyagi
1

web-animation-design

Design natural web motion for UI elements with easing and reduced-motion support.

Community
Advanced