skills.rest
HoussamMrabet
HoussamMrabetCOMMUNITY
Explore all skills by this author →
Website𝕏@MrabetHoussamGitHub

gsap-performance

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? GSAP animations can cause jank, dropped frames, and layout thrashing when they 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 running at 60fps. ## Core Features & Use Cases - Compositor-Friendly Properties: Guides you to animate 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 animating many elements, and will-change usage for layer promotion. - ScrollTrigger Tuning: Explains pin promotion, scrub values, and debounced ScrollTrigger.refresh() calls to reduce scroll-related work. - Use Case: A page with a mouse-follower element and a long staggered list stutters on low-end devices. Apply this Skill to switch to quickTo(), replace manual delays with stagger, and clean up off-screen tweens to restore smooth playback. ## Quick Start Review my GSAP animation code and optimize it for 60fps performance using transforms, quickTo, and proper cleanup.

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 animating width, height, top, left, margin, or padding, which trigger layout and cause jank.

How to animate a mouse follower smoothly with GSAP?▼

Use gsap.quickTo() for x and y instead of creating a new tween on every mousemove event. It reuses a single tween instance, which is far more efficient for frequently updated properties.

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 scroll animation stutter?▼

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

When should I use stagger instead of multiple tweens?▼

Use stagger whenever many elements share the same animation. It is more efficient than creating separate tweens with manual delays and keeps the code simpler.

Related Skills

Explore More Software Engineering Skills→
eryckassiseryckassis

gsap-core

Animate web UI elements with GSAP core tween methods.

Community
Intermediate
pradeepmoulipradeepmouli

axiom-display-performance

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

Community
Advanced
fyunusafyunusa

gsap-scrolltrigger

Implement GSAP and ScrollTrigger animations for scroll-driven web storytelling.

Community
Advanced
fengshao1227fengshao1227
5.9k

animate

Adds purposeful animations, micro-interactions, and motion effects to frontend features.

Community
Intermediate