Component
Crazy Galaxy Button Hover Animation in Framer
This is an out-of-this-world button component for Framer, bringing Alex Barashkov's galaxy hover animation to life. With its mesmerizing glow and swirling particles, it's sure to make your friends go "wow." The best part? You can easily add this impressive interaction to your site without writing any code.
About the resource
When creating these complex glowing graphics on websites, I usually use a bunch of drop shadows on elements to achieve the effect. When you combine these shadows with gradient fill colors, you can get some pretty amazing results.
About the resource
When creating these complex glowing graphics on websites, I usually use a bunch of drop shadows on elements to achieve the effect. When you combine these shadows with gradient fill colors, you can get some pretty amazing results.
About the resource
When creating these complex glowing graphics on websites, I usually use a bunch of drop shadows on elements to achieve the effect. When you combine these shadows with gradient fill colors, you can get some pretty amazing results.
Outer glow drop shadow layers.
Outer glow drop shadow layers.
Outer glow drop shadow layers.
You can see in this little video above, for example, how the outer glow effect of the button is built up with 3 separate drop shadows on the same element. Feel free to remix the project, by the way, to dig into each of the layers and their drop shadow settings.
The great thing about these drop shadows is that we can also animate them when we finally turn the button into a component and create multiple variants for it for the hover animation. We just tweak the opacity, y, blur, or spread values, and they'll all be nicely animated.
The particles component
Another notable element on this specific galaxy button is the particles effect that appears as we hover over the button. You can see how the particles move toward the bottom center of the button.
I achieved that effect with the particles component (created by Benjamin). You can get that component here.
You can see in this little video above, for example, how the outer glow effect of the button is built up with 3 separate drop shadows on the same element. Feel free to remix the project, by the way, to dig into each of the layers and their drop shadow settings.
The great thing about these drop shadows is that we can also animate them when we finally turn the button into a component and create multiple variants for it for the hover animation. We just tweak the opacity, y, blur, or spread values, and they'll all be nicely animated.
The particles component
Another notable element on this specific galaxy button is the particles effect that appears as we hover over the button. You can see how the particles move toward the bottom center of the button.
I achieved that effect with the particles component (created by Benjamin). You can get that component here.
You can see in this little video above, for example, how the outer glow effect of the button is built up with 3 separate drop shadows on the same element. Feel free to remix the project, by the way, to dig into each of the layers and their drop shadow settings.
The great thing about these drop shadows is that we can also animate them when we finally turn the button into a component and create multiple variants for it for the hover animation. We just tweak the opacity, y, blur, or spread values, and they'll all be nicely animated.
The particles component
Another notable element on this specific galaxy button is the particles effect that appears as we hover over the button. You can see how the particles move toward the bottom center of the button.
I achieved that effect with the particles component (created by Benjamin). You can get that component here.
The particles component in Framer.
The particles component in Framer.
The particles component in Framer.
The good thing about that particles component is that it's highly customizable. I could tweak it to get it super close to what we see on the original button concept.
I also did a trick: duplicated the particles component to have 3 in total and set different size, speed, and opacity properties on each of them. This resulted in a more complex and overall better-looking effect.
Quick tip: when you duplicate the particles component and you're using multiple on one page, make sure that each has a unique "ID" property set on the left panel (otherwise they're not gonna work).
The good thing about that particles component is that it's highly customizable. I could tweak it to get it super close to what we see on the original button concept.
I also did a trick: duplicated the particles component to have 3 in total and set different size, speed, and opacity properties on each of them. This resulted in a more complex and overall better-looking effect.
Quick tip: when you duplicate the particles component and you're using multiple on one page, make sure that each has a unique "ID" property set on the left panel (otherwise they're not gonna work).
The good thing about that particles component is that it's highly customizable. I could tweak it to get it super close to what we see on the original button concept.
I also did a trick: duplicated the particles component to have 3 in total and set different size, speed, and opacity properties on each of them. This resulted in a more complex and overall better-looking effect.
Quick tip: when you duplicate the particles component and you're using multiple on one page, make sure that each has a unique "ID" property set on the left panel (otherwise they're not gonna work).
