DEV Community

Alex Spinov
Alex Spinov

Posted on

Motion formerly Framer Motion Has a Free API That Most Developers Dont Know About

#react #webdev #animation #javascript

Motion (rebranded from Framer Motion) is the most popular React animation library, now framework-agnostic.

Animation 

import { motion } from "motion/react";

<motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 0.5 }}>
  Hello
</motion.div>
Enter fullscreen mode Exit fullscreen mode

Gestures 

<motion.button whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }} drag>
  Drag me
</motion.button>
Enter fullscreen mode Exit fullscreen mode

Scroll 

const { scrollYProgress } = useScroll();
const y = useTransform(scrollYProgress, [0, 1], [0, -200]);
Enter fullscreen mode Exit fullscreen mode

Key Features

  • Declarative animations
  • Layout animations
  • Gesture + scroll support
  • React, Vue, vanilla JS

Need to scrape or monitor web data at scale? Check out my web scraping actors on Apify or email spinov001@gmail.com for custom solutions.

Top comments (0)