Link complex animations together with variants from Framer Motion
Learn how to orchestrate animations between parent and child components with variants. Variants allow you to set different states, almost like keyframes of motion elements.
By passing a new variant name to the element, it will automatically animate to the configuration of the animation that corresponds.
Check out the official docs for more information on how to customize orchestration between animations.
Instructor: [0:00] This tray of icons is a button that should open up and display four more arrow icons all pointing in different directions.
[0:07] The whole thing is wrapped in one container or parent motion element. The parent element can accept an object of variants or named states for the element to animate between.
[0:17] For this example, by setting the width and variants named open and close, you can animate the width of the container element between 240 and 60 pixels. Pass the variants in as a prop to the parent element and also include an animate prop that tells the element which variant to animate to.
[0:32] You can optionally pass in an initial prop to tell the element which variant to start on when the page loads.
[0:47] Also add an animation to the expand and collapse button by rotating it on the variable isOpen is true. Now for the children elements, you can create an object of variants that also line up with the isOpen state variable.
[1:05] For these elements, set the open and closed variants to toggle their opacity from zero to one. Pass in the variants as a prop like you did for the container. By adding an initial prop of close, they will start with a zero opacity.
[1:23] All animations are firing at the same time, and it would look nice to make them happen in a specific order. You can add a transition object to a variant that instructs children of the animation to stagger while animating or animate one after the other. Set it to .1 seconds apart for both, variants and the parent.
[1:45] The children will animate one after another but they're animating in the same direction on both open and close. If you add a stagger direction attribute to transition object, framer motion will reverse the order.
[1:59] For one final improvement, you can wait to trigger the parent container's animation to expand its width until after children have finished animating. Pass after children to the one attribute to do so.