Interaction
Key Micro-Interaction in Framer
This is a key micro-interaction recreated from the amazing James McDonald, built right inside Framer without needing any third-party tools. Yep, the SVG illustration of the key and everything is also drawn in Framer. Remix the file to see how it's built, or just copy the component onto your canvas.
Created by
About the resource
To create this micro-interaction in Framer, I first drew out the SVG illustration. Thanks to Framer's upgraded vector capabilities, I was able to stay right in Framer without needing to switch to Figma, Illustrator, or any other tool. Pretty cool, right?
About the resource
To create this micro-interaction in Framer, I first drew out the SVG illustration. Thanks to Framer's upgraded vector capabilities, I was able to stay right in Framer without needing to switch to Figma, Illustrator, or any other tool. Pretty cool, right?
About the resource
To create this micro-interaction in Framer, I first drew out the SVG illustration. Thanks to Framer's upgraded vector capabilities, I was able to stay right in Framer without needing to switch to Figma, Illustrator, or any other tool. Pretty cool, right?
The SVG structure of the illustration in Framer.
The SVG structure of the illustration in Framer.
The SVG structure of the illustration in Framer.
Once I had this setup, all I had to do is turn it into a component and create 3 variants. Why three? It’s just a hover state, right? So why do we need three variants?
Well, it’s because you can see the key has a really subtle up and down movement on hover. So it not only moves in one direction, but immediately comes back. That’s why on hover, we go to “Out” variant, and then we come back to “Back”. This auto movement back into the “Back” variant happens with an appear interaction.
Once I had this setup, all I had to do is turn it into a component and create 3 variants. Why three? It’s just a hover state, right? So why do we need three variants?
Well, it’s because you can see the key has a really subtle up and down movement on hover. So it not only moves in one direction, but immediately comes back. That’s why on hover, we go to “Out” variant, and then we come back to “Back”. This auto movement back into the “Back” variant happens with an appear interaction.
Once I had this setup, all I had to do is turn it into a component and create 3 variants. Why three? It’s just a hover state, right? So why do we need three variants?
Well, it’s because you can see the key has a really subtle up and down movement on hover. So it not only moves in one direction, but immediately comes back. That’s why on hover, we go to “Out” variant, and then we come back to “Back”. This auto movement back into the “Back” variant happens with an appear interaction.
The variants of the micro-interaction.
The variants of the micro-interaction.
The variants of the micro-interaction.
Then, I just created a main card component, added a hover state to it, where the illustration’s variant switches to “Out”. That’s it! The interaction set within the illustration component will make sure that it transitions back to the “Back” variant.
Then, I just created a main card component, added a hover state to it, where the illustration’s variant switches to “Out”. That’s it! The interaction set within the illustration component will make sure that it transitions back to the “Back” variant.
Then, I just created a main card component, added a hover state to it, where the illustration’s variant switches to “Out”. That’s it! The interaction set within the illustration component will make sure that it transitions back to the “Back” variant.
