New
New
New
Guide
- How-to
- Micro-interactions
Guide
- How-to
- Micro-interactions
Guide
- How-to
- Micro-interactions
How to Create Micro-Interactions in Framer
In this Framer tutorial, I'll teach you the "Atomic Animation Technique" that can be used for creating almost any micro-interaction in Framer without writing any code.
Posted by
Nandi
Table of contents
What are micro-interactions?
Micro-interactions are small, functional animations that enhance the user experience. They provide feedback, guide users, and add personality to a website. Think of the gentle bounce when you tap a heart icon on social media or the way a toggle switch smoothly transitions between states. These little details make a huge difference in how a site feels.
What are micro-interactions?
Micro-interactions are small, functional animations that enhance the user experience. They provide feedback, guide users, and add personality to a website. Think of the gentle bounce when you tap a heart icon on social media or the way a toggle switch smoothly transitions between states. These little details make a huge difference in how a site feels.
What are micro-interactions?
Micro-interactions are small, functional animations that enhance the user experience. They provide feedback, guide users, and add personality to a website. Think of the gentle bounce when you tap a heart icon on social media or the way a toggle switch smoothly transitions between states. These little details make a huge difference in how a site feels.
Micro-interactions.
Micro-interactions.
Micro-interactions.
The "Atomic animation" technique
One of the most powerful ways to approach micro-interactions is using the "Atomic animation" technique. This concept revolves around breaking down animations into the smallest meaningful units and carefully composing them to create fluid, natural motion.
Instead of animating entire components all at once, Atomic Animation focuses on animating smaller elements separately but in coordination. This makes interactions feel organic rather than robotic.
By breaking animations into atomic parts, you get more control and can fine-tune motion for a more engaging experience. This approach also allows for chaining different animations together in a way that feels intentional and smooth.
Here’s how you use this technique.
Step 1: Find inspiration
Before you start, it helps to observe great interactions in the wild. Check out:
Pick an interaction that catches your eye. Now for the fun part.
The "Atomic animation" technique
One of the most powerful ways to approach micro-interactions is using the "Atomic animation" technique. This concept revolves around breaking down animations into the smallest meaningful units and carefully composing them to create fluid, natural motion.
Instead of animating entire components all at once, Atomic Animation focuses on animating smaller elements separately but in coordination. This makes interactions feel organic rather than robotic.
By breaking animations into atomic parts, you get more control and can fine-tune motion for a more engaging experience. This approach also allows for chaining different animations together in a way that feels intentional and smooth.
Here’s how you use this technique.
Step 1: Find inspiration
Before you start, it helps to observe great interactions in the wild. Check out:
Pick an interaction that catches your eye. Now for the fun part.
The "Atomic animation" technique
One of the most powerful ways to approach micro-interactions is using the "Atomic animation" technique. This concept revolves around breaking down animations into the smallest meaningful units and carefully composing them to create fluid, natural motion.
Instead of animating entire components all at once, Atomic Animation focuses on animating smaller elements separately but in coordination. This makes interactions feel organic rather than robotic.
By breaking animations into atomic parts, you get more control and can fine-tune motion for a more engaging experience. This approach also allows for chaining different animations together in a way that feels intentional and smooth.
Here’s how you use this technique.
Step 1: Find inspiration
Before you start, it helps to observe great interactions in the wild. Check out:
Pick an interaction that catches your eye. Now for the fun part.
Analyzing micro-interaction
Analyzing micro-interaction
Analyzing micro-interaction
Step 2: Break it up into components.
This is where the Atomic Animation technique comes in: break everything into smaller, connectable pieces - that's why we identify nested components first.
Create them, with all necessary variants/hover states.
Step 2: Break it up into components.
This is where the Atomic Animation technique comes in: break everything into smaller, connectable pieces - that's why we identify nested components first.
Create them, with all necessary variants/hover states.
Step 2: Break it up into components.
This is where the Atomic Animation technique comes in: break everything into smaller, connectable pieces - that's why we identify nested components first.
Create them, with all necessary variants/hover states.
Break it up into components.
Break it up into components.
Break it up into components.
Step 3: Assemble your atoms
Create the final component that nests all other ones. You should have everything you need for the final animation states.
Each state of the animation will be a variant. At this point we mainly just have to change variants of the nested components on each of these variants.
Connect between them with interactions. Use mouse enter/leave for hover interactions, click for click, and appear for automatic.
Step 3: Assemble your atoms
Create the final component that nests all other ones. You should have everything you need for the final animation states.
Each state of the animation will be a variant. At this point we mainly just have to change variants of the nested components on each of these variants.
Connect between them with interactions. Use mouse enter/leave for hover interactions, click for click, and appear for automatic.
Step 3: Assemble your atoms
Create the final component that nests all other ones. You should have everything you need for the final animation states.
Each state of the animation will be a variant. At this point we mainly just have to change variants of the nested components on each of these variants.
Connect between them with interactions. Use mouse enter/leave for hover interactions, click for click, and appear for automatic.
Connect with interactions.
Connect with interactions.
Connect with interactions.
Animated dock.
Animated dock.
Animated dock.
Before jumping into creating the main component, the first step is to break down the animation into smaller building blocks, or "atoms." In this case, we need to analyze the dock icons and their different states.
Each icon in the dock has three distinct sizes:
Small (default state) Medium (hover or mid-state) Large (active state when hovered over directly)
Create the atoms
Set up a base frame, add an icon, and turn it into a component.
Now that our atoms are prepared, we’ll nest them inside a main dock component.
Assemble the atoms
Then, drop in a frame that will act as your dock. This setup keeps everything structured and ready for animation.
Add variants for animation
Instead of scaling elements, create multiple variants where the icons shift in size by changing between their variants. The key is to have different states where the hovered icon appears larger while the others subtly adjust.
Set up hover triggers
Now, use Framer’s interactive settings to switch between these variants when the cursor moves over different icons. This creates the effect of the dock dynamically responding to your mouse movement.
Wrapping up
Micro-interactions might seem like minor details, but they make a huge impact on user experience. Using the Atomic Animation technique, you can craft interactions that feel polished and intentional. And with Framer, it’s easier than ever to add these little touches that make your site stand out.
For a longer in-depth tutorial check out my lesson: Dynamic interactions.
Before jumping into creating the main component, the first step is to break down the animation into smaller building blocks, or "atoms." In this case, we need to analyze the dock icons and their different states.
Each icon in the dock has three distinct sizes:
Small (default state) Medium (hover or mid-state) Large (active state when hovered over directly)
Create the atoms
Set up a base frame, add an icon, and turn it into a component.
Now that our atoms are prepared, we’ll nest them inside a main dock component.
Assemble the atoms
Then, drop in a frame that will act as your dock. This setup keeps everything structured and ready for animation.
Add variants for animation
Instead of scaling elements, create multiple variants where the icons shift in size by changing between their variants. The key is to have different states where the hovered icon appears larger while the others subtly adjust.
Set up hover triggers
Now, use Framer’s interactive settings to switch between these variants when the cursor moves over different icons. This creates the effect of the dock dynamically responding to your mouse movement.
Wrapping up
Micro-interactions might seem like minor details, but they make a huge impact on user experience. Using the Atomic Animation technique, you can craft interactions that feel polished and intentional. And with Framer, it’s easier than ever to add these little touches that make your site stand out.
For a longer in-depth tutorial check out my lesson: Dynamic interactions.
Before jumping into creating the main component, the first step is to break down the animation into smaller building blocks, or "atoms." In this case, we need to analyze the dock icons and their different states.
Each icon in the dock has three distinct sizes:
Small (default state) Medium (hover or mid-state) Large (active state when hovered over directly)
Create the atoms
Set up a base frame, add an icon, and turn it into a component.
Now that our atoms are prepared, we’ll nest them inside a main dock component.
Assemble the atoms
Then, drop in a frame that will act as your dock. This setup keeps everything structured and ready for animation.
Add variants for animation
Instead of scaling elements, create multiple variants where the icons shift in size by changing between their variants. The key is to have different states where the hovered icon appears larger while the others subtly adjust.
Set up hover triggers
Now, use Framer’s interactive settings to switch between these variants when the cursor moves over different icons. This creates the effect of the dock dynamically responding to your mouse movement.
Wrapping up
Micro-interactions might seem like minor details, but they make a huge impact on user experience. Using the Atomic Animation technique, you can craft interactions that feel polished and intentional. And with Framer, it’s easier than ever to add these little touches that make your site stand out.
For a longer in-depth tutorial check out my lesson: Dynamic interactions.
