skills.rest
luce12
luce12COMMUNITY
Explore all skills by this author →
GitHub

gsap-performance

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

1|Updated Aug 6, 2026
Search Tags:#gsap#transforms#ScrollTrigger#60fps#frontend optimization#layout thrashing#animation performance
One-click install
npx skills add https://github.com/luce12/agent-dev-workflow --skill gsap-performance-luce12
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gsap-performance
Source: https://github.com/luce12/agent-dev-workflow/tree/main/toolkits/gsap-performance
Command: npx skills add https://github.com/luce12/agent-dev-workflow --skill gsap-performance-luce12

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? GSAP animations can cause jank, dropped frames, and layout thrashing when developers animate layout-heavy properties or create excessive tweens. This Skill provides concrete rules and patterns to keep animations on the compositor thread and maintain smooth 60fps performance. ## Core Features & Use Cases - Compositor-Friendly Animation: Enforces animating transform and opacity instead of layout-triggering properties like width, height, top, and left. - Efficient Update Patterns: Recommends gsap.quickTo() for frequently updated properties such as mouse followers, and stagger instead of many manual tweens. - ScrollTrigger Optimization: Covers pin promotion, scrub tuning, and debounced ScrollTrigger.refresh() calls to reduce scroll-time work. - Use Case: When a page with scroll-driven animations stutters on mobile, apply this Skill to replace left/top animations with x/y transforms, batch DOM reads and writes, and kill off-screen tweens. ## Quick Start Optimize my GSAP scroll animations that are janky on mobile by applying the gsap-performance best practices.

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 and avoid layout and paint. Add will-change: transform in CSS to elements that will animate, and avoid animating width, height, top, or left.

What is the best way to animate a mouse follower in GSAP?▼

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, which is significantly more efficient.

Should I use stagger or multiple tweens for animating lists?▼

Use stagger instead of many separate tweens with manual delays when the animation is the same across elements. For long lists, consider virtualization or animating only visible items to avoid hundreds of simultaneous tweens.

Why does my ScrollTrigger animation cause jank on scroll?▼

Jank often comes from excessive pinning, calling ScrollTrigger.refresh() on every resize, or animating layout properties. Pin only what is needed, use a small scrub value, and call refresh() only when layout actually changes, debounced when possible.

When should I avoid using will-change in CSS animations?▼

Avoid setting will-change or force3D on every element just in case, since each promoted layer consumes memory. Apply will-change: transform only to elements that are actually animating.

Related Skills

Explore More Software Engineering Skills→
greensockgreensock
13.3k

gsap-timeline

Coordinate complex animations using the GSAP timeline API.

Official
Advanced
ananddtyagiananddtyagi
688

Comprehensive Testing & Verification

Test Vue.js application functionality with Playwright and enforce evidence-based verification protocols.

Community
Intermediate
hanzoaihanzoai

gsap-scrolltrigger

Link GSAP animations to scroll events with ScrollTrigger.

Official
Advanced
AnglesiteAnglesite
2

animate

Design CSS animations with vanilla CSS custom properties for hover effects, scroll reveals, and page transitions.

Official
Advanced