Does the generated code use framer-motion or motion/react?

It imports from motion/react, which is the current package name for the library formerly published as framer-motion. The API is the same; if your project still imports from framer-motion, that path re-exports the identical components, so the generated code works either way.

How does the preview play the animation without loading Framer Motion?

The exported code is real Framer Motion, but the live preview is driven by a pure CSS-keyframes approximation of the same motion. That keeps the page lightweight and avoids any server-side rendering risk, while still letting you feel the timing, easing, and gestures. The Replay button re-mounts the element to re-trigger it.

When should I use a spring instead of a tween?

Use a spring for natural, physical motion - entrances, drags, and interactive feedback feel best with stiffness, damping, and mass. Use a tween when you need precise, timed control, for example a fade that must last exactly 0.6 seconds with a specific easing curve.

What is the difference between inline props and named variants?

Inline props put the initial and animate objects directly on the element, which is simplest for a single element. Named variants define hidden and visible states once and reference them by name, which is required for staggered lists (the parent orchestrates the children) and is cleaner when several elements share the same animation.

How do staggered list animations work?

Enable the staggered list option and the tool emits two variants: a container with a transition that sets staggerChildren (and optional delayChildren), and an item variant applied to each child. The parent animating to its visible state cascades the children one after another. The preview shows three demo items animating in sequence.

Why do I need AnimatePresence for exit animations?

React normally removes a component from the DOM immediately when it unmounts, so there is no time to animate it out. Wrapping the element in AnimatePresence lets Framer Motion keep it mounted long enough to run the exit animation before removing it. Toggle the exit option and the generated code adds both the wrapper and an exit prop.

Framer Motion Generator

Build production-ready Framer Motion (motion/react) animations visually: enter, gesture, and scroll motion with tween or spring transitions, variants, staggered lists, and AnimatePresence exits. Live preview plays the motion; export JSX, a typed TSX component, or variants only.

About this ToolHow it works, benefits & use cases

Framer Motion is the most popular animation library for React, but its API surface is wide enough that most people copy snippets and tweak them by hand. This generator turns that guesswork into a visual workflow: choose an element and an animation kind (enter, gesture, scroll, or keyframes), pick an enter preset such as slide up, scale, rotate, blur, or flip, and dial in the transition. You can drive motion with a precise tween (duration plus easing) or a physical spring (stiffness, damping, and mass), add a delay or a repeat, and layer on gestures like whileHover, whileTap, whileFocus, and whileInView. A sticky preview plays a CSS approximation of the exact motion so you can feel the timing before you ship, and a Replay button re-triggers it on demand. When you are happy, export real motion/react code: a ready-to-paste JSX component, a typed TSX component, or just the variants object. The tool also handles the harder pieces - named variants versus inline props, staggered lists with staggerChildren and delayChildren, and exit animations wrapped in AnimatePresence.

How to Use

1Start from a preset (Fade up on scroll, Hover lift button, Staggered list, Spring modal, Tap shrink) or build from scratch.
2Pick the motion element and animation kind, then choose an enter preset and, for slides, a distance.
3Choose a tween (duration + easing) or a spring (stiffness, damping, mass), and set any delay or repeat.
4Toggle gestures (whileHover, whileTap, whileFocus, whileInView) and watch the preview react to hover and press.
5Enable named variants, a staggered list, or an AnimatePresence exit if your component needs them.
6Switch the output format between JSX, typed TSX, or variants only, then copy, download, or share the code.

Key Benefits

Generates real motion/react code, identical to the Framer Motion API you already use
Live preview plays a CSS approximation of the motion with a Replay button - no heavy runtime
Full transition control: tween with easing keywords or a spring with stiffness, damping, and mass
Built-in gestures: whileHover, whileTap, whileFocus, and whileInView with viewport once
Handles the tricky parts - named variants, staggered lists, and AnimatePresence exits
Three export shapes: a JSX component, a typed TSX component, or just the variants object
Shareable URL state so a configured animation can be sent to a teammate

Common Use Cases

Adding a scroll-triggered fade-up reveal to sections on a marketing page
Creating a springy hover-and-tap effect for buttons and cards
Animating a list so its items cascade in with a stagger
Building a modal that pops in with a spring and animates out via AnimatePresence
Learning the Framer Motion API by reading the code each control produces

motion

CSS approximation of the exported Framer Motion code.

Presets

Element & mode

Element

Animation kind

Enter preset

Distance (px)

Transition

Stiffness260

Damping24

Mass1

Delay0s

Repeat (-1 = Infinity)

Gestures

whileHover

whileTap

whileFocus

whileInView

Variants & output shape

Use named variants (initial / animate states)

Animate a staggered list

Add exit (AnimatePresence)

Output format

Component (JSX) output

Copy, download, share, or pipe to another tool

import { motion } from 'motion/react';

export default function AnimatedComponent() {
  return (
    <motion.div
      initial={{ opacity: 0, y: 24 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{
        type: 'spring',
        stiffness: 260,
        damping: 24,
        mass: 1
      }}
    >
      Your content
    </motion.div>
  );
}

Tips

•Prefer spring for natural, physical motion; lower damping for more bounce.
•Import from motion/react (the current package); the legacy framer-motion path still re-exports it.

Real Framer Motion, generated for you

Output is genuine motion/react code — the same API as framer-motion. Toggle between inline initial/animate props and reusable named variants, drive scroll reveals with whileInView, build cascading lists with staggerChildren, and wrap exits in AnimatePresence. The live preview is a pure-CSS approximation so nothing heavy loads while you tune.

Was this tool helpful?

Share Your Experience

Help others discover this tool!

Share on

Framer Motion Generator

How to Use

Key Benefits

Common Use Cases

Real Framer Motion, generated for you

Was this tool helpful?

Share Your Experience

Related tools

Frequently Asked Questions - Framer Motion Generator