DEV Community

Alex Spinov
Alex Spinov

Posted on

Motion Has a Free Animation Library That Makes React Animations Trivial — Framer Motion Evolved

#react #animation #frontend #webdev

The Animation Problem

CSS animations: limited to simple transitions. GSAP: imperative, doesn't integrate with React state. react-spring: complex spring physics API.

Motion (formerly Framer Motion) makes animations declarative. Animate any CSS property with a prop.

What Motion Gives You

Animate With Props 

import { motion } from 'motion/react';

<motion.div
  initial={{ opacity: 0, y: 20 }}
  animate={{ opacity: 1, y: 0 }}
  transition={{ duration: 0.5 }}
>
  Fades in and slides up
</motion.div>
Enter fullscreen mode Exit fullscreen mode

Hover and Tap 

<motion.button
  whileHover={{ scale: 1.05 }}
  whileTap={{ scale: 0.95 }}
>
  Interactive Button
</motion.button>
Enter fullscreen mode Exit fullscreen mode

Layout Animations 

<motion.div layout>
  {/* This element animates automatically when its position changes */}
  {isExpanded ? <ExpandedContent /> : <CollapsedContent />}
</motion.div>
Enter fullscreen mode Exit fullscreen mode

Change an element's layout (size, position) and Motion animates the transition automatically. No keyframes.

AnimatePresence (Exit Animations) 

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

<AnimatePresence>
  {isVisible && (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
    >
      Animates in AND out
    </motion.div>
  )}
</AnimatePresence>
Enter fullscreen mode Exit fullscreen mode

Scroll Animations 

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

function ProgressBar() {
  const { scrollYProgress } = useScroll();
  return (
    <motion.div
      style={{ scaleX: scrollYProgress }}
      className="progress-bar"
    />
  );
}
Enter fullscreen mode Exit fullscreen mode

Gestures 

<motion.div
  drag
  dragConstraints={{ left: -100, right: 100, top: -50, bottom: 50 }}
  dragElastic={0.2}
>
  Drag me!
</motion.div>
Enter fullscreen mode Exit fullscreen mode

Variants (Orchestrated Animations) 

const container = {
  hidden: { opacity: 0 },
  show: {
    opacity: 1,
    transition: { staggerChildren: 0.1 },
  },
};

const item = {
  hidden: { y: 20, opacity: 0 },
  show: { y: 0, opacity: 1 },
};

<motion.ul variants={container} initial="hidden" animate="show">
  {items.map(i => <motion.li key={i} variants={item} />)}
</motion.ul>
Enter fullscreen mode Exit fullscreen mode

Quick Start 

npm install motion
Enter fullscreen mode Exit fullscreen mode

Why This Matters

Animations shouldn't require a PhD in CSS keyframes. Motion makes React animations as simple as changing a prop.

Building animated data visualizations? Check out my web scraping actors on Apify Store — data for your dashboards. For custom solutions, email spinov001@gmail.com.

Top comments (0)