GV

GeezerVison

The World Wide Web, restored to 800 pixels of glory.

Home|About|Gaming cabinet|Archives|How it works|Starter sites

On this site

  • Motion
  • DocsDocs
  • ExamplesExamples
  • AI KitAIAI KitAI
  • Motion+Motion+
  • React animation
  • Motion component
  • Scroll animations
  • Layout animation
  • AnimatePresence
  • Transitions
  • animate
  • Scroll animations
  • Easing functions

This view

  • Original page
  • New address

GeezerVison is showing motion.dev — Motion docs: animation for React, JavaScript and Vue

Docs

v14.12.0

Guides, API reference and examples for React, JavaScript and Vue.

Platforms
ReactJavaScriptVue
Guides
SvelteThree.jsvgpu
Developer tools
Motion StudioAI KitPerformance Doctor

Platforms

Motion for React

Animate React components with the motion component.

<motion.div
  animate={{ x: 100 }}
  transition={{ type: "spring" }}
/>
Get startedGet started
npm install motion
  • Motion component
  • Layout animation
  • Scroll animations
  • AnimatePresence

Motion for JavaScript

Animate HTML, SVG and WebGL in any framework, or none.

animate(".box", { x: 100 }, {
  type: "spring",
  bounce: 0.3
})
Get startedGet started
npm install motion
  • animate
  • Scroll animations
  • Springs
  • Stagger

Motion for Vue

Animate Vue components with the motion component.

<motion.div
  :animate="{ x: 100 }"
  :transition="{ type: 'spring' }"
/>
Get startedGet started
npm install motion-v
  • Motion component
  • Layout animation
  • Scroll animations
  • Gestures

Guides

  • Svelte

    Layout, gestures, scroll and view animations in Svelte 5.

  • Three.js

    Animate objects, materials and shader uniforms.

  • vgpu

    Animate WebGPU uniforms, scenes and cameras.

Developer tools

0.00.51.01.5
h1
.description
buttons
0.00 / 1.52s

Motion Studio

Edit animations on a visual timeline in your own site.

Studio docs

AI Kit

Motion docs, examples and skills for your coding agent.

AI Kit docs
RankB3 of 18 animations need work.Fix them to reach rank AFix all 3Fix all 3
-const top = card.getBoundingClientRect().top+frame.read(() => top = card.getBoundingClientRect().top)
-animate={{ width: open ? 320 : 0 }}+animate={{ scaleX: open ? 1 : 0 }}

Performance Doctor

Find and fix slow animations from your agent's chat.

Doctor docs
section.hero×
CSS Studio

CSS Studio

Edit the CSS of your existing project visually.

CSS Studio docs

Popular pages

You are visitor 01402503 — GeezerVison does not store the pages you look up.
Best viewed with Netscape Navigator 4.7 or Internet Explorer 6 at 800×600. No cookies required.