Mastering Framer Motion: Dynamic Variants and Animation Controls
Written on
Introduction to Framer Motion
The Framer Motion library enables us to effortlessly implement animations in our React applications. This article will guide you through the fundamentals of getting started with Framer Motion.
Dynamic Variants: Custom Animations
With dynamic variants, you can animate each element individually. For instance, consider the following code snippet:
import React from "react";
import { motion } from "framer-motion";
const variants = {
visible: (i) => ({
opacity: 1,
transition: {
delay: i * 0.3}
}),
hidden: { opacity: 0 }
};
const items = [
{ text: "foo", id: 1 },
{ text: "bar", id: 2 },
{ text: "baz", id: 3 }
];
export default function App() {
return (
<div className="App">
<motion.ul>
{items.map(({ text, id }, i) => (
<motion.li
key={id}
initial="hidden"
custom={i}
animate="visible"
variants={variants}
>
{text}</motion.li>
))}
</motion.ul>
</div>
);
}
In this example, we animate the list items in the App component. Each item's entry is staggered using the transition.delay property, where i is passed through the custom prop to access the delay for each element. The variants object defines the animation styles for various states, while the initial and animate props specify the styles before and after the animation, respectively.
The first video titled "Dynamic Variants - Framer Motion | Emojis Animation" provides a visual guide on implementing dynamic variants in animations.
Animation Controls: Managing Animation Flow
We can manage when animations commence or cease by utilizing the useAnimation hook, which allows us to create a control object. This object provides the means to dictate the starting and stopping of animations.
Starting an Animation
To trigger an animation, we can use the controls.start method. Here's an example of how to implement this:
import React, { useEffect } from "react";
import { motion, useAnimation } from "framer-motion";
export default function App() {
const controls = useAnimation();
useEffect(() => {
const timer = setTimeout(() => {
controls.start({
x: "100%",
backgroundColor: "green",
transition: { duration: 3 }
});
}, 2000);
return () => {
clearTimeout(timer);};
}, []);
return (
<motion.div
animate={controls}
style={{ backgroundColor: "yellow", width: 100, height: 100 }}
/>
);
}
In this code, controls.start is invoked with an object that defines the styles applied after the animation. The call is made within a setTimeout to introduce a delay before the animation begins.
The second video, "Animating with Framer Motion — Framer Code Components," explores additional techniques for animation control within Framer Motion.
Using Variants with Animation Controls
We can also initiate animations using the variant names. Here’s how you can achieve that:
import React, { useEffect } from "react";
import { motion, useAnimation } from "framer-motion";
const variants = {
visible: (i) => ({
opacity: 1,
transition: {
delay: i * 0.3}
}),
hidden: { opacity: 0 }
};
export default function App() {
const controls = useAnimation();
useEffect(() => {
const timer = setTimeout(() => {
controls.start("hidden");}, 2000);
return () => {
clearTimeout(timer);};
}, []);
return (
<motion.div
animate={controls}
variants={variants}
style={{ backgroundColor: "yellow", width: 100, height: 100 }}
/>
);
}
In this example, the variants object holds styles that can be referenced by property names, allowing us to pass the variant name directly into the controls.start method. This implementation results in the div transitioning from visible to hidden.
Conclusion: Embracing Dynamic Animations
Framer Motion provides powerful tools for applying dynamic styles and controlling animation timing in your projects. By mastering these concepts, you can create engaging and interactive user experiences in your React applications.