Gsap Performance Skill Security Audit
What the author says it does (original text)
Official GSAP skill for performance — prefer transforms, avoid layout thrashing, will-change, batching. Use when optimizing GSAP animations, reducing jank, or when the user asks about animation performance, FPS, or smooth 60fps.
No obvious risks found in this check
- Files checked
- 1
- Risks found
- 0
Inside this skill
This Skill is a GSAP animation-performance guide that recommends transform and opacity over properties that repeatedly trigger layout work.
View source
Animating **transform** (`x`, `y`, `scaleX`, `scaleY`, `rotation`, `rotationX`, `rotationY`, `skewX`, `skewY`) and **opacity** keeps work on the compositor and avoids layout and most paint. Avoid animating layout-heavy properties when a transform can achieve the same effect.- ✅ Prefer: **x**, **y**, **scale**, **rotation**, **opacity**.- ❌ Avoid when possible: **width**, **height**, **top**, **left**, **margin**, **padding** (they trigger layout and can cause jank).It recommends batching DOM reads and writes and limiting simultaneous animations to reduce layout thrashing and device load.
View source
GSAP batches updates internally. When mixing GSAP with direct DOM reads/writes or layout-dependent code, avoid interleaving reads and writes in a way that causes repeated layout thrashing. Prefer doing all reads first, then all writes (or let GSAP handle the writes in one go).- Use **stagger** instead of many separate tweens with manual delays when the animation is the same; it’s more efficient.- For long lists, consider **virtualization** or animating only visible items; avoid creating hundreds of simultaneous tweens if it causes jank.- Reuse timelines where possible; avoid creating new timelines every frame.The JavaScript is an example that registers a mouse-move listener on a specified container and passes pointer coordinates to two reusable GSAP tweens. No network transmission, credential access, or file operation is visible.
View source
```javascriptlet xTo = gsap.quickTo("#id", "x", { duration: 0.4, ease: "power3" }), yTo = gsap.quickTo("#id", "y", { duration: 0.4, ease: "power3" });document.querySelector("#container").addEventListener("mousemove", (e) => { xTo(e.pageX); yTo(e.pageY);});```The Skill explicitly limits will-change to elements that actually animate and calls for cleaning up unused tweens and ScrollTriggers to avoid continuing resource use and correctness problems.
View source
- ✅ Animate **transform** and **opacity**; use **will-change** in CSS only on elements that animate.- ✅ Use **stagger** instead of many separate tweens with manual delays when the animation is the same.- ✅ Use **gsap.quickTo()** for frequently updated properties (e.g. mouse followers).- ✅ Clean up or kill off-screen animations; call **ScrollTrigger.refresh()** when layout changes, debounced when possible.- ❌ Animate **width**/ **height**/ **top**/ **left** for movement when **x**/ **y**/ **scale** can achieve the same look.- ❌ Set **will-change** or **force3D** on every element “just in case”; use for elements that are actually animating.- ❌ Create hundreds of overlapping tweens or ScrollTriggers without testing on low-end devices.- ❌ Ignore cleanup; stray tweens and ScrollTriggers keep running and can hurt performance and correctness.Files and check records1 files
Coverage and gaps
Content covered in each file
These are the source ranges included in this check, not a guarantee that every issue has been resolved.
SKILL.mdFull text included
This report is for the version above. We read the available code and instructions without running the skill or checking extra packages it installs. This is not a promise of safety: a different version or setup may behave differently.
SKILL.mdInstructions
- Lines read
- 80
- File checksum (to compare versions)
- 7d91fee4dc4c9439851d6e4ead7cce1b91dd9fec1564e0f3cb00e328fd70ec5b