skills.rest
aungpwint
aungpwintCOMMUNITY
Explore all skills by this author →
GitHub

gsap-performance

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

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

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 excessive tweens. This Skill provides concrete rules for keeping animations on the compositor thread and maintaining 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: 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-related work. - Use Case: When a user reports a laggy scroll-driven animation or a janky mouse-follower effect, apply these rules to replace layout-triggering properties with transforms and consolidate tweens. ## Quick Start Review my GSAP animation code and optimize it for smooth 60fps performance.

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 transform properties (x, y, scale, rotation) and opacity, which stay on the compositor and avoid layout. Avoid animating width, height, top, left, margin, or padding, since these 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 will actually animate. Setting it on every element wastes memory and compositor resources without benefit.

When should I call ScrollTrigger.refresh()?▼

Call ScrollTrigger.refresh() only when the layout actually changes, such as after content loads. Avoid calling it on every resize, and debounce it when possible to reduce recalculation work.

Why does my GSAP animation lag with many elements?▼

Lag often comes from creating hundreds of simultaneous tweens or animating layout-heavy properties. Use stagger instead of separate tweens, animate only visible items, and consider virtualization for long lists.

Related Skills

Explore More Software Engineering Skills→
greensockgreensock
13.3k

gsap-timeline

Coordinate complex animations using the GSAP timeline API.

Official
Advanced
SteveChandlerSteveChandler
1

optimize

Diagnose and fix web performance issues across loading, rendering, animations, and bundle size.

Community
Intermediate
kartojalkartojal
11

gsap-performance

Optimize GSAP animations to reduce jank and achieve smooth 60fps.

Community
Intermediate
SsrrbSsrrb

animate

Adds purposeful animations and micro-interactions to frontend features using CSS and JavaScript.

Community
Intermediate