Motion

motion

Motion (旧 Framer Motion) のリファレンススキル。React 向け (motion/react) と vanilla JS (motion) の両 API、アニメーション概念、ガイドを収録する。

ディレクトリ構成

skills/motion/
  SKILL.md
  references/
    react-components/
      README.md
      motion.md
      animate-presence.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
    guides/
      README.md
      installation.md
      accessibility.md
      performance.md
      reduce-bundle-size.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

探索手順

タスクからカテゴリを引き、カテゴリの README.md で目的のページを特定する:

1. 下記マッピング表でタスクに対応するカテゴリを探す 2. そのカテゴリの references/<category>/README.md を参照して目的のページを特定する 3. 該当ページの .md を Read して詳細を確認する

カテゴリの使い分け:

• React で <motion.div> やフックを使う → react-components/ react-hooks/
• React に依存しない素の JS で animate / scroll などを使う → vanilla-js/
• transition / layout / drag / gesture / SVG / scroll の概念や prop の挙動を知る → animation/
• インストール / アクセシビリティ / パフォーマンス / バンドル削減 / 移行 → guides/

タスク → カテゴリ マッピング

Drag

The drag prop makes an element draggable, with constraints, elasticity, momentum, and imperative control via useDragControls.

Signature / Usage

<motion.div drag />        // both axes
<motion.div drag="x" />    // horizontal only
<motion.div drag="y" />    // vertical only

Props

Constraints (ref-based)

const constraintsRef = useRef(null)

<motion.div ref={constraintsRef}>
  <motion.div drag dragConstraints={constraintsRef} dragElastic={0.1} />
</motion.div>

Event info

function onDrag(event, info) {
  info.point     // pointer coordinates
  info.delta     // distance since last event
  info.offset    // distance from drag origin
  info.velocity  // current pointer velocity
}

useDragControls (imperative start)

import { motion, useDragControls } from "motion/react"

function Scrubber() {
  const dragControls = useDragControls()
  return (
    <>
      <div onPointerDown={(e) => dragControls.start(e, { snapToCursor: true })} />
      <motion.div drag="x" dragControls={dragControls} dragListener={false} />
    </>
  )
}

Notes

• Set dragMomentum={false} to stop without inertia.
• Snap-to-grid: use dragTransition={{ power: 0, modifyTarget: t => Math.round(t / 50) * 50 }}.
• Set draggable={false} on child <img> elements to avoid the browser ghost image.
• Pair dragControls with dragListener={false} to start drag from a separate handle.

Related

• gestures.md
• transitions.md
• svg.md

Gestures

Animate and respond to hover, tap/press, focus, and pan interactions via while* props and event handlers.

Hover

<motion.a
  whileHover={{ scale: 1.2 }}
  onHoverStart={(event) => {}}
  onHoverEnd={(event) => {}}
/>

Tap / Press

<motion.button whileTap={{ scale: 0.9, rotate: 3 }} />

Focus

<motion.a href="#" whileFocus={{ scale: 1.2 }} />

Pan

<motion.div
  onPan={(event, info) => console.log(info.offset.x)}
  onPanStart={(event, info) => {}}
  onPanEnd={(event, info) => {}}
/>

info is a PanInfo with point, delta, offset, velocity.

Notes

• Tap is keyboard-accessible automatically: Enter triggers onTapStart/whileTap, release triggers onTap, losing focus before release triggers onTapCancel.
• Tap auto-cancels if the pointer moves more than 3px inside a draggable parent.
• Pan requires disabling touch scrolling on the relevant axis via the touch-action CSS rule for touch input.
• Pan has no associated while* animation prop.
• Block parent gestures: use -Capture React props + e.stopPropagation(), or propagate={{ tap: false }} on the motion child.

Related

• drag.md
• overview.md
• scroll.md

Layout Animations

The layout prop animates size/position changes automatically using CSS transform; layoutId enables shared-element transitions between components.

Signature / Usage

// Animate any layout change (size + position)
<motion.div layout />

// Animate position only (avoids stretching of aspect-changing content)
<motion.div layout="position" />

// Shared-element transition: crossfade between two elements
<motion.div layoutId="underline" />

Props

LayoutGroup

Synchronizes layout animations across components that may not re-render together.

import { LayoutGroup, motion } from "motion/react"

<LayoutGroup>
  <Item />
  <Item />
</LayoutGroup>

Transition Customization

Layout uses a dedicated layout transition key:

<motion.div
  layout
  transition={{
    ease: "linear",
    layout: { duration: 0.3 },
  }}
/>

Notes

• All layout animations run via the CSS transform property for performance (no paint-triggering width/height changes).
• Stretched/distorted children: apply layout to child elements for scale correction.
• Set border-radius and box-shadow through the style prop so they are scale-corrected.
• Inline elements won't animate; ensure display is not inline.
• Combine with AnimatePresence + layoutId for smooth enter/exit shared transitions.
• Use scrollbar-gutter: stable to prevent scrollbar-driven layout jumps.

Related

• overview.md
• transitions.md

Animation Overview

How Motion for React animates elements via the motion component, animate/initial/exit props, keyframes, variants, and AnimatePresence.

Signature / Usage

import { motion } from "motion/react"

// Animate toward target values whenever `animate` changes
<motion.div
  initial={{ opacity: 0, scale: 0 }}
  animate={{ opacity: 1, scale: 1 }}
/>

// Skip the enter animation
<motion.div initial={false} animate={{ y: 100 }} />

Props

Keyframes

// Sequence of values
<motion.div animate={{ x: [0, 100, 0] }} />

// `null` = current value (natural interruption)
<motion.div animate={{ x: [null, 100, 0] }} />

// Custom keyframe timing (0-1 progress) via `times`
<motion.circle
  animate={{ cx: [null, 100, 200] }}
  transition={{ duration: 3, times: [0, 0.2, 1] }}
/>

Variants

const list = { visible: { opacity: 1 }, hidden: { opacity: 0 } }
const item = {
  visible: { opacity: 1, x: 0 },
  hidden: { opacity: 0, x: -100 },
}

// Parent label propagates to children automatically
<motion.ul variants={list} initial="hidden" animate="visible">
  <motion.li variants={item} />
  <motion.li variants={item} />
</motion.ul>

Dynamic variants resolve per element via custom:

