🥳 Enjoy 3 months of Framer for free!

Back

Back

Back

Daily drop #25

Daily drop #25

Daily drop #25

by Joris Rood

by Joris Rood

by Joris Rood

COMPONENT

Change variants from within a secondary component.
Sometimes you end up with such a complex component structure that it would be easier to split up your components and gather them on the canvas. However, you can't switch variants between different components — or could you?

COMPONENT

Change variants from within a secondary component.
Sometimes you end up with such a complex component structure that it would be easier to split up your components and gather them on the canvas. However, you can't switch variants between different components — or could you?

COMPONENT

Change variants from within a secondary component.
Sometimes you end up with such a complex component structure that it would be easier to split up your components and gather them on the canvas. However, you can't switch variants between different components — or could you?

What are we building

#1 - Setting up the foundation

In this example we are working with a very simple setup. We have a hero text component that exist out of 2 variants: Variant 1 and Variant 2. Furthermore we have a simple button component with no click or link whatsoever.

#2 - Creating the override

Go to the top of this page and copy the VariantChange code. All you need to do is create a new override in Framer and paste the code. Make sure that your component variants match the name inside the code, or change the names inside the code. Next up: Attach the override to both of your component and set the correct function.

#3 - Last minute update

I've actually updated the code to make it work easier when you have more than 2 variants. All you need to do is enter the name of your variants on line 21 in the code editor and you'll be good to go!

👋 I hope you've enjoyed today's drop.