gsap-performance
Optimize GSAP animations for smooth 60fps by favoring transforms
by greensockFree
Description
gsap-performance is the official GreenSock skill for making GSAP animations run smoothly at 60 frames per second. It applies when you are optimizing GSAP animations, reducing layout and paint cost, or dealing with jank, the stutter that shows up when motion is heavy. Its central rule is to animate transforms and opacity instead of layout properties. Animating transforms, meaning x, y, scaleX, scaleY, rotation, rotationX, rotationY, skewX and skewY, along with opacity, keeps the work on the compositor and avoids most layout and paint. The skill lists x, y, scale, rotation and opacity as the properties to prefer, and it warns against animating width, height, top, left, margin and padding when a transform can achieve the same effect. GSAP's x and y use translate transforms by default, so the skill recommends them over left and top for movement. It also has a section on will-change. For related work it points to gsap-core for transforms and autoAlpha, gsap-timeline for sequencing, and gsap-scrolltrigger for ScrollTrigger performance. It is installed with npx skills from the greensock/gsap-skills repository, and its security audits all pass.…
Highlights
- Animate transform and opacity instead of layout properties
- Warnings for width, height, top, left, margin and padding
- GSAP x and y use transforms by default
- Guidance on will-change
- Points to gsap-core, gsap-timeline and gsap-scrolltrigger
Ratings & Reviews
No ratings yet
Be the first to rate gsap-performance.
People also visit
gsap-utils
Pure utility functions for math, value mapping, randomization, array handling
gsap-frameworks
GSAP animation setup for Vue, Svelte, Nuxt, and other component frameworks
fixing-motion-performance
Audit and fix animation performance issues including layout thrashing
benchmark-optimization-loop
Convert 'make it faster' requests into a bounded measured optimization loop
gsap-performance FAQ
What does the skill cover?
Optimizing GSAP animations for smooth 60 frames per second, reducing layout and paint cost, and fixing jank.
Which properties should I animate?
x, y, scale, rotation and opacity. The skill says to avoid width, height, top, left, margin and padding when a transform can do the job.
Why use x and y instead of left and top?
GSAP's x and y use transforms by default, which the skill recommends for moving elements.
Does it cover ScrollTrigger?
Not in full. For ScrollTrigger performance it points to the gsap-scrolltrigger skill.
How do I install it?
Run npx skills add https://github.com/greensock/gsap-skills --skill gsap-performance.
What do the security audits show?
Gen Agent Trust Hub, Socket and Snyk all pass.
What are the best gsap-performance alternatives?
Popular alternatives to gsap-performance include gsap-utils, hyperframes-animation and gsap-frameworks. See all gsap-performance alternatives