const variants = {
  visible: (i) => ({ opacity: 1, transition: { delay: i * 0.3 } }),
}
items.map((item, i) => <motion.div custom={i} variants={variants} />)

AnimatePresence

Keeps exiting elements in the DOM until their exit animation finishes. Children need a stable key.

<AnimatePresence>
  {isVisible && (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
    />
  )}
</AnimatePresence>

Animatable Values

• Independent transforms: x, y, z, scale/scaleX/scaleY, rotate/rotateX/rotateY/rotateZ, skewX/skewY, transformPerspective.
• Any CSS value: opacity, filter, background-image, mask-image, box-shadow.
• Colors: hex, rgba, hsla, oklch, oklab, color-mix.
• Value-type conversion: width/height to/from "auto", units ("100%" <-> "calc(...)").
• CSS variables can be both animated (--rotate) and used as targets (var(--action-bg)).

Notes

• Import from motion/react.
• animate re-runs automatically on prop change; no manual trigger needed.
• Use MotionConfig to set default transitions for a subtree.
• useAnimate provides imperative sequencing/timeline control for non-motion elements.

Related

• transitions.md
• gestures.md
• scroll.md
• layout.md

Animation

Scroll Animations

Two approaches: scroll-linked animations driven by useScroll motion values, and scroll-triggered animations via the whileInView prop.

Scroll-Linked: useScroll

import { useScroll, motion } from "motion/react"

function Progress() {
  const { scrollYProgress } = useScroll()
  return <motion.div style={{ scaleX: scrollYProgress, originX: 0 }} />
}

useScroll return values

useScroll options

Map scroll progress to CSS values with useTransform:

import { useTransform } from "motion/react"

const filter = useTransform(scrollYProgress, [0, 1], ["blur(0px)", "blur(10px)"])
return <motion.div style={{ filter }} />

Scroll-Triggered: whileInView

<motion.div
  initial={{ opacity: 0 }}
  whileInView={{ opacity: 1 }}
  viewport={{ once: true }}
/>

viewport options

useInView (state, non-motion elements)

import { useInView } from "motion/react"

const ref = useRef(null)
const isInView = useInView(ref)

Notes

• useScroll returns MotionValues; pass them to style (or useTransform) — do not read them in render.
• whileInView is best for one-shot reveal animations; useScroll is best for parallax/progress bars and scroll scrubbing.
• useInView sets React state and works with plain (non-motion) elements.

Related

• overview.md
• transitions.md

SVG Animation

Motion provides a motion component for every SVG element, enabling line drawing, path morphing, attribute animation, and viewBox animation.

Line Drawing

<motion.path
  d={d}
  initial={{ pathLength: 0 }}
  animate={{ pathLength: 1 }}
/>

Supported elements: path, circle, ellipse, line, polygon, polyline, rect.

Path Morphing

Animate the d attribute between similar paths:

<motion.path d="M 0,0 l 0,10 l 10,10" animate={{ d: "M 0,0 l 10,0 l 10,10" }} />

Paths must have identical numbers and types of instructions. Use a library like Flubber for dissimilar interpolation.

Animating viewBox

// Pan
<motion.svg viewBox="0 0 200 200" animate={{ viewBox: "100 0 200 200" }} />

// Zoom
<motion.svg viewBox="0 0 200 200" animate={{ viewBox: "-100 -100 300 300" }} />

Attributes & Transforms

// Animate SVG attributes directly
<motion.circle cx={0} animate={{ cx: 50 }} />

// Use attribute (not CSS transform) shorthand
<motion.rect attrX={0} animate={{ attrX: 100 }} />

// Restore native SVG transform origin (top-left)
<motion.rect style={{ rotate: 90, transformBox: "view-box" }} />

Drag with scaled viewBox

import { motion, MotionConfig, transformViewBoxPoint } from "motion/react"

function Component() {
  const ref = useRef(null)
  return (
    <MotionConfig transformPagePoint={transformViewBoxPoint(ref)}>
      <svg ref={ref} viewBox="0 0 100 100" style={{ width: 200, height: 200 }}>
        <motion.circle drag />
      </svg>
    </MotionConfig>
  )
}

Notes

• By default Motion sets SVG transform origin to the element center (matching CSS); use transformBox: "view-box" to restore native behavior.
• MotionValues pass through both attribute targets (cx={cx}) and style (style={{ opacity }}).
• Components available: motion.svg, motion.path, motion.circle, motion.ellipse, motion.rect, motion.line, motion.polygon, motion.polyline, and filter primitives like motion.feTurbulence, motion.feDisplacementMap.

Related

• overview.md
• transitions.md
• drag.md

Transitions

The transition prop controls timing, easing, spring physics, repetition, and orchestration of animations.

Signature / Usage

<motion.div
  animate={{ x: 100 }}
  transition={{ ease: "easeOut", duration: 2, delay: 0.5 }}
/>

Value-specific transitions and a default fallback:

<motion.li
  animate={{
    x: 0,
    opacity: 1,
    transition: {
      default: { type: "spring" },
      opacity: { ease: "linear" },
    },
  }}
/>

Tween Options (duration-based, default for most values)

Spring Options (type: "spring", default for transforms/layout)

Inertia Options (type: "inertia", used by drag momentum)

Orchestration / Repeat

import { stagger } from "motion/react"

const container = {
  show: {
    opacity: 1,
    transition: {
      delayChildren: 0.5,
      staggerChildren: stagger(0.1, { from: "last" }),
    },
  },
}

Notes

• Spring is the default for x, y, scale, rotate, and layout animations; tween is the default for most other values.
• Higher-specificity transitions replace inherited defaults; add inherit: true to merge with a parent MotionConfig transition.
• path: arc() curves motion-value movement along an arc instead of a straight line.

Related

• overview.md
• layout.md
• drag.md

Accessibility

Respect the OS "Reduced Motion" setting to avoid motion sickness and usability issues. Motion provides MotionConfig and the useReducedMotion hook.

Signature / Usage

MotionConfig reducedMotion

Automatically disables transform and layout animations while preserving opacity and color changes.

import { MotionConfig } from "motion/react"

export function App({ children }) {
  return (
    <MotionConfig reducedMotion="user">
      {children}
    </MotionConfig>
  )
}

useReducedMotion hook

