Animation
Veggie Button Animation in Framer
About the resource
To create this animations, I first created the SVG assets that I'll need for the illustrations in Figma. Then, I right clicked these illustrations in Figma, and copied them as SVG which I could easily paste into Framer.
About the resource
To create this animations, I first created the SVG assets that I'll need for the illustrations in Figma. Then, I right clicked these illustrations in Figma, and copied them as SVG which I could easily paste into Framer.
About the resource
To create this animations, I first created the SVG assets that I'll need for the illustrations in Figma. Then, I right clicked these illustrations in Figma, and copied them as SVG which I could easily paste into Framer.
You can see the illustrations in Figma, both in normal and outline view.
You can see the illustrations in Figma, both in normal and outline view.
You can see the illustrations in Figma, both in normal and outline view.
Once I had all the assets in Framer, all I had to do was create an individual component for the part of the toggle that moves from left to right and change its text. As you can see, it's just a simple component with two variants. It also has a click interaction, so when we click "Non Veg," it switches to "Veg," and when we click "Veg," it goes back to "Non Veg." I do this so I don't have to change its variants back and forth in the main component.
Once I had all the assets in Framer, all I had to do was create an individual component for the part of the toggle that moves from left to right and change its text. As you can see, it's just a simple component with two variants. It also has a click interaction, so when we click "Non Veg," it switches to "Veg," and when we click "Veg," it goes back to "Non Veg." I do this so I don't have to change its variants back and forth in the main component.
Once I had all the assets in Framer, all I had to do was create an individual component for the part of the toggle that moves from left to right and change its text. As you can see, it's just a simple component with two variants. It also has a click interaction, so when we click "Non Veg," it switches to "Veg," and when we click "Veg," it goes back to "Non Veg." I do this so I don't have to change its variants back and forth in the main component.
The separate component for the selector and the text.
The separate component for the selector and the text.
The separate component for the selector and the text.
Then, I created the main component and included the illustrations there too. In this component, we use a bunch of variants because this is where we technically animate the illustrations back and forth.
I use an animation method here that I call "Rollover." After an initial trigger by the user (in this case, clicking the toggle), the animation rolls over multiple variants using appear triggers, which allows for more complex animations.
Then, I created the main component and included the illustrations there too. In this component, we use a bunch of variants because this is where we technically animate the illustrations back and forth.
I use an animation method here that I call "Rollover." After an initial trigger by the user (in this case, clicking the toggle), the animation rolls over multiple variants using appear triggers, which allows for more complex animations.
Then, I created the main component and included the illustrations there too. In this component, we use a bunch of variants because this is where we technically animate the illustrations back and forth.
I use an animation method here that I call "Rollover." After an initial trigger by the user (in this case, clicking the toggle), the animation rolls over multiple variants using appear triggers, which allows for more complex animations.
The main component's variants and their interactions.
The main component's variants and their interactions.
The main component's variants and their interactions.
As you can see, we go from "Veg" to "Mid 1" on click, then we roll over with appear interactions through "Mid 2" and "Mid 3" to "Non Veg." We do the same when coming back from "Non Veg" to "Veg," with the only difference of using "Mid (2)'s."
As you can see, we go from "Veg" to "Mid 1" on click, then we roll over with appear interactions through "Mid 2" and "Mid 3" to "Non Veg." We do the same when coming back from "Non Veg" to "Veg," with the only difference of using "Mid (2)'s."
As you can see, we go from "Veg" to "Mid 1" on click, then we roll over with appear interactions through "Mid 2" and "Mid 3" to "Non Veg." We do the same when coming back from "Non Veg" to "Veg," with the only difference of using "Mid (2)'s."
