Motion online editor

Write, Run & Share Motion code online using OneCompiler's Motion online editor for free. Choose 'Motion' as the language and you'll start with a spinning box you can drag around. The preview updates as you type, so there's no React project to set up.

About Motion

Motion (formerly Framer Motion) is an animation library for React. Instead of writing keyframes by hand, you swap a regular element for its motion version and describe the target state with props. Motion works out the in-between frames and also handles gestures like hover, tap and drag, plus layout and exit animations.

Syntax help

Imports

import { motion } from 'motion/react';

Animate on mount

animate sets the target values. initial sets where the animation starts.

<motion.div
  initial={{ opacity: 0, y: 40 }}
  animate={{ opacity: 1, y: 0 }}
  transition={{ duration: 0.5 }}
/>

Transitions

Control timing with transition. Use type: 'spring' for a physical feel.

<motion.div
  animate={{ x: 200 }}
  transition={{ type: 'spring', stiffness: 120, damping: 10 }}
/>

Gestures

<motion.button whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.9 }}>
  Press me
</motion.button>

Drag

Add drag to make an element draggable. dragConstraints limits how far it can go.

<motion.div
  drag
  dragConstraints={{ left: -100, right: 100, top: -100, bottom: 100 }}
/>

Animating with state

When a value in animate changes, Motion animates to it.

import { useState } from 'react';
import { motion } from 'motion/react';

export default function App() {
  const [open, setOpen] = useState(false);

  return (
    <motion.div
      onClick={() => setOpen(!open)}
      animate={{ width: open ? 300 : 100 }}
      style={{ height: 100, background: '#fff312' }}
    />
  );
}

Exit animations

Wrap elements in AnimatePresence to animate them as they leave.

import { AnimatePresence, motion } from 'motion/react';

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