import { useReducedMotion } from "motion/react"

function Sidebar({ isOpen }) {
  const shouldReduceMotion = useReducedMotion()
  const animate = shouldReduceMotion
    ? { opacity: isOpen ? 1 : 0 }
    : { x: isOpen ? 0 : "-100%" }
  return <motion.div animate={animate} />
}

Options / Props

Notes

• Prefer animating opacity instead of transform when reduced motion is active.
• Use useReducedMotion to disable auto-playing background video and parallax effects for sensitive users.
• reducedMotion="user" keeps opacity/color transitions; only transform and layout animations are disabled.

Related

• Performance

Installation

Install Motion for React and import the motion component. Requires React 18.2 or higher.

Signature / Usage

npm install motion
# or
yarn add motion
# or
pnpm add motion

"use client"
import { motion } from "motion/react"

export default function MyComponent() {
  return <motion.div animate={{ scale: 1.5 }} />
}

CDN (no install)

<script type="module">
  import motion from "https://cdn.jsdelivr.net/npm/motion@latest/react/+esm"
</script>

Notes

• Only compatible with React 18.2 and higher.
• The package is motion; React APIs are imported from motion/react.
• Next.js App Router: add "use client" at the top of files that use motion. Alternatively import from motion/react-client to reduce client-side JavaScript.
• Vite: no special configuration required.

Related

• Reduce bundle size
• Upgrade from Framer Motion

Migrate from GSAP

Motion separates animation values from options into distinct objects and uses declarative timelines, the Web Animations API, and ScrollTimeline for hardware-accelerated, tree-shakeable animations.

Signature / Usage

Basic animation

// GSAP
gsap.to("#box", { duration: 10, rotation: 360 })

// Motion
animate("#box", { rotate: 360 }, { duration: 10 })

Keyframes

// Motion uses array syntax instead of fromTo
animate(".box", { opacity: [0, 0.5] })

Timeline (declarative array)

const timeline = [
  ["#id", { x: 100 }, { duration: 1 }],
  "My label",
  ["#id", { y: 100 }, { duration: 1 }],
]
animate(timeline, options)

React with useAnimate

const [scope, animate] = useAnimate()
useEffect(() => {
  animate(scope.current, { rotate: 360 }, { duration: 10 })
}, [])

Options / Props

API equivalents:

Notes

• Motion separates values ({ rotate: 360 }) from options ({ duration: 10 }) into two objects.
• inView() uses Intersection Observer (lower CPU than frame-based detection); scroll() enables hardware-accelerated scroll animations.
• Bundle size: mini animate ~2.3kb (90% smaller than GSAP), scroll ~75% of GSAP's, full animate ~18kb. Tree-shaking ships only imported functions.
• Hardware acceleration applies to transform, filter, opacity via the Web Animations API and ScrollTimeline.
• Limitations: no gsap.from() equivalent, no mutable option API, layout animations are React-only (not in the JS API), onUpdate restricted to single-value animations.

Related

• Upgrade from Framer Motion
• Performance

Performance

Animate cheap, compositor-only properties (transform, opacity) to keep animations hardware-accelerated and smooth even when the main JS thread is busy.

Signature / Usage

The browser updates styles in three steps:

1. Layout — calculate element sizes and positions. 2. Paint — draw the page into graphical layers. 3. Composite — render layers to the viewport.

The best-performing styles trigger only the composite step. transform and opacity operate directly on a layer and are the safest values to animate.

Reduce layer size with will-change

element.style.willChange = "transform"
animate(element, { borderRadius: "50%" })

Prefer compositor-friendly alternatives

// Instead of boxShadow
animate(element, { filter: "drop-shadow(...)" })

// Instead of borderRadius
animate(element, { clipPath: "inset(0 round 50%)" })

Notes

• Cheap (composite only): transform, opacity. Widely hardware-accelerated.
• Emerging compositor support: filter, background-color, clip-path, SVG (Chrome/Firefox).
• Expensive (layout): height, border-width, padding, position — recalculate dimensions of affected elements.
• Expensive (paint): box-shadow, border-radius — avoid layout but require costly repaints.
• At 60fps the browser has ~16.7ms per frame; repaints can exceed 100ms.
• Motion uses the Web Animations API to hardware-accelerate animations when the browser supports it; treat it as progressive enhancement, not a requirement.
• Test on low-powered devices. The value you choose to animate is what you have the most control over.

Related

• Accessibility
• Reduce bundle size

Guides

Reduce Bundle Size

Replace the full motion component (34kb) with the slim m component plus LazyMotion to cut the initial bundle to under 4.6kb, loading animation features on demand.

Signature / Usage

The m component + synchronous features

import * as m from "motion/react-m"
import { LazyMotion, domAnimation } from "motion/react"

function App({ children }) {
  return (
    <LazyMotion features={domAnimation}>
      <m.div animate={{ opacity: 1 }} />
      {children}
    </LazyMotion>
  )
}

Lazy loading (code-splitting)

// features.js
import { domMax } from "motion/react"
export default domMax

import { LazyMotion } from "motion/react"
import * as m from "motion/react-m"

const loadFeatures = () =>
  import("./features.js").then(res => res.default)

function App() {
  return (
    <LazyMotion features={loadFeatures}>
      <m.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} />
    </LazyMotion>
  )
}

Strict mode

<LazyMotion features={domAnimation} strict>
  {/* Throws if motion.div is used instead of m.div */}
</LazyMotion>

Options / Props

Notes

• m works identically to motion but ships without preloaded features (animations, layout, drag).
• domAnimation (+15kb): animations, variants, exit animations, tap/hover/focus gestures.
• domMax (+25kb): everything in domAnimation plus pan/drag and layout animations.
• Lazy loading defers feature code until after the initial render via a dynamic import().

Related

• Installation
• Performance

Upgrade from Framer Motion

Framer Motion was renamed to Motion. Uninstall framer-motion, install motion, and update imports from "framer-motion" to "motion/react".

Signature / Usage

npm uninstall framer-motion
npm install motion

// Before
import { motion } from "framer-motion"

// After
import { motion } from "motion/react"

Notes

Breaking changes by major version:

