Animating with Framer Motion

Framer Motion is a production-ready motion library for React. It makes it easy to create complex animations.

Installation

You can include Framer Motion in your project using npm:

npm install framer-motion

Basic Animation

Here's a simple example of using Framer Motion to animate a component:

import React from 'react';
import { motion } from 'framer-motion';

const AnimatedComponent = () => {
    return (
        <motion.div animate={{ x: 100 }} transition={{ duration: 1 }}>
            I will move to the right
        </motion.div>
    );
};

export default AnimatedComponent;

Advanced Animation

Framer Motion provides various features for advanced animations, such as keyframes, gestures, and layout animations.

• Keyframes: Keyframes allow you to define multiple stages of an animation. Here's an example:

import React from 'react';
import { motion } from 'framer-motion';

const KeyframeComponent = () => {
    return (
        <motion.div
            animate={{ x: [0, 100, 0] }}
            transition={{ duration: 2, ease: 'easeInOut' }}
        >
            I will move back and forth
        </motion.div>
    );
};

export default KeyframeComponent;

• Gestures Framer Motion allows you to create animations based on user gestures. Here's an example:

import React from 'react';
import { motion } from 'framer-motion';

const GestureComponent = () => {
    return (
        <motion.div
            drag
            dragConstraints={{ left: -100, right: 100, top: -100, bottom: 100 }}
        >
            Drag me around
        </motion.div>
    );
};

export default GestureComponent;

• Layout Animations Framer Motion makes it easy to animate layout changes. Here's an example:

import React, { useState } from 'react';
import { motion } from 'framer-motion';

const LayoutAnimationComponent = () => {
    const [isOpen, setIsOpen] = useState(false);

    return (
        <motion.div layout onClick={() => setIsOpen(!isOpen)} style={{ background: 'lightblue', padding: '10px' }}>
            {isOpen ? 'Click to collapse' : 'Click to expand'}
        </motion.div>
    );
};

export default LayoutAnimationComponent;