Component
Floating Action Button in Framer
Created by
About the resource
To create an interaction like this in Framer, we need to utilize components.
What I like to do first is identify some of the movements that happen in the animations.
In this case, I've found two distinct transformations. One is the way the little icons scale in and become unblurred when they appear, and the other is how the plus icon moves from left to right to reveal the icons.
At this point we can say we’ll need 2 components for this animation.
One component will a “Circle”, with background color and an icon. These will have an “in” and an “out” variant.
About the resource
To create an interaction like this in Framer, we need to utilize components.
What I like to do first is identify some of the movements that happen in the animations.
In this case, I've found two distinct transformations. One is the way the little icons scale in and become unblurred when they appear, and the other is how the plus icon moves from left to right to reveal the icons.
At this point we can say we’ll need 2 components for this animation.
One component will a “Circle”, with background color and an icon. These will have an “in” and an “out” variant.
About the resource
To create an interaction like this in Framer, we need to utilize components.
What I like to do first is identify some of the movements that happen in the animations.
In this case, I've found two distinct transformations. One is the way the little icons scale in and become unblurred when they appear, and the other is how the plus icon moves from left to right to reveal the icons.
At this point we can say we’ll need 2 components for this animation.
One component will a “Circle”, with background color and an icon. These will have an “in” and an “out” variant.
The Circle component and its variants.
The Circle component and its variants.
The Circle component and its variants.
The other component is the “Main Component” that wraps all the “Circle” components structured in a way that will allow us to simple create another variant within this, where we move the main icon to the right and reveal the rest.
We’re also changing the variant of the icons we’re revealing from “Out” to “In” between the two variants.
The other component is the “Main Component” that wraps all the “Circle” components structured in a way that will allow us to simple create another variant within this, where we move the main icon to the right and reveal the rest.
We’re also changing the variant of the icons we’re revealing from “Out” to “In” between the two variants.
The other component is the “Main Component” that wraps all the “Circle” components structured in a way that will allow us to simple create another variant within this, where we move the main icon to the right and reveal the rest.
We’re also changing the variant of the icons we’re revealing from “Out” to “In” between the two variants.
The Main Component and its variants.
The Main Component and its variants.
The Main Component and its variants.
To make this whole thing interactive, we need to connect a click interaction from the plus button to the second variant of the "Main Component." Framer handles the animations perfectly.
If you want to learn more about components, variants, and interactions, I highly recommend my Components Masterclass video. It teaches you everything you need to know about them in Framer so you can build these cool interactions too - all without any coding.
To make this whole thing interactive, we need to connect a click interaction from the plus button to the second variant of the "Main Component." Framer handles the animations perfectly.
If you want to learn more about components, variants, and interactions, I highly recommend my Components Masterclass video. It teaches you everything you need to know about them in Framer so you can build these cool interactions too - all without any coding.
To make this whole thing interactive, we need to connect a click interaction from the plus button to the second variant of the "Main Component." Framer handles the animations perfectly.
If you want to learn more about components, variants, and interactions, I highly recommend my Components Masterclass video. It teaches you everything you need to know about them in Framer so you can build these cool interactions too - all without any coding.