• 12.0 — No breaking changes in Motion for React (see the JavaScript upgrade guide for vanilla JS changes).
• 11.0 — Multiple MotionValue updates in the same frame exclude intermediate values from velocity calc. Render scheduling moved from synchronous to microtask; Jest tests must await nextFrame() before asserting styles.
• 10.0 — Removed IntersectionObserver fallback for whileInView. Deprecated exitBeforeEnter now throws; use mode="wait".
• 9.0 — Elements with tap listeners receive tabindex="0"; whileFocus mirrors :focus-visible.
• 8.0 — Removed mouse/touch event polyfills. Use onPointerDown instead of onMouseDown / onTouchStart.
• 7.0 — React 18 is the minimum supported version.
• 6.0 — 3D moved to a separate package (framer-motion/three → framer-motion-3d).

Related

• Installation
• Migrate from GSAP

AnimatePresence

Enables exit animations for motion components when they are removed from the React tree, unlocking the exit prop on direct children.

Signature / Usage

import { AnimatePresence, motion } from "motion/react"

;<AnimatePresence>
  {show && (
    <motion.div
      key="modal"
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
    />
  )}
</AnimatePresence>

Detects removal via conditional rendering, key prop changes, or list item changes.

Options / Props

Notes

• All immediate children require unique, stable key props (avoid array indices).
• AnimatePresence must wrap the conditional logic; do not conditionally render AnimatePresence itself.
• Children can read exit state via useIsPresent() and usePresence() hooks.

Related

• motion
• Reorder

LayoutGroup

Groups motion components that might not render together but affect each other's layout, so sibling layout animations stay in sync.

Signature / Usage

import { LayoutGroup } from "motion/react"

function Accordion() {
  return (
    <LayoutGroup>
      <AccordionItem header="Item 1" />
      <AccordionItem header="Item 2" />
    </LayoutGroup>
  )
}

Use when independent components each manage their own state (e.g. accordion items) yet need their layout animations to coordinate.

Options / Props

Notes

• Works with motion components that have the layout prop enabled.
• layoutId is global; supply id to prevent collisions when several LayoutGroups coexist.
• Enables smooth shared element transitions across components with independent state.

Related

• motion
• AnimatePresence

LazyMotion

Reduces bundle size by loading Motion's animation features on demand, cutting the initial bundle from ~34kb to ~4.6kb when paired with the lightweight m component.

Signature / Usage

import { LazyMotion, domAnimation } from "motion/react"
import * as m from "motion/react-m"

export const MyComponent = () => (
  <LazyMotion features={domAnimation}>
    <m.div animate={{ opacity: 1 }} />
  </LazyMotion>
)

Use the m component (motion/react-m) instead of motion inside LazyMotion to gain the code-splitting benefit.

Options / Props

Notes

• Always use m inside LazyMotion; mixing standard motion components undermines the optimization.
• Synchronous feature loading suits smaller subsets; async loading defers initialization until after site hydration.
• domAnimation provides a core feature set; larger feature bundles exist for more capabilities.

Related

• motion
• MotionConfig

MotionConfig

Wrapper that sets configuration defaults (transition, reduced-motion behavior, CSP nonce) for all descendant motion components.

Signature / Usage

import { motion, MotionConfig } from "motion/react"

export const MyComponent = () => (
  <MotionConfig transition={{ duration: 1 }}>
    <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} />
  </MotionConfig>
)

Options / Props

Notes

• A "set it and forget it" way to define animation behavior once at a high level instead of repeating it per component.
• When reduced motion is active, transform and layout animations are disabled while opacity and color animations continue.

Related

• motion
• LazyMotion

motion

Drop-in replacement for HTML and SVG elements that adds animation props running at up to 120fps without triggering React re-renders.

Signature / Usage

import { motion } from "motion/react"

;<motion.div
  initial={{ opacity: 0, x: -100 }}
  animate={{ opacity: 1, x: 0 }}
  whileHover={{ scale: 1.1 }}
  transition={{ duration: 0.5 }}
/>

There is a motion component for every HTML and SVG element (motion.div, motion.span, motion.circle, ...). Wrap custom components with motion.create(Component).

Options / Props

Notes

• Animations bypass React's render cycle, updating via the browser's native animation pipeline.
• Animating transform and opacity offers optimal performance.
• Compatible with server-side rendering.
• For drag gestures on touch devices, disable scrolling with the touch-action CSS rule.

Related

• AnimatePresence
• LayoutGroup
• LazyMotion
• MotionConfig

React Components

Reorder

Drag-to-reorder lists with automatic layout animations. Reorder.Group wraps the list and manages ordering; Reorder.Item represents each draggable element.

Signature / Usage

import { Reorder } from "motion/react"
import { useState } from "react"

function List() {
  const [items, setItems] = useState([0, 1, 2, 3])

  return (
    <Reorder.Group axis="y" values={items} onReorder={setItems}>
      {items.map((item) => (
        <Reorder.Item key={item} value={item}>
          {item}
        </Reorder.Item>
      ))}
    </Reorder.Group>
  )
}

Options / Props

Reorder.Group

Reorder.Item

Notes

• Items automatically animate to new positions when reordered, added, or removed.
• Pair with AnimatePresence for entry/exit effects.
• Lists inside scrollable containers auto-scroll while dragging.
• Dragged items elevate above siblings via z-index; items require non-static positioning.

Related

• motion
• AnimatePresence

react-hooks

useAnimate

Manually start and control animations, scoped to the current React component.

Signature / Usage

import { useAnimate } from "motion/react"
// or, smaller bundle with the mini animate function:
import { useAnimate } from "motion/react-mini"

function Component({ children }) {
  const [scope, animate] = useAnimate()

  useEffect(() => {
    // Selectors are scoped to children of the element holding `scope`
    animate("li", { opacity: 1 })
  }, [])

  return <ul ref={scope}>{children}</ul>
}

Returns a tuple [scope, animate]:

• scope — a ref attached to an HTML/SVG/motion element that establishes the animation boundary.
• animate — a scoped version of the animate() function used to trigger animations.

Notes

• DOM queries passed to animate are automatically limited to children of the scope element.
• All animations created in scope are cleaned up automatically when the component unmounts.
• Can animate the scope element directly or target children via CSS selectors.
• Supports timeline sequences (arrays of animation definitions) for orchestration.

Related

• useInView
• useMotionValue

useAnimationFrame

Run a callback every frame, with elapsed time and delta arguments, using Motion's animation loop.

