Installs into .claude/skills of the current project.
Are you the author of Motion Framer?
Add the live security badge to your README. It updates with every re-scan.
[](https://www.skillsdirectory.com/skills/skeletorflet-motion-framer)
---
name: motion-framer
description: Motion (formerly Framer Motion) — declarative animation library for React with layout animations, gestures, and spring physics.
---
### motion components
`<motion.div>`, `<motion.span>`, etc. Props: `initial`, `animate`, `exit`, `transition`. Variants for named states. Spring defaults for natural motion.
### layout animations
`layout` prop auto-animates position/size changes. `layoutId` shared between elements for smooth morphing (magic motion). `LayoutGroup` for coordinating sibling animations.
### AnimatePresence
Wrap conditional mounts for enter/exit animations. `mode="wait"` for sequential. `mode="popLayout"` for layout shift animations. `onExitComplete` callback.
### gestures
`whileHover`, `whileTap`, `whileDrag`, `whileFocus`, `whileInView`. `drag="x"` for axis-locked drag. `dragConstraints` for boundaries. `onDragEnd` for callbacks.
### variants
Named animation objects. `variants={{ open: { opacity: 1 }, closed: { opacity: 0 } }}`. Pass to `initial`/`animate`/`exit`. Parent variants cascade to children with `transition={{ staggerChildren: 0.1 }}`.
### scroll-triggered
`useInView()` hook. `whileInView` prop. `useScroll()` for scroll progress. `useTransform()` to map scroll to motion values. `useSpring()` for smoothed scroll-driven motion.
### motion values
`useMotionValue(0)` — reactive value driving animations. `useSpring()` wraps it in spring. `useTransform(value, [input], [output])` for mapping. Read via `useMotionValueEvent()`.
### performance
Use `transform` instead of layout properties. Set `will-change` via `style={{ willChange: "transform" }}`. Use `layoutDependency` to limit recalculations. Prefer CSS animations for simple opacity/rotation.
