Toplist
- Top 10
- Micro-interactions
Toplist
- Top 10
- Micro-interactions
Toplist
- Top 10
- Micro-interactions
10 Best Micro-Interactions in Framer
Micro interactions can add that extra layer to your website, making it feel smooth, responsive, and dynamic. Framer makes it easy to implement these interactions without needing a single line of code. Here are ten of the best micro interactions in Framer, complete with breakdowns on how they work and how you can use them in your own projects.
Posted by
Nandi
Table of contents
1. Interactive 3D game boxes in Framer
This interactive game boxes component brings a cool 3D effect to a game box shelf, originally created by Joe Russel. It’s fully interactive and perfect for gaming-related websites.
1. Interactive 3D game boxes in Framer
This interactive game boxes component brings a cool 3D effect to a game box shelf, originally created by Joe Russel. It’s fully interactive and perfect for gaming-related websites.
1. Interactive 3D game boxes in Framer
This interactive game boxes component brings a cool 3D effect to a game box shelf, originally created by Joe Russel. It’s fully interactive and perfect for gaming-related websites.
Interactive 3D game boxes.
Interactive 3D game boxes.
Interactive 3D game boxes.
About the resource
To create this, we need two components:
3D Game Box Component (with inactive and active variants)
Box Shelf Component (which wraps multiple boxes together)
The magic happens with 3D transforms, which project the boxes into 3D space. When hovering over a box, the component switches to the active variant, giving it a pop-out effect. Once the mouse leaves, it resets to the inactive state.
2. 3D folder interaction in Framer
Inspired by Royden, this 3D folder interaction is a sleek and modern way to showcase expanding content.
About the resource
To create this, we need two components:
3D Game Box Component (with inactive and active variants)
Box Shelf Component (which wraps multiple boxes together)
The magic happens with 3D transforms, which project the boxes into 3D space. When hovering over a box, the component switches to the active variant, giving it a pop-out effect. Once the mouse leaves, it resets to the inactive state.
2. 3D folder interaction in Framer
Inspired by Royden, this 3D folder interaction is a sleek and modern way to showcase expanding content.
About the resource
To create this, we need two components:
3D Game Box Component (with inactive and active variants)
Box Shelf Component (which wraps multiple boxes together)
The magic happens with 3D transforms, which project the boxes into 3D space. When hovering over a box, the component switches to the active variant, giving it a pop-out effect. Once the mouse leaves, it resets to the inactive state.
2. 3D folder interaction in Framer
Inspired by Royden, this 3D folder interaction is a sleek and modern way to showcase expanding content.
3D folder interaction.
3D folder interaction.
3D folder interaction.
About the resource
The interaction works with three variants:
Default state (folder closed)
Hover state (folder slightly opens)
Click state (folder fully opens)
The transition between these states is smooth, utilizing mouse enter, mouse leave, and tap interactions to create a seamless animation.
3. Dynamic action bar in Framer
Originally by Henrik, this dynamic action bar component functions like a dynamic island for navigation.
About the resource
The interaction works with three variants:
Default state (folder closed)
Hover state (folder slightly opens)
Click state (folder fully opens)
The transition between these states is smooth, utilizing mouse enter, mouse leave, and tap interactions to create a seamless animation.
3. Dynamic action bar in Framer
Originally by Henrik, this dynamic action bar component functions like a dynamic island for navigation.
About the resource
The interaction works with three variants:
Default state (folder closed)
Hover state (folder slightly opens)
Click state (folder fully opens)
The transition between these states is smooth, utilizing mouse enter, mouse leave, and tap interactions to create a seamless animation.
3. Dynamic action bar in Framer
Originally by Henrik, this dynamic action bar component functions like a dynamic island for navigation.
Dynamic action bar.
Dynamic action bar.
Dynamic action bar.
About the resource
Built with multiple components and variants for items like "Apps," "Components," and "Notes."
Each item has an active and default variant.
Uses mouse enter and leave interactions to trigger transitions.
The key trick? Adjusting spring settings to make the animation feel natural and bouncy.
4. Netflix "love this" animation in Framer
Recreated from Vaun Blu’s work, this “love this“ animation is a fun way to engage users with a staggered effect.
About the resource
Built with multiple components and variants for items like "Apps," "Components," and "Notes."
Each item has an active and default variant.
Uses mouse enter and leave interactions to trigger transitions.
The key trick? Adjusting spring settings to make the animation feel natural and bouncy.
4. Netflix "love this" animation in Framer
Recreated from Vaun Blu’s work, this “love this“ animation is a fun way to engage users with a staggered effect.
About the resource
Built with multiple components and variants for items like "Apps," "Components," and "Notes."
Each item has an active and default variant.
Uses mouse enter and leave interactions to trigger transitions.
The key trick? Adjusting spring settings to make the animation feel natural and bouncy.
4. Netflix "love this" animation in Framer
Recreated from Vaun Blu’s work, this “love this“ animation is a fun way to engage users with a staggered effect.
Netflix "love this" animation.
Netflix "love this" animation.
Netflix "love this" animation.
About the resource
Uses four variants to animate the heart icon.
The animation starts on click, with elements fading in and out smoothly.
Uses an SVG workaround to transition between outline and filled icons by adjusting opacity.
5. Fun tab navigation in Framer
Originally created by Fabian, this fun tab navigation interaction makes tab navigation feel engaging with smooth animations.
About the resource
Uses four variants to animate the heart icon.
The animation starts on click, with elements fading in and out smoothly.
Uses an SVG workaround to transition between outline and filled icons by adjusting opacity.
5. Fun tab navigation in Framer
Originally created by Fabian, this fun tab navigation interaction makes tab navigation feel engaging with smooth animations.
About the resource
Uses four variants to animate the heart icon.
The animation starts on click, with elements fading in and out smoothly.
Uses an SVG workaround to transition between outline and filled icons by adjusting opacity.
5. Fun tab navigation in Framer
Originally created by Fabian, this fun tab navigation interaction makes tab navigation feel engaging with smooth animations.
Fun tab navigation.
Fun tab navigation.
Fun tab navigation.
About the resource
Two main variants: Default (collapsed) and Expanded (open menu).
The "book call" button animates between absolute and relative positions.
The info icon changes states on hover and smoothly scales down when clicked.
6. Fluid album viewer in Framer
Inspired by Preet, this album viewer lets you browse through images with a fluid transition effect.
About the resource
Two main variants: Default (collapsed) and Expanded (open menu).
The "book call" button animates between absolute and relative positions.
The info icon changes states on hover and smoothly scales down when clicked.
6. Fluid album viewer in Framer
Inspired by Preet, this album viewer lets you browse through images with a fluid transition effect.
About the resource
Two main variants: Default (collapsed) and Expanded (open menu).
The "book call" button animates between absolute and relative positions.
The info icon changes states on hover and smoothly scales down when clicked.
6. Fluid album viewer in Framer
Inspired by Preet, this album viewer lets you browse through images with a fluid transition effect.
Fluid album viewer.
Fluid album viewer.
Fluid album viewer.
About the resource
Built using a grid layout with images.
Clicking on an image zooms it in by switching to an absolute position.
The same process is repeated for each image to create a cohesive interaction.
7. Trash interaction in Framer
Inspired by Emil’s web animations course, this trash interaction (not saying the interaction is trash) makes deleting items feel smooth and seamless.
About the resource
Built using a grid layout with images.
Clicking on an image zooms it in by switching to an absolute position.
The same process is repeated for each image to create a cohesive interaction.
7. Trash interaction in Framer
Inspired by Emil’s web animations course, this trash interaction (not saying the interaction is trash) makes deleting items feel smooth and seamless.
About the resource
Built using a grid layout with images.
Clicking on an image zooms it in by switching to an absolute position.
The same process is repeated for each image to create a cohesive interaction.
7. Trash interaction in Framer
Inspired by Emil’s web animations course, this trash interaction (not saying the interaction is trash) makes deleting items feel smooth and seamless.
Trash interaction.
Trash interaction.
Trash interaction.
About the resource
Uses multiple component variants to simulate dragging items into the trash.
Items are replaced with absolutely positioned duplicates before animating into the trash.
Each interaction is specifically defined to handle different selection scenarios.
8. Image gallery open interaction in Framer
This simple yet effective image gallery interaction, inspired by Tobi, makes browsing feel natural.
About the resource
Uses multiple component variants to simulate dragging items into the trash.
Items are replaced with absolutely positioned duplicates before animating into the trash.
Each interaction is specifically defined to handle different selection scenarios.
8. Image gallery open interaction in Framer
This simple yet effective image gallery interaction, inspired by Tobi, makes browsing feel natural.
About the resource
Uses multiple component variants to simulate dragging items into the trash.
Items are replaced with absolutely positioned duplicates before animating into the trash.
Each interaction is specifically defined to handle different selection scenarios.
8. Image gallery open interaction in Framer
This simple yet effective image gallery interaction, inspired by Tobi, makes browsing feel natural.
Image gallery open interaction.
Image gallery open interaction.
Image gallery open interaction.
About the resource
The component has two variants: Default (collapsed) and Open (expanded).
Clicking a button transitions between the two states with a tap trigger.
Scaling and positioning animations create a smooth opening effect.
9. Klarna carousel advanced interaction
A complex yet stunning carousel interaction, originally by Hüseyin, showcasing seamless transitions.
About the resource
The component has two variants: Default (collapsed) and Open (expanded).
Clicking a button transitions between the two states with a tap trigger.
Scaling and positioning animations create a smooth opening effect.
9. Klarna carousel advanced interaction
A complex yet stunning carousel interaction, originally by Hüseyin, showcasing seamless transitions.
About the resource
The component has two variants: Default (collapsed) and Open (expanded).
Clicking a button transitions between the two states with a tap trigger.
Scaling and positioning animations create a smooth opening effect.
9. Klarna carousel advanced interaction
A complex yet stunning carousel interaction, originally by Hüseyin, showcasing seamless transitions.
Image gallery open interaction.
Image gallery open interaction.
Image gallery open interaction.
About the resource
Uses multiple nested components with their own variants.
Components like illustrations and buttons have their own "Active" and "Inactive" states.
Every small part is modular, making the animation easier to manage.
10. Stripe sessions carousel
This recreation of Stripe’s highly polished carousel interaction is a great example of event-driven animations.
About the resource
Uses multiple nested components with their own variants.
Components like illustrations and buttons have their own "Active" and "Inactive" states.
Every small part is modular, making the animation easier to manage.
10. Stripe sessions carousel
This recreation of Stripe’s highly polished carousel interaction is a great example of event-driven animations.
About the resource
Uses multiple nested components with their own variants.
Components like illustrations and buttons have their own "Active" and "Inactive" states.
Every small part is modular, making the animation easier to manage.
10. Stripe sessions carousel
This recreation of Stripe’s highly polished carousel interaction is a great example of event-driven animations.
Stripe sessions carousel.
Stripe sessions carousel.
Stripe sessions carousel.
About the resource
Uses three main components to structure the behavior.
Each card has small, medium, and open variants.
Cards respond dynamically to one another, making transitions feel smooth and connected.
Wrapping up
Each of these micro interactions adds something special to a Framer project. Whether it’s a simple tab switch or a complex 3D effect, these small details enhance the user experience and make websites feel alive.
The best part? No code required—just smart use of components, variants, and transitions.
About the resource
Uses three main components to structure the behavior.
Each card has small, medium, and open variants.
Cards respond dynamically to one another, making transitions feel smooth and connected.
Wrapping up
Each of these micro interactions adds something special to a Framer project. Whether it’s a simple tab switch or a complex 3D effect, these small details enhance the user experience and make websites feel alive.
The best part? No code required—just smart use of components, variants, and transitions.
About the resource
Uses three main components to structure the behavior.
Each card has small, medium, and open variants.
Cards respond dynamically to one another, making transitions feel smooth and connected.
Wrapping up
Each of these micro interactions adds something special to a Framer project. Whether it’s a simple tab switch or a complex 3D effect, these small details enhance the user experience and make websites feel alive.
The best part? No code required—just smart use of components, variants, and transitions.