Signature / Usage

import { useAnimationFrame } from "motion/react"

function Component() {
  const ref = useRef(null)

  useAnimationFrame((time, delta) => {
    ref.current.style.transform = `rotateY(${time}deg)`
  })

  return <div ref={ref} />
}

Options / Props

Notes

• Integrates with Motion's animation loop for optimized performance.
• Runs without triggering React re-renders each frame.
• Pass undefined as the callback to pause (e.g. combined with usePageInView).
• Related to the lower-level frame() scheduler.

Related

• useTime
• usePageInView

useDragControls

Manually initiate and control drag gestures on motion components, as an alternative to automatic drag detection (e.g. starting a drag from a video scrubber click).

Signature / Usage

import { useDragControls } from "motion/react"
import { motion } from "motion/react"

function Component() {
  const controls = useDragControls()

  return (
    <>
      <div onPointerDown={(event) => controls.start(event)} />
      <motion.div drag dragControls={controls} />
    </>
  )
}

Options / Props

controls.start(event, options?) options:

Methods: controls.stop() ends the drag normally; controls.cancel() ends the drag and skips the onDragEnd callback.

Notes

• Set dragListener={false} on the motion component to prevent automatic drag initiation, so dragging only starts via controls.start.

Related

• useMotionValue
• useVelocity

useInView

Lightweight (0.6kb) hook that detects when an element enters or leaves the viewport, enabling scroll-triggered state changes.

Signature / Usage

import { useInView } from "motion/react"

function Component() {
  const ref = useRef(null)
  const isInView = useInView(ref)

  useEffect(() => {
    console.log("Element is in view:", isInView)
  }, [isInView])

  return <div ref={ref} />
}

Returns a boolean: true when the element is inside the viewport, false otherwise.

Options / Props

Notes

• Works with any HTML element via ref.
• margin won't affect cross-origin iframes without an explicit root.
• Combine with useAnimate for enter animations.

Related

• useAnimate
• usePageInView
• useScroll

useMotionTemplate

Create a motion value from a string template containing other motion values, automatically updating whenever any contained motion value changes.

Signature / Usage

import { useMotionTemplate, useMotionValue } from "motion/react"
import { motion } from "motion/react"

function Component() {
  const blur = useMotionValue(10)
  const saturate = useMotionValue(50)
  const filter = useMotionTemplate`blur(${blur}px) saturate(${saturate}%)`

  return <motion.div style={{ filter }} />
}

Uses tagged template literal syntax — interpolate motion values directly into a string.

Notes

• Returns a motion value rendering the template string with the current motion value states.
• Supports mixing static text with multiple dynamic motion values.
• Works seamlessly with style props on motion components (e.g. filter, transform).

Related

• useMotionValue
• useSpring
• useTransform

useMotionValueEvent

Fire events when a motion value changes, with handlers tied to the component lifecycle and cleaned up automatically on unmount.

Signature / Usage

import { useMotionValue, useMotionValueEvent } from "motion/react"

function Component() {
  const x = useMotionValue(0)

  useMotionValueEvent(x, "change", (latest) => {
    console.log("x changed to", latest)
  })

  return null
}

Signature: useMotionValueEvent(motionValue, eventName, callback).

Options / Props

Notes

• Handlers are cleaned up automatically when the component unmounts.
• Wraps the motion value's on() method for convenience.
• For custom cleanup logic, use motionValue.on("change", cb) inside useEffect and return the unsubscribe.

Related

• useMotionValue
• useVelocity

useMotionValue

Create a MotionValue — a composable, signal-like value that updates the DOM directly without triggering React re-renders.

Signature / Usage

import { useMotionValue } from "motion/react"

const x = useMotionValue(0)

x.get()      // 100
x.set(100)   // update without re-rendering React

// Subscribe to changes
const unsubscribe = x.on("change", (latest) => console.log(latest))

// Compose into dependent values
const opacity = useTransform(x, [-200, 0, 200], [0, 1, 0])

return <motion.div style={{ x, opacity }} />

Accepts an initial string or number.

Options / Props

Notes

• Motion values track both state and velocity.
• Synchronize motion across components and compose via useTransform, useSpring, useVelocity.
• Prefer useMotionValueEvent over manual on() in components for automatic cleanup.

Related

• useTransform
• useSpring
• useVelocity
• useMotionValueEvent
• useMotionTemplate

usePageInView

Track document visibility state to pause animations, video, or other work when the user switches tabs and resume on return.

Signature / Usage

import { usePageInView } from "motion/react"

function Component() {
  const videoRef = useRef(null)
  const isInView = usePageInView()

  useEffect(() => {
    const video = videoRef.current
    if (!video) return
    isInView ? video.play() : video.pause()
  }, [isInView])

  return <video ref={videoRef} />
}

Returns a boolean: true when the page is the active browser tab. Defaults to true on the server and the initial client render.

Notes

• Improves performance: reduces CPU usage, extends battery life.
• Pair with useAnimationFrame to pause loops: useAnimationFrame(isInView ? update : undefined).

Related

• useInView
• useAnimationFrame

useReducedMotion

Detect whether the device has the Reduced Motion accessibility setting enabled, reactively re-rendering when it changes.

Signature / Usage

import { useReducedMotion } from "motion/react"
import { motion } from "motion/react"

export function Sidebar({ isOpen }) {
  const shouldReduceMotion = useReducedMotion()
  const closedX = shouldReduceMotion ? 0 : "-100%"

  return (
    <motion.div
      animate={{ opacity: isOpen ? 1 : 0, x: isOpen ? 0 : closedX }}
    />
  )
}

Returns a boolean: true if Reduced Motion is enabled, false otherwise.

Notes

• Reactive: actively responds to changes and re-renders components with the latest setting.
• Use cases: replace motion-sickness-inducing animations with opacity changes, disable video autoplay, turn off parallax.
• Part of Motion's accessibility features for respecting user motion preferences.

Related

• useAnimate

useScroll

Create scroll-linked animations by tracking scroll progress as motion values. Can leverage the browser ScrollTimeline API for hardware acceleration.

Signature / Usage

import { useScroll } from "motion/react"
import { motion } from "motion/react"

// Page scroll progress bar
function ProgressBar() {
  const { scrollYProgress } = useScroll()
  return <motion.div style={{ scaleX: scrollYProgress }} />
}

