Veggie Button Animation in Framer

Copy component

Veggie Button Animation in Framer

Copy component

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

Animation

Veggie Button Animation in Framer

This is a fun toggle animation I recreated in Framer, based on a concept by Roshan. He originally made it in Rive, which is a tool specifically for making cool animations. My challenge was to show how powerful Framer is for creating web animations without writing any code.

image of Nandi Muzsik
profile image of Roshan Kumar

Created by

Veggie Button Animation in Framer
Veggie Button Animation in Framer
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.

the illustrations in Figma

You can see the illustrations in Figma, both in normal and outline view.

the illustrations in Figma

You can see the illustrations in Figma, both in normal and outline view.

the illustrations in Figma

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.

toggle component in Framer

The separate component for the selector and the text.

toggle component in Framer

The separate component for the selector and the text.

toggle component in Framer

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.

main component and its variants

The main component's variants and their interactions.

main component and its variants

The main component's variants and their interactions.

main component and its variants

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."

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

More resources

More resources

  • Framer website homepage with navigation menu and pixelated project previews showcasing web design tool capabilities

    Animated Navigation Bar in Framer

    Animation

    Framer website homepage with navigation menu and pixelated project previews showcasing web design tool capabilities

    Animated Navigation Bar in Framer

    Animation

    Framer website homepage with navigation menu and pixelated project previews showcasing web design tool capabilities

    Animated Navigation Bar in Framer

    Animation

  • Apple TV Scroll Zoom Animation in Framer

    Apple TV Scroll Zoom Animation in Framer

    Animation

    Apple TV Scroll Zoom Animation in Framer

    Apple TV Scroll Zoom Animation in Framer

    Animation

    Apple TV Scroll Zoom Animation in Framer

    Apple TV Scroll Zoom Animation in Framer

    Animation