A demonstration app showcasing various animation capabilities using Framer Motion in React. This example demonstrates different animation techniques including rotation, scaling, drag interactions, and keyframe animations.
const MotionRotate = () => (
<motion.div
style={box}
animate={{
rotate: 360,
}}
transition={{
duration: 2,
}}
/>
);
const MotionDrag = () => <motion.div drag style={box} />;
const MotionGesture = () => (
<motion.div
style={box}
whileHover={{
scale: 1.2,
}}
whileTap={{
scale: 0.8,
}}
/>
);
const MotionKeyframes = () => (
<motion.div
animate={{
scale: [1, 2, 2, 1, 1],
rotate: [0, 0, 180, 180, 0],
borderRadius: ["0%", "0%", "50%", "50%", "0%"],
}}
transition={{
duration: 2,
ease: "easeInOut",
times: [0, 0.2, 0.5, 0.8, 1],
repeat: Infinity,
repeatDelay: 1,
}}
style={box}
/>
);