// Track an element's progress through the viewport
function Section() {
  const ref = useRef(null)
  const { scrollYProgress } = useScroll({ target: ref })
  return <div ref={ref} />
}

Returns four motion values:

• scrollX / scrollY — absolute scroll position in pixels per axis.
• scrollXProgress / scrollYProgress — normalized progress 0–1 within the defined offsets.

Options / Props

Notes

• Offsets accept named edges (start, center, end), percentages, pixels, and viewport units.
• Returned values are motion values, composable with useTransform and useSpring.
• GPU-accelerated when driving opacity, transform, clipPath, or filter.

Related

• useTransform
• useSpring
• useMotionValueEvent

useSpring

Create a motion value that animates to its latest target using spring physics. Can run standalone with manual control or automatically follow another motion value.

Signature / Usage

import { useSpring, useMotionValue } from "motion/react"

// Manual control with a number or unit string
const x = useSpring(0)
const y = useSpring("100vh")

// Track and smooth another motion value (e.g. scroll progress)
const scrollProgress = useMotionValue(0)
const smoothed = useSpring(scrollProgress)

// With spring transition options
const animated = useSpring(0, { stiffness: 300 })

Options / Props

Notes

• .set(value) updates the value and animates to the target with the spring.
• .jump(value) updates immediately without animation.
• Accepts number or unit-type strings (px, %, vh, etc.).
• Useful for "following" patterns: pointer tracking, scroll progress smoothing.

Related

• useMotionValue
• useScroll
• useTransform

useTime

Create a motion value that updates every frame with the elapsed time (ms) since creation. Useful for perpetual animations.

Signature / Usage

import { useTime, useTransform } from "motion/react"
import { motion } from "motion/react"

function Component() {
  const time = useTime()
  const rotate = useTransform(
    time,
    [0, 4000], // for every 4 seconds...
    [0, 360],  // ...rotate 360deg
    { clamp: false }
  )

  return <motion.div style={{ rotate }} />
}

Returns a motion value emitting milliseconds since instantiation, updating once per frame.

Notes

• Creates a new independent motion value on each call.
• Effective for continuous, self-sustaining animations.
• Compose with useTransform and other motion value hooks.
• clamp: false allows values to grow unbounded for infinite loops.

Related

• useTransform
• useAnimationFrame

useTransform

Create a new motion value that transforms the output of one or more motion values. Composable and animatable without triggering React re-renders.

Signature / Usage

import { useTransform } from "motion/react"

// 1. Transform function — reads motion values via .get()
const doubledX = useTransform(() => x.get() * 2)

// 2. Value mapping — map a single value from input to output range
const opacity = useTransform(x, [-200, 0, 200], [0, 1, 0])

// 3. Multiple output values from one input
const { opacity, scale, filter } = useTransform(offset, [100, 600], {
  opacity: [1, 0.4],
  scale: [1, 0.6],
  filter: ["blur(0px)", "blur(10px)"],
})

Options / Props

Notes

• The function form automatically subscribes to motion values read via .get() and recalculates per frame.
• Input ranges must be monotonically increasing or decreasing numbers.
• Output ranges must contain values of the same type (numbers, colors, units, strings).
• Input and output ranges must have equal length.

Related

• useMotionValue
• useScroll
• useSpring

useVelocity

Create a motion value that tracks the velocity of another motion value, enabling velocity-based animations and interactions.

Signature / Usage

import { useMotionValue, useVelocity, useTransform } from "motion/react"
import { motion } from "motion/react"

function Component() {
  const x = useMotionValue(0)
  const xVelocity = useVelocity(x)
  const scale = useTransform(
    xVelocity,
    [-3000, 0, 3000],
    [2, 1, 2],
    { clamp: false }
  )

  return <motion.div drag="x" style={{ x, scale }} />
}

Accepts a numerical motion value; returns a new motion value updating with the source's velocity.

Notes

• Works with any numerical motion value.
• Chainable — pass a velocity value back into useVelocity to compute acceleration.
• Integrates with useMotionValueEvent to listen for velocity changes.
• Useful for drag interactions and scroll-based effects.

Related

• useMotionValue
• useTransform
• useDragControls

animate()

Core function to animate HTML/SVG elements, motion values, single values, or JS objects.

Signature / Usage

import { animate } from "motion"

const box = document.getElementById("box")

const animation = animate(
  box,
  { opacity: 0, x: 100 },
  { duration: 0.5, ease: "easeOut" }
)

animation.pause()
animation.time = 0.25
animation.play()

await animation // resolves on completion

• target: HTML/SVG element(s), CSS selector string, motion value, JS object, or single value.
• values: object of animatable props ({ opacity: 0, x: 100 }), keyframe arrays ({ x: [0, 100, 0] }), or a target value.
• options: transition configuration (see below).

Options / Props

Notes

• Animatable props include CSS styles, independent transforms (x, y, z, rotate, scale), CSS variables ("--rotate"), SVG path props (pathLength), colors, and arbitrary numbers.
• Returns AnimationControls:
• Read-only: duration.
• Read/write: time (seconds), speed (1 = normal, -1 = reverse).
• Methods: play(), pause(), complete(), cancel() (revert to initial), stop() (commit and prevent restart), then(cb).

Related

• scroll
• stagger
• spring
• timeline
• motion-value

hover()

Gesture helper that detects hover start/end, filtering fake touch-emulated hover events.

Signature / Usage

import { hover } from "motion"

hover("button", (element, startEvent) => {
  console.log("hover started")

  // Returned function fires on hover end
  return (endEvent) => {
    console.log("hover ended")
  }
})

// Cancel all handlers
const cancel = hover("a", callback)
cancel()

• element: single Element, array of elements, or CSS selector string.
• callback: (element, startEvent) => void | ((endEvent) => void). Returning a function runs it on hover end.
• Returns a function that cancels all active handlers.

Options / Props

Notes

• Automatically filters touch-emulated fake hover events and manages event listeners.

Related

• press
• animate

inView()

Detects when elements enter the viewport via IntersectionObserver.

Signature / Usage

import { inView, animate } from "motion"

