Motion - A modern animation library for JavaScript and React

Installation

npm i motion

Importing

import {motion}  from 'motion/react'

Basic Animations

Fade In Effect

<motion.div
  initial={{ opacity: 0 }}
  animate={{ opacity: 1 }}
  transition={{ duration: 1 }}
>
  Fade In Animation
</motion.div>

Scale Animation

<motion.div
  initial={{ scale: 0.5 }}
  animate={{ scale: 1 }}
  transition={{ duration: 0.5 }}
>
  Scaling Effect
</motion.div>

Gestures (Hover, Tap, Drag, etc.)

Hover Animation

<motion.button
  whileHover={{ scale: 1.1, backgroundColor: "#ff4081" }}
>
  Hover Me
</motion.button>

Tap Animation

<motion.div
  whileTap={{ scale: 0.9 }}
>
  Tap Me
</motion.div>

Drag Animation

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

Keyframe Animations