Mastering Animation Sequences and Layouts in Framer Motion
Written on
Introduction to Framer Motion
Framer Motion is a powerful library that simplifies the process of adding animations to your React applications. This article will guide you through the essentials of getting started with Framer Motion.
Sequencing Animations
The controls.start method is essential for sequencing animations, as it returns a promise. Here’s how you can utilize it:
import React, { useEffect } from "react";
import { motion, useAnimation } from "framer-motion";
export default function App() {
const controls = useAnimation();
const sequence = async () => {
await controls.start({ x: 0 });
return await controls.start({ opacity: 1 });
};
useEffect(() => {
sequence();}, []);
return (
<motion.div
animate={controls}
style={{ backgroundColor: "red", width: 100, height: 100 }}
/>
);
}
In this example, the sequence function triggers controls.start with varying styles, allowing for a seamless animation experience when the component is rendered.
Dynamic Animation Control
Animations can also be triggered dynamically. Here’s an example of how to do it:
import React, { useEffect } from "react";
import { motion, useAnimation } from "framer-motion";
export default function App() {
const controls = useAnimation();
useEffect(() => {
controls.start((i) => ({
opacity: 0,
x: 100,
transition: { delay: i * 0.3 }
}));
}, []);
return (
<ul>
<motion.li custom={0} animate={controls}>
foo</motion.li>
<motion.li custom={1} animate={controls}>
bar</motion.li>
<motion.li custom={2} animate={controls}>
baz</motion.li>
</ul>
);
}
In this case, a callback with the i parameter allows for customized animations based on the custom prop passed into each list item.
Animating Layout Changes
Framer Motion also provides functionality for animating layout changes. Below is a sample implementation:
import React, { useState } from "react";
import { motion } from "framer-motion";
import "./styles.css";
const spring = {
type: "spring",
stiffness: 700,
damping: 30
};
export default function App() {
const [isOn, setIsOn] = useState(false);
const toggleSwitch = () => setIsOn(!isOn);
return (
<div className="switch" data-isOn={isOn} onClick={toggleSwitch}>
<motion.div className="handle" layout transition={spring} /></div>
);
}
In this implementation, a spring animation effect is applied, and the layout prop enables smooth transitions of the switch’s state.
html,
body {
min-height: 100vh;
padding: 0;
margin: 0;
}
{
box-sizing: border-box;
}
.App {
font-family: sans-serif;
text-align: center;
}
.switch {
width: 160px;
height: 100px;
background-color: green;
display: flex;
justify-content: flex-start;
border-radius: 50px;
padding: 10px;
cursor: pointer;
}
.switch[data-isOn="true"] {
justify-content: flex-end;
}
.handle {
width: 80px;
height: 80px;
background-color: white;
border-radius: 40px;
}
The onClick handler toggles the state of the switch, while the layout prop allows for smooth transitions of the div.
Conclusion
With Framer Motion, you can precisely control your animations and apply them effectively to layouts. This library offers a robust way to enhance user interactions in your React applications.
Chapter 2: Exploring Video Tutorials
For further insights into Framer Motion, check out these helpful video tutorials:
Complex Animations with Framer Motion & React || useAnimate Hook
This video explores advanced animation techniques using the useAnimate hook in Framer Motion.
Smooth Layout Animation Using Framer Motion
Learn how to create smooth layout animations with Framer Motion in this tutorial.