The children themselves only define the behavior they intent to have for those variants.Ī great example where I used propagation on this blog is the "Featured" section on the home page of this blog. Only the parent motion component, in this case, defines the animate prop. Remember in my previous blog post when we learned that every Framer Motion Animation needed 3 properties (props) initial, animate, transition, to define a transition/animation? Well, for this pattern that's not entirely true.įramer Motion allows variants to "flow down" through every motion child component as long as these motion components do not have an animate prop defined. However, this got me confused at the beginning because it broke some of the mental models I originally had when it comes to defining animations. I quickly learned that it's possible to propagate changes of variants from a parent motion component to any child motion component. Kostya Stepanov 2.2K Followers Writing for work and pleasure. Refresh the page, check Medium ’s site status, or find something interesting to read.
One of the first advanced patterns I got to encounter when I tried to add some micro-interactions with Framer Motion on my projects is propagation. Framer Motion Tutorials: Make More Advanced Animations by Kostya Stepanov Better Programming Write Sign up Sign In 500 Apologies, but something went wrong on our end. Your feedback is super important and will help me do better for my future blog posts 😄! Propagation Let me know what you think about these examples, and whether they were helpful. What You Need To Know This blog post will teach you a way to create a sliding navigation menu with Framer Motion.
Framer motion series#
Like the original blog post, this article contains a series of interactive widgets and playgrounds with preset examples to allow you to apply the Framer Motion concepts we're about to see without the need to set up anything! Framer Motion is a React animation library that makes it simple and declarative to add animations to your React apps without being an animation expert. Info An icon representing the letter ‘i‘ in a circle
0 kommentar(er)
