Mastering Framer Motion: Fixing Distortions and Layout Animations
Written on
Understanding Framer Motion and Layout Animations
The Framer Motion library simplifies the process of implementing animations in your React applications. In this guide, we will explore how to effectively utilize Framer Motion for layout animations and address issues related to distortion.
Correcting Scale Distortions
Layout animations leverage the transform property, allowing for seamless transitions. However, these animations can cause child elements to appear distorted. To remedy this, we can use the layout prop. Here’s an example:
import React, { useState } from "react";
import { motion } from "framer-motion";
import "./styles.css";
export default function App() {
const [isOpen, setIsOpen] = useState(false);
return (
<motion.div
layout
data-isOpen={isOpen}
initial={{ borderRadius: 50 }}
className="parent"
onClick={() => setIsOpen(!isOpen)}
>
<motion.div layout className="child" /></motion.div>
);
}
html,
body {
min-height: 100vh;
padding: 0;
margin: 0;
}
{
box-sizing: border-box;
}
body {
background: green;
display: flex;
justify-content: center;
align-items: center;
}
.App {
font-family: sans-serif;
text-align: center;
}
.parent {
background: white;
width: 100px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
}
.parent[data-isOpen="true"] {
width: 200px;
height: 200px;
}
.child {
width: 40px;
height: 40px;
background: green;
border-radius: 50%;
}
In this example, clicking the outer div expands it, and the layout prop on the inner div prevents distortion during the animation. It is important to note that transforms can also affect properties like boxShadow and borderRadius. To maintain these values consistently, we can configure them in the initial prop as follows:
<motion.div layout className="child" initial={{ borderRadius: "20%" }} />
Customizing Layout Animations
Layout animations can be further tailored using the transition property. For instance:
<motion.div
layout
data-isOpen={isOpen}
initial={{ borderRadius: 50 }}
className="parent"
onClick={() => setIsOpen(!isOpen)}
transition={{
layoutX: { duration: 0.3 },
layoutY: { delay: 0.2, duration: 0.3 }
}}
>
<motion.div layout className="child" />
</motion.div>
This allows you to introduce a delay for the y-direction animation, while also specifying the duration for both x and y directions.
The first video, "Inside Framer Motion's Layout Animations - Matt Perry," provides an insightful look into the mechanics behind layout animations in Framer Motion.
The second video, "Collapsible table rows with Framer Motion layout animations," illustrates practical applications of these concepts in dynamic interfaces.
Conclusion
In summary, we can effectively manage distortions through layout animations in Framer Motion, allowing for precise control over the rendering of animations in our applications.