Individual skill
web-animation-perf
Prevent layout/transition/reflow thrash in JS-driven CSS animations. Use when building or debugging continuous motion (rotation, orbit, parallax, scroll-linked effects, marquee, carousels) and when symptoms appear like jank, stutter, lag, animation drift, ghosting, "elements collapsing toward center", "going slow", "should we use canvas?", or when mixing `setInterval`/React state with CSS `transition`.
web-animation-perf/SKILL.md
Source commit 1acf58f08cca24b764a4352a6c30fed1f7fb9fb6
What was checked
- Matches the observed repository HEAD
- Yes
- Scanner rules are current
- No
- Repository scan complete
- No
- Skill scan complete
- No
- Observed behavior
- Not checked yet
- Last checked
- Nov 7, 2026
These are observations at the recorded commit, not a guarantee of safety. Review the source before running it.
Install this skill
Choose an agent in your Stack or copy a command below. Commands fetch the pinned commit and copy only this skill directory. Existing destinations are refused. Copying a command does not install anything.
An install command is unavailable: current rules, complete repository and skill scans, an eligible behavior level and a permitted license are required.
Repository context
- Repository stars (not skill ratings)
- 197
- Repository last updated
- Nov 9, 2026
- License
- MIT
Observed agent integration: No specific integration evidence. Standard SKILL.md installation does not imply verified compatibility.
- testing Derived category
- engineering Derived category
- engineering-web Derived category
Files and excerpt
File metadata and permitted, redacted excerpts come from the recorded scan. Source links are pinned to that commit.
Browse files
Read excerpt
# Web Animation Performance
Guidance for writing smooth, GPU-accelerated animations on the web. Most jank comes from three avoidable mistakes; the rest is diagnostic technique.
## The Three Cardinal Rules
### 1. Never combine `transition: all <duration>` with JS that updates the same property every frame
This is the single most common animation bug. If JS updates `left`/`top`/`transform` on every tick AND the element has `transition-all duration-700` (or similar), CSS will linearly interpolate between every pair of successive JS values over the transition duration. For non-linear motion (orbit, arc, easing curve) the linear chord cuts across the intended path — e.g., rotating nodes appear to drift inward toward the center, parallax elements ghost-trail, scroll-linked effects lag noticeably behind the scroll.
Pick exactly one driver:
- **Pure CSS**: `@keyframes` + `animation: spin 8s linear infinite` and let the browser handle it.
- **Pure JS**: set the *final* position every frame; no `transition` on that property. Use a separate, narrower `transition` only for state changes (e.g., active/inactive scale and color).