Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →athevon/framer-motion
Framer Motion / Motion sub-skill - AnimatePresence, layout animations, gestures, motion values.
Passed 22 of 23 test cases with the skill, and 18 of 23 without it.
and 2 more in the full report
4 fixed18 passed either way1 still failing0 broke
Tokens, turns and time describe resource use, not a dollar price.
This benchmark measured an earlier version of the skill.
A newer attempt on gemini-3.6-flash on 10/3/2026 did not produce a publishable comparison (not comparable). The snapshot above is the previously measured run.
One of 4 test cases the skill fixed. Same model, same prompt, with and without the skill.
We have dynamic card containers in React that change dimensions during layout recalculation. We want to prevent image stretching by keeping the original width-to-height ratio intact throughout the layout transition. What layout prop setting accomplishes this?
| Checked | Without skill | With skill |
|---|---|---|
| Specifies layout="preserve-aspect" on the animated container element. | Missed | Passed |
The instructions your model reads when the skill loads.
Version-sensitive. Every API name, SDK gate and browser-support claim below was verified on 2026-09-08 against primary sources. What against, and when, is in
_jutsu/VERSIONS.md. If that date is old, re-verify before acting on a version number.
Two package names, one library. Framer Motion was renamed to Motion.
motionandframer-motionboth publish the same version (13.2.0 as of 2026-09-08):motiondeclares"framer-motion": "^13.2.0"as a dependency andmotion/reactre-exports it. Neither is broken, andframer-motionis still the one most installed projects have.Read
package.jsonand follow what is there. Do not migrate a project from one to the other unless the user asks - that is Iron Rule 8 incast/ 10 inpaint.
In package.jsonImport from Install line motion"motion/react"npm install motionframer-motion"framer-motion"npm install framer-motionboth whichever the file you are editing already imports; say the project is mid-migration - Every API in this skill is identical across the two names at v13. Where a symbol is newer than v11, it is flagged inline. Peers:
react/react-dom^18 || ^19.
| Criteria | Framer Motion | GSAP | Native CSS |
|---|---|---|---|
| Layout animations | Excellent (layoutId) | Manual | Impossible |
| Exit animations | AnimatePresence | Timeline reverse | Limited (display) |
| Gestures (drag, hover) | Native, declarative | Draggable plugin | Basic |
| Scroll-driven | useScroll + useTransform | ScrollTrigger (more powerful) | scroll-timeline |
| Complex orchestration | Variants + propagation | Timeline (more flexible) | @keyframes |
| Bundle size | ~50kb tree-shaken | ~30kb core | 0kb |
| React integration | Native, component-first | Refs + useGSAP | className toggle |
Rule: Framer Motion for React UI interactions (modals, toasts, reorder, shared layout). GSAP for complex timelines, cinematic scroll-driven, SVG morphing.
test cases passed, vs 18 / 23 without
Published skills whose descriptions closely match this one, with their headline benchmark lift.
More skills from the same source and nearby in the registry, with their headline benchmark lift.