5 Advanced Components Created with Variants
Get inspired to achieve various interactions with these examples utilizing features of Variants and Variables.
Variants and variables unlock many interactions that can now be created without ever leveraging a single piece of code. Master the different concepts to get the most out of your components.
This guide requires a basic understanding of Framer and Variables and Variables in Smart Components. Want to catch up first? Check out these guided video tutorials:
Take the Variants and Variables tutorial
How your Variants animate
Understanding how components animate between states will give you a better idea of how effects like the ones in this guide can be achieved.
When you animate to a new Variant, Framer considers your entire component and looks at all the properties, or props, in the right panel that your component is composed of.
If any prop has changed between Variants, such as the width of a Frame, a transition to said Variant will animate between the width values. This counts for most properties, and these all animate together in one smooth transition.
By keeping this in mind, various tricks can be achieved when strategically setting overflow
, position
, opacity
, and many more.
When you add to this the ability to add custom events and nested components, we unlock a wealth of possible interactions.
Let’s take a look at some examples.
Layered hover effects
Animate layer positioning with hover and pressed variants.
A common interaction is a card that scales when it is focused or hovered. One of the many properties we can manipulate between Variants is the dimensions of an element, which we can utilize to achieve a similar effect.
In this example, we created an image card with some text and an overlay. When we enter the Component Canvas (double-click or select and press enter
), we see that the Primary of our component has a hover variant and a pressed variant.
Hover variant
In the hover variant, we adjusted the dimensions of our image to increase in size. We also ensured that our card is set to Overflow: hidden
so the scaled image does not overflow outside of the card.
We also added an interaction that causes the country text to appear. This text layer needs to be present in the Primary as we can't add or remove items from any instance.
If you inspect the Layers panel, you’ll see that the text layer is there but set to opacity:0
. In the hover state, we then set the opacity to 1 and position it 10px upwards to display a nice upwards animation.
Finally, our overlay layer is set to have a color fill with 30% transparency in our Primary layer. By setting the transparency to 50%, we effectively darken the image while we hover.
Pressed variant
Our pressed variant gives us another layer of interaction. In the card, we only adjusted the transparency of the overlay layer while keeping everything else unchanged.
Interactive Tab Bar
Design a custom animated tab bar.
While we can turn visual properties like fill
or opacity
into Variables, events can also be created as a Variable.
An event can be created from any element within a component by selecting it on the component canvas and clicking the + in the Interaction panel, all the way to the top-right.
If we click the purple Action button, we can customize the name of our event Variable. We recommend naming your event in a way that describes the behavior, e.g. Tap Favorites.
Tip: Create your events in your Primary layer, as these will trickle down to any current and future instances.
Create an Event from a layer within the component.
Variables for code component properties
Pre-made components from the Insert Menu are often code components, created by the Framer team or others in the community.
Variables allow for highly flexible components, as we can edit many properties of our component layers. In our Tab bar, we could draw custom icons with the Graphics tool.
For now, we used one of the pre-made Icon sets, Phosphor Icons. To give us full flexibility over customizing the icon within our component, we can add a Variable for the Name
property icon component, which determines the icon being shown.
Add a Variable for the Icon Name property to allow picking different icons on the fly.
Connecting our custom events
Once we've created an event for each icon, back on the main canvas we can connect our component to other Screens by dragging the prototyping connector (the lightning bolt) to the right of our component on the canvas.
In the prompt, we can choose on which event we want this screen transition to occur.
Transitioning with Magic Motion
If we want to animate our components from screen to screen, we can use the Magic Motion transition type.
By utilizing Magic Motion screen transitions, we can add additional interactions such as an animating activity indicator ― the horizontal line under our icons that animates from 1px
to 16px
.
Connect the component and choose a created event
Custom Radio buttons
Create custom Radio components with individual states.
While the Insert Menu contains many pre-built customizable components, sometimes you may want to create a truly custom one such as a Radio button.
To create a fully functional Radio component from scratch, we will create two components. RadioOption will be a single radio button and will be nested in ThreeChoiceRadio, which contains three instances of our single radio button and some logic.
Single radio component
We start by creating RadioOption, a new component that acts as an individual radio button. We won’t cover designing the states and setting text variables, but feel free to check the tutorial to learn more.
After finishing the states, we will add an event to our individual radio button. We need to do this as we want to be able to tap an inactive radio button and have it navigate to a new version of our larger component.
To do this, we add an event for the Inactive variant by clicking the + from the top-right Interactions section, and we name this event Set to active.
Tip: Events also allow us to trigger a transition from a component within your larger prototype.
The single RadioOption component with each variant.
Three-choice Radio component
After creating the RadioOption component, we now draw a new Frame and nest three instances of the component. This we turn into a brand new component: ThreeChoiceRadio.
To make the ThreeChoiceRadio component work as expected, we add two additional variants for each possible state. For each variant, we enable one of the three individual radio components to active while keeping the remaining two inactive.
For each nested component, we choose the active or inactive variant from the properties panel.
All that’s left to do is use the prototyping connector and connect each instance.
Remember how we added an event for our RadioOption component? We now use the "Set to active" event between each instance of RadioOption and the variant of ThreeChoiceRadio.
For instance, everywhere where Option 3 is inactive (e.g. the left and middle variants in the below image), we want this instance to navigate to the variant where Option 3 is active (the right variant).
Link each inactive Radio button to the active variant.
Carousel
Use variants to create highly customizable carousels.
While the Page component can be used to display paginated content and create interactions such as carousels, you can also create a custom carousel-effect by building one as a component with variants.
This has some benefits, such as:
- Customizing the transition curves (e.g. springs vs curves)
- Adding transitions from specific elements, such as buttons
Sliding through a carousel
The main interaction within a carousel is items moving in horizontal or vertical directions. If we enter the Component Canvas by double-clicking our component, we see that we have 4 variants for each image that we want to focus on a certain state.
In this component, we are mainly moving the x position of each photo. Another small effect we implemented is that non-focused photos have slightly smaller dimensions, giving the idea that the further away from the left, the smaller they get.
Tip: To fake a staggering effect, exponentially increase the distance between different items (e.g. 20px, 60px, 180px). This will cause each successive item to animate a longer distance, giving the illusion that it is staggering into view.
Additional interactions
On top of the standard carousel, Variants also enable us to add page counters and smarter navigation. An example of the latter is a button that transitions you all the way to the beginning of the carousel, the first variant.
Audio Widget
Make audio waves move by animating positions.
Moving audio waves with positioning
With the Graphics tool, we can draw paths and design audio waves on the canvas. In this audio player widget, we want to give the illusion that these waves are drawn while the widget plays.
Enter the Component Canvas of the widget by double-clicking the component. If we look at the Default variant, we see that within the rightSection frame, we have a Graphic layer with our svg positioned at -165px
from the rightSection parent.
In the Playing variant, we repositioned this layer to now be at 0px
from its parent. This causes the component to animate to this position, giving the illusion that audio waves are forming.
Animating a counter
We can leverage the same trick by adding a text scrolling effect.
If we again consider the Default variant, we see a counter in the bottom right with a static text layer that says 00:0.
The last character can be found in a separate text layer, nested in the scrollingNumbers frame. Between the Default and Playing variant, we animate this frame’s vertical position causing each number to animate into view one by one.
By using a time-based Transition curve in the right properties panel, we can control that this animation takes exactly 5 seconds.
Tip: We use the overflow
property to hide anything that flows over our timer layer. Click the timer layer and set Overflow to "show" in the right properties panel to get a better idea of how this is done.
Bring your best ideas to life
Subscribe to get fresh prototyping stories, tips, and resources delivered straight to your inbox.