motion

motion

Reference skill for Motion (formerly Framer Motion). For React (motion/react) と vanilla JS (motion) both APIs, animation concepts, and guides are included.

Directory structure

skills/motion/
  SKILL.md
  references/
    react-components/
      README.md
      motion.md
      animate-presence.md
      animate-view.md
      layout-group.md
      lazy-motion.md
      motion-config.md
      reorder.md
    react-hooks/
      README.md
      use-animate.md
      use-scroll.md
      use-spring.md
      use-transform.md
      use-motion-value.md
      use-in-view.md
      use-drag-controls.md
      use-reduced-motion.md
      use-motion-template.md
      use-velocity.md
      use-motion-value-event.md
      use-animation-frame.md
      use-time.md
      use-page-in-view.md
    animation/
      README.md
      overview.md
      transitions.md
      layout.md
      scroll.md
      gestures.md
      drag.md
      svg.md
    vanilla-js/
      README.md
      animate.md
      scroll.md
      in-view.md
      hover.md
      press.md
      stagger.md
      spring.md
      timeline.md
      motion-value.md
    vue/
      README.md
      overview.md
      motion.md
      directive.md
      animate-presence.md
      animate-number.md
      carousel.md
      cursor.md
      radix.md
      layout-animations.md
      layout-group.md
      lazy-motion.md
      motion-config.md
      motion-value.md
      reorder.md
      scroll-animations.md
      ticker.md
      transitions.md
      typewriter.md
      gestures.md
      use-animate.md
      use-animation-frame.md
      use-drag-controls.md
      use-in-view.md
      use-motion-template.md
      use-motion-value-event.md
      use-reduced-motion.md
      use-scroll.md
      use-spring.md
      use-time.md
      use-transform.md
      use-velocity.md
    guides/
      README.md
      installation.md
      accessibility.md
      performance.md
      reduce-bundle-size.md
      troubleshooting.md
      upgrade-guide.md
      migrate-from-gsap.md
  samples/
    README.md
    basic-animation.md
    scroll-animation.md
    gesture-animation.md
    layout-animation.md
    animate-presence.md
  scripts/
    README.md
    install.md

Exploration procedure

Derive the category from the task, and identify the target page in the category's README.md:

1. Find the category corresponding to the task in the mapping table below
2. of that category references/<category>/README.md and identify the target page
3. Read the .md of the relevant page to check the details

How to use the categories:

• React で <motion.div> or hooks → react-components/ react-hooks/
• Use animate / scroll etc. in plain JS that does not depend on React → vanilla-js/
• Learn about the concepts and prop behavior of transition / layout / drag / gesture / SVG / scroll → animation/
• Vue (motion-v) で <motion> component / v-motion directives / composables → vue/
• Installation / accessibility / performance / bundle reduction / troubleshooting / migration → guides/

Task → Category Mapping

Task	Category	Reference README
<motion.div> want to animate elements with	react-components	references/react-components/README.md
Exit animations on mount / unmount (AnimatePresence)	react-components	references/react-components/README.md
Want to use LayoutGroup / LazyMotion / MotionConfig / Reorder / AnimateView	react-components	references/react-components/README.md
Want to use hooks such as useAnimate / useScroll / useSpring / useTransform	react-hooks	references/react-hooks/README.md
Motion values that update values without re-rendering (useMotionValue)	react-hooks	references/react-hooks/README.md
Viewport entry detection (useInView) / Reduced Motion detection	react-hooks	references/react-hooks/README.md
How to specify transition (tween/spring/inertia/stagger)	animation	references/animation/README.md
Position/size/shared element animation via layout / layoutId	animation	references/animation/README.md
Scroll linking / gestures such as hover and tap / drag / SVG paths	animation	references/animation/README.md
Want to use animate / scroll / inView in plain JS independent of React	vanilla-js	references/vanilla-js/README.md
hover / press / stagger / spring / timeline / motionValue (vanilla)	vanilla-js	references/vanilla-js/README.md
Vue で <motion> / v-motion directives / composables	vue	references/vue/README.md
Want to use Motion+ exclusive components in Vue (Carousel, Cursor, Ticker, Typewriter, AnimateNumber)	vue	references/vue/README.md
Installation, accessibility, performance, bundle reduction, troubleshooting	guides	references/guides/README.md
Migration/upgrade from Framer Motion / GSAP	guides	references/guides/README.md
Want to know typical usage	samples	samples/README.md
Want to know installation and import methods	scripts	scripts/README.md