MotionBasicSample

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.

[Demo]

Important: The examples were developed with inspiration from the examples on the Motion.dev website

Features

• Basic Animations: Rotate, scale, and enter animations
• Interactive Gestures: Drag functionality and hover/tap interactions
• Keyframe Sequences: Complex multi-step animations
• Responsive UI: Clean interface built with Ant Design components

Examples

Basic Rotation

const MotionRotate = () => (
  <motion.div
    style={box}
    animate={{
      rotate: 360,
    }}
    transition={{
      duration: 2,
    }}
  />
);

Drag Interaction

const MotionDrag = () => <motion.div drag style={box} />;

Gesture Animations

const MotionGesture = () => (
  <motion.div
    style={box}
    whileHover={{
      scale: 1.2,
    }}
    whileTap={{
      scale: 0.8,
    }}
  />
);

Complex Keyframe Animation

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}
  />
);

Technologies Used

• React: Component-based architecture
• Framer Motion: Animation library for React
• Ant Design: UI components for consistent design
• Phosphor Icons: Modern icon library
• Emotion: CSS-in-JS styling for React components