const stop = inView(
  "#carousel li",
  (element, enterInfo) => {
    animate(element, { opacity: 1 })

    // Returned function fires on viewport exit
    return (leaveInfo) => {
      animate(element, { opacity: 0 })
    }
  },
  { root: document.querySelector("#carousel") }
)

stop() // stop detection

• target: selector string, Element, or array of elements.
• callback: (element, info) => void | ((leaveInfo) => void). info is an IntersectionObserverEntry. Returning a function runs it on exit.
• Returns a function that stops detection.

Options / Props

Related

• scroll
• animate

motionValue()

Creates a reactive value that tracks state and velocity of an animated property.

Signature / Usage

import { motionValue, animate } from "motion"

const x = motionValue(0)
const unsubscribe = x.on("change", (latest) => console.log(latest))

animate(x, 100)

• motionValue(initialValue) returns a MotionValue.
• Starting a new animation on the same value automatically ends the previous one.

Options / Props

Notes

• Events available via on(): change, animationStart, animationCancel, animationComplete.

Related

• animate
• spring

press()

Gesture helper that detects press start/end, with keyboard accessibility.

Signature / Usage

import { press } from "motion"

press("button", (element, startEvent) => {
  console.log("pressed:", element)

  // Returned function fires on press end
  return (endEvent, info) => {
    console.log("press", info.success ? "completed" : "cancelled")
  }
})

• element: Element, array of elements, or CSS selector string.
• callback: (element, startEvent) => void | ((endEvent, info) => void). info.success indicates whether the press completed on the element.
• Returns a function that removes all associated event listeners.

Options / Props

Notes

• Filters secondary pointer events (right-clicks, multi-touch).
• Keyboard accessible by default (Enter key support).

Related

• hover
• animate

Vanilla JS

scroll()

Links a callback or an animation to scroll progress.

Signature / Usage

import { scroll, animate } from "motion"

// Track scroll progress (0–1)
const cancel = scroll((progress) => {
  console.log(progress)
})

// Drive an animation with scroll
const animation = animate(
  "div",
  { transform: ["none", "rotate(90deg)"] },
  { ease: "linear" }
)
scroll(animation)

// Horizontal scroll on a specific container
scroll(callback, {
  container: document.getElementById("carousel"),
  axis: "x",
})

cancel() // stop tracking

• First argument: a callback (progress, info?) => void (progress is 0–1) or an animate() animation object.
• Returns a cleanup function that cancels the scroll link.

Options / Props

Notes

• When passing an animation, its playback is scrubbed by scroll position rather than time.
• offset strings combine a target edge and a container edge, e.g. "start end".

Related

• animate
• in-view

spring()

Creates a spring animation generator that can be sampled at specific times.

Signature / Usage

import { spring } from "motion"

const generator = spring({ keyframes: [0, 100], bounce: 0.3 })
const { value, done } = generator.next(10) // sample at 10ms

• Returns a generator with .next(timeMs) returning { value, done }.
• Also usable as a transition type: "spring" within animate().

Options / Props

Notes

• Prefer bounce + visualDuration for intuitive tuning, or stiffness / damping / mass for physics-based control.

Related

• animate
• motion-value

stagger()

Produces a dynamic delay function that offsets each animated element sequentially.

Signature / Usage

import { animate, stagger } from "motion"

animate(
  "li",
  { opacity: 1 },
  { delay: stagger(0.1) }
)

The first <li> waits 0s, the second 0.1s, the third 0.2s, and so on.

• duration (number): delay increment in seconds per element.
• Returns a delay function compatible with animate() options.

Options / Props

Related

• animate
• timeline

timeline (animation sequences)

Sequence multiple animations by passing an array of segments to animate().

Signature / Usage

import { animate } from "motion"

const sequence = [
  ["ul", { opacity: 1 }, { duration: 0.5 }],
  ["li", { x: [-100, 0] }, { at: 1 }],
  ["nav", { rotate: 180 }, { at: "<" }],
]

animate(sequence)

• Each segment is a tuple [subject, targetValues, transitionOptions].
• Segments run sequentially by default; at reschedules timing without changing order.
• A second options object applies global settings (e.g. defaultTransition).

Options / Props

Related

• animate
• stagger

AnimatePresence

Animate components as they mount and unmount from the React tree by wrapping conditional or keyed children in AnimatePresence.

import { AnimatePresence, motion } from "motion/react"
import { useState } from "react"

const slides = [
  { id: 1, title: "Slide One" },
  { id: 2, title: "Slide Two" },
  { id: 3, title: "Slide Three" },
]

export default function Slideshow() {
  const [index, setIndex] = useState(0)
  const slide = slides[index]

  return (
    <div>
      <AnimatePresence mode="wait">
        <motion.div
          key={slide.id}
          initial={{ opacity: 0, x: 300 }}
          animate={{ opacity: 1, x: 0 }}
          exit={{ opacity: 0, x: -300 }}
          transition={{ ease: "easeOut", duration: 0.4 }}
        >
          <h2>{slide.title}</h2>
        </motion.div>
      </AnimatePresence>

      <button onClick={() => setIndex((i) => (i + 1) % slides.length)}>
        Next
      </button>
    </div>
  )
}

Notes

• Every direct child needs a unique, stable key (use a domain id, never an array index) so AnimatePresence can detect what entered or left.
• mode="wait" defers the entering element until the exiting one finishes; "sync" (default) animates both at once; "popLayout" removes exiting elements from layout so siblings can reflow immediately.
• Wrap the conditional logic inside AnimatePresence — do not conditionally render AnimatePresence itself, or the exit animation is skipped.
• Pass initial={false} to skip enter animations for children that are present on first render.

Basic Animation

Animate a motion component from an initial state to an animate target, with an exit state for removal.

import { AnimatePresence, motion } from "motion/react"
import { useState } from "react"

export default function Box() {
  const [show, setShow] = useState(true)

  return (
    <>
      <button onClick={() => setShow((v) => !v)}>Toggle</button>

      <AnimatePresence>
        {show && (
          <motion.div
            initial={{ opacity: 0, scale: 0.8, y: 40 }}
            animate={{ opacity: 1, scale: 1, y: 0 }}
            exit={{ opacity: 0, scale: 0.8, y: 40 }}
            transition={{ duration: 0.4, ease: "easeOut" }}
            style={{ width: 120, height: 120, background: "#0af", borderRadius: 12 }}
          />
        )}
      </AnimatePresence>
    </>
  )
}

Notes

• initial is the visual state before mount; pass initial={false} to render directly at the animate state without an enter animation.
• exit only runs when the element is wrapped in AnimatePresence.
• Prefer animating transform (x, y, scale, rotate) and opacity — they run on the compositor and avoid React re-renders.
• transition accepts duration/ease for tweens or type: "spring" with stiffness/damping for physics.

Gesture Animation

React to hover, tap, and drag interactions with the whileHover, whileTap, whileDrag, and drag props.

import { motion } from "motion/react"
import { useRef } from "react"

export default function GestureCard() {
  const constraintsRef = useRef(null)

  return (
    <motion.div
      ref={constraintsRef}
      style={{ width: 320, height: 320, background: "#eee", borderRadius: 16 }}
    >
      <motion.div
        // Hover + tap feedback
        whileHover={{ scale: 1.1 }}
        whileTap={{ scale: 0.9, rotate: 3 }}
        // Drag within the parent bounds
        drag
        dragConstraints={constraintsRef}
        dragElastic={0.2}
        whileDrag={{ cursor: "grabbing" }}
        onTap={() => console.log("tapped")}
        transition={{ type: "spring", stiffness: 400, damping: 25 }}
        style={{ width: 100, height: 100, background: "#0af", borderRadius: 12 }}
      />
    </motion.div>
  )
}

Notes

• whileHover / whileTap / whileDrag animate only for the duration of the gesture, then return to animate.
• whileTap is keyboard-accessible automatically: Enter triggers it, and release fires onTap.
• dragConstraints accepts a ref (bounds = that element) or an explicit { top, left, right, bottom } pixel box; dragElastic (0–1) controls overshoot beyond the bounds.
• For touch devices, set the touch-action CSS rule on the draggable axis so the page does not scroll while dragging.

Layout Animation

Animate size/position changes automatically with the layout prop, and animate list reordering/removal together with AnimatePresence.

import { AnimatePresence, motion } from "motion/react"
import { useState } from "react"

export default function TodoList() {
  const [items, setItems] = useState([
    { id: 1, text: "Design" },
    { id: 2, text: "Build" },
    { id: 3, text: "Ship" },
  ])

  const remove = (id: number) =>
    setItems((prev) => prev.filter((i) => i.id !== id))

  return (
    <ul style={{ listStyle: "none", padding: 0 }}>
      <AnimatePresence>
        {items.map((item) => (
          <motion.li
            key={item.id}
            layout
            initial={{ opacity: 0, height: 0 }}
            animate={{ opacity: 1, height: "auto" }}
            exit={{ opacity: 0, height: 0 }}
            transition={{ type: "spring", stiffness: 500, damping: 40 }}
            onClick={() => remove(item.id)}
            style={{ background: "#0af", margin: 8, padding: 12, borderRadius: 8 }}
          >
            {item.text}
          </motion.li>
        ))}
      </AnimatePresence>
    </ul>
  )
}

Notes

• layout makes the element smoothly animate any layout change (size + position) caused by re-render; use layout="position" to animate only position and avoid stretching of aspect-changing content.
• Layout animations run via CSS transform, so the surrounding elements reflow without paint-triggering width/height changes.
• Combining layout with AnimatePresence lets remaining items slide into place as a sibling is removed — set mode="popLayout" to pull exiting items out of the layout flow during their exit.
• Set border-radius and box-shadow through the style prop so they are scale-corrected during the transition.

samples

Scroll Animation

Drive animations from scroll progress with useScroll, optionally remapping the value via useTransform.

import { motion, useScroll, useTransform } from "motion/react"
import { useRef } from "react"

// 1. Page reading-progress bar (fixed to the top of the viewport)
export function ProgressBar() {
  const { scrollYProgress } = useScroll()
  return (
    <motion.div
      style={{
        scaleX: scrollYProgress,
        originX: 0,
        position: "fixed",
        top: 0,
        left: 0,
        right: 0,
        height: 4,
        background: "#0af",
      }}
    />
  )
}

// 2. Element-linked reveal: animate as a section passes through the viewport
export function Reveal() {
  const ref = useRef(null)
  const { scrollYProgress } = useScroll({
    target: ref,
    offset: ["start end", "center center"],
  })

  const opacity = useTransform(scrollYProgress, [0, 1], [0, 1])
  const y = useTransform(scrollYProgress, [0, 1], [80, 0])

  return (
    <section ref={ref} style={{ minHeight: "100vh" }}>
      <motion.div style={{ opacity, y }}>Revealed on scroll</motion.div>
    </section>
  )
}

Notes

• useScroll() with no args tracks the window; pass target (a ref) to track an element's progress through its scroll container.
• offset defines the progress boundaries: ["start end", "center center"] maps progress 0 when the element's start meets the viewport end, to 1 when its center meets the viewport center.
• The returned scrollYProgress is a motion value (0–1) — bind it directly to style or remap it with useTransform/useSpring.
• Binding scroll values to transform, opacity, clipPath, or filter keeps the animation GPU-accelerated.

Install

Motion パッケージのインストールと import 方法。

React 向けインストール

npm install motion

yarn add motion

pnpm add motion

React 18.2 以上が前提。Vite は追加設定不要。

React の import

import { motion } from "motion/react"

Next.js App Router では "use client" ディレクティブを付けるか、後述の motion/react-client を import する。

クライアント JS を減らす React import

import * as motion from "motion/react-client"

"use client" を付けずに利用でき、Server Component 構成でクライアント側 JS を削減できる。

CDN 経由の React import

import motion from "https://cdn.jsdelivr.net/npm/motion@latest/react/+esm"

ビルドツールなしの環境向け。

vanilla JS 向けインストール

npm install motion

React と同じ motion パッケージを使用する。

vanilla JS の import

import { animate, scroll } from "motion"

animate などの命令的 API を直接 import する。

TypeScript 環境での使用

npm install motion

motion パッケージをインストールするだけで TypeScript からそのまま利用できる。@types/motion 等の追加インストールは不要。

要確認: 型定義がパッケージに同梱されている旨は公式インストールページ (https://motion.dev/docs/react-installation) には明記されていない。追加の型パッケージが不要であることは利用上の前提として記載しているが、公式記載の確認を推奨する。

scripts