Toplist
- Mistakes
- Beginner
Toplist
- Mistakes
- Beginner
Toplist
- Mistakes
- Beginner
6 Mistakes to Avoid When Using Framer
You might be making some of the biggest Framer mistakes without even realizing it—and trust me, these aren’t small slip-ups. We’re talking about things like corner radius overshoot, mismatched transitions in nested components, and active scroll issues in full-height navigations. But don’t worry, in this post, we’ll break down six major mistakes and how to fix them.
Posted by
Nandi
Table of contents
1. Overshooting corner radius
One of the most common animation mistakes in Framer is overshooting the corner radius when transitioning between variants. Here’s what happens:
If your component has a default state with a corner radius of 1000px and you animate it to 0px, the first 80% of the transition won’t even be visible because anything above a certain radius looks the same.
The actual visible change happens in the last fraction of a second, making the transition feel instant and jarring instead of smooth.
1. Overshooting corner radius
One of the most common animation mistakes in Framer is overshooting the corner radius when transitioning between variants. Here’s what happens:
If your component has a default state with a corner radius of 1000px and you animate it to 0px, the first 80% of the transition won’t even be visible because anything above a certain radius looks the same.
The actual visible change happens in the last fraction of a second, making the transition feel instant and jarring instead of smooth.
1. Overshooting corner radius
One of the most common animation mistakes in Framer is overshooting the corner radius when transitioning between variants. Here’s what happens:
If your component has a default state with a corner radius of 1000px and you animate it to 0px, the first 80% of the transition won’t even be visible because anything above a certain radius looks the same.
The actual visible change happens in the last fraction of a second, making the transition feel instant and jarring instead of smooth.
Overshooting corner.
Overshooting corner.
Overshooting corner.
How to fix it
Instead of using an exaggerated corner radius, calculate the correct fully rounded value:
Take the smaller side of the element (e.g., if a button is 40px high, use 40px).
Divide it by 2 (so 40px / 2 = 20px).
Use 20px as your rounded corner value instead of an extreme number like 1000px.
This ensures that the animation progresses evenly, creating a much smoother effect.
How to fix it
Instead of using an exaggerated corner radius, calculate the correct fully rounded value:
Take the smaller side of the element (e.g., if a button is 40px high, use 40px).
Divide it by 2 (so 40px / 2 = 20px).
Use 20px as your rounded corner value instead of an extreme number like 1000px.
This ensures that the animation progresses evenly, creating a much smoother effect.
How to fix it
Instead of using an exaggerated corner radius, calculate the correct fully rounded value:
Take the smaller side of the element (e.g., if a button is 40px high, use 40px).
Divide it by 2 (so 40px / 2 = 20px).
Use 20px as your rounded corner value instead of an extreme number like 1000px.
This ensures that the animation progresses evenly, creating a much smoother effect.
Button corner equation.
Button corner equation.
Button corner equation.
2. Using the wrong cursor
A small but impactful UX mistake: not setting the correct cursor for interactive elements. Here’s an example:
You hover over a non-clickable card, but the cursor changes to a pointer, making users think it’s clickable.
Meanwhile, an actual link might not have the pointer cursor, making it unclear that it’s interactive.
2. Using the wrong cursor
A small but impactful UX mistake: not setting the correct cursor for interactive elements. Here’s an example:
You hover over a non-clickable card, but the cursor changes to a pointer, making users think it’s clickable.
Meanwhile, an actual link might not have the pointer cursor, making it unclear that it’s interactive.
2. Using the wrong cursor
A small but impactful UX mistake: not setting the correct cursor for interactive elements. Here’s an example:
You hover over a non-clickable card, but the cursor changes to a pointer, making users think it’s clickable.
Meanwhile, an actual link might not have the pointer cursor, making it unclear that it’s interactive.
Show the default cursor on non-clickable elements.
Show the default cursor on non-clickable elements.
Show the default cursor on non-clickable elements.
How to fix it
If an element is clickable, set the cursor to
pointer.If it’s not interactive, use the
defaultcursor.In Framer, go to the right panel, find the Cursor settings, and select the appropriate option.
This small tweak makes your site feel much more intuitive!
How to fix it
If an element is clickable, set the cursor to
pointer.If it’s not interactive, use the
defaultcursor.In Framer, go to the right panel, find the Cursor settings, and select the appropriate option.
This small tweak makes your site feel much more intuitive!
How to fix it
If an element is clickable, set the cursor to
pointer.If it’s not interactive, use the
defaultcursor.In Framer, go to the right panel, find the Cursor settings, and select the appropriate option.
This small tweak makes your site feel much more intuitive!
Selecting the right cursor.
Selecting the right cursor.
Selecting the right cursor.
3. Mismatching transition settings
Ever noticed some animations feel off, like they’re lagging or overlapping weirdly? That’s probably because the transition settings on nested components don’t match.
For example, in an accordion menu:
The individual accordion items might have an animation duration of 0.7s.
But the wrapper component might have a different duration or easing curve, causing elements to animate at different speeds and overlap awkwardly.
3. Mismatching transition settings
Ever noticed some animations feel off, like they’re lagging or overlapping weirdly? That’s probably because the transition settings on nested components don’t match.
For example, in an accordion menu:
The individual accordion items might have an animation duration of 0.7s.
But the wrapper component might have a different duration or easing curve, causing elements to animate at different speeds and overlap awkwardly.
3. Mismatching transition settings
Ever noticed some animations feel off, like they’re lagging or overlapping weirdly? That’s probably because the transition settings on nested components don’t match.
For example, in an accordion menu:
The individual accordion items might have an animation duration of 0.7s.
But the wrapper component might have a different duration or easing curve, causing elements to animate at different speeds and overlap awkwardly.
Awkward transition animation.
Awkward transition animation.
Awkward transition animation.
How to fix it
Ensure that all nested components use the same transition settings (duration, easing, bounce values).
Check they have matching duration values. If one is set to 0.2s and the other to 0.7s, they’ll animate at different speeds.
In Framer, check both the parent wrapper and the nested elements to ensure they match.
Also, check the easing (bounce, ease-in-out, etc.)—even if the duration is the same, different easing can cause misalignment.
Adjust both transitions to a consistent value, like 0.5s with the same easing type.
How to fix it
Ensure that all nested components use the same transition settings (duration, easing, bounce values).
Check they have matching duration values. If one is set to 0.2s and the other to 0.7s, they’ll animate at different speeds.
In Framer, check both the parent wrapper and the nested elements to ensure they match.
Also, check the easing (bounce, ease-in-out, etc.)—even if the duration is the same, different easing can cause misalignment.
Adjust both transitions to a consistent value, like 0.5s with the same easing type.
How to fix it
Ensure that all nested components use the same transition settings (duration, easing, bounce values).
Check they have matching duration values. If one is set to 0.2s and the other to 0.7s, they’ll animate at different speeds.
In Framer, check both the parent wrapper and the nested elements to ensure they match.
Also, check the easing (bounce, ease-in-out, etc.)—even if the duration is the same, different easing can cause misalignment.
Adjust both transitions to a consistent value, like 0.5s with the same easing type.
Setting transition time equally.
Setting transition time equally.
Setting transition time equally.
4. Navigation alignment issues
A common mistake in navigation design is misaligning the navigation elements. Many users:
Place the logo on the left, links in the center, and a button on the right.
Use space-between to distribute the elements, but this creates inconsistent spacing at different screen sizes.
How to fix it
Wrap the logo in a wrapper stack.
Wrap the call to action button to a wrapper stack as well.
Set both the logo wrapper and the button wrapper to width fill. This will make sure both the logo (left) and button (right) elements take up equal space, pushing the links perfectly to the center.
4. Navigation alignment issues
A common mistake in navigation design is misaligning the navigation elements. Many users:
Place the logo on the left, links in the center, and a button on the right.
Use space-between to distribute the elements, but this creates inconsistent spacing at different screen sizes.
How to fix it
Wrap the logo in a wrapper stack.
Wrap the call to action button to a wrapper stack as well.
Set both the logo wrapper and the button wrapper to width fill. This will make sure both the logo (left) and button (right) elements take up equal space, pushing the links perfectly to the center.
4. Navigation alignment issues
A common mistake in navigation design is misaligning the navigation elements. Many users:
Place the logo on the left, links in the center, and a button on the right.
Use space-between to distribute the elements, but this creates inconsistent spacing at different screen sizes.
How to fix it
Wrap the logo in a wrapper stack.
Wrap the call to action button to a wrapper stack as well.
Set both the logo wrapper and the button wrapper to width fill. This will make sure both the logo (left) and button (right) elements take up equal space, pushing the links perfectly to the center.
Proper vs wrong navigation alignment.
Proper vs wrong navigation alignment.
Proper vs wrong navigation alignment.
5. Non-viewport hero sections
Your hero section is the first thing people see, but many users make this mistake:
The hero section doesn’t fill out the viewport properly.
Users see some extra content at the bottom while they’re on the hero section.
5. Non-viewport hero sections
Your hero section is the first thing people see, but many users make this mistake:
The hero section doesn’t fill out the viewport properly.
Users see some extra content at the bottom while they’re on the hero section.
5. Non-viewport hero sections
Your hero section is the first thing people see, but many users make this mistake:
The hero section doesn’t fill out the viewport properly.
Users see some extra content at the bottom while they’re on the hero section.
Hero section not fitting viewport.
Hero section not fitting viewport.
Hero section not fitting viewport.
How to fix it
Set your hero section height to 100vh (viewport height) so it always fills the screen.
Ensure that important content (like headings and CTAs) is visible with no extra content.
In case you want your second section to peek a little, set the hero to 90vh or something so it only takes up 90% of given viewport height.
This makes the site feel more immersive and well-structured right from the start.
How to fix it
Set your hero section height to 100vh (viewport height) so it always fills the screen.
Ensure that important content (like headings and CTAs) is visible with no extra content.
In case you want your second section to peek a little, set the hero to 90vh or something so it only takes up 90% of given viewport height.
This makes the site feel more immersive and well-structured right from the start.
How to fix it
Set your hero section height to 100vh (viewport height) so it always fills the screen.
Ensure that important content (like headings and CTAs) is visible with no extra content.
In case you want your second section to peek a little, set the hero to 90vh or something so it only takes up 90% of given viewport height.
This makes the site feel more immersive and well-structured right from the start.
Filled out hero section.
Filled out hero section.
Filled out hero section.
6. Active scroll on full-height navigation
Some sites have full-screen navigation menus, but they forget one crucial thing:
Scrolling is still enabled when the menu is open, leading to weird interactions.
Users can accidentally scroll the page behind the navigation, which breaks the experience.
How to fix it
Framer Uni has your back, grab the scroll stopper component.
Copy and paste the component to your navigation, and set the
Block Scrollproperty toNoon the default desktop variant, and switch it toYeson the opened state of the navigation, so when that variant is displayed on the website, scrolling is disabled.
This ensures a smooth, controlled navigation experience.
6. Active scroll on full-height navigation
Some sites have full-screen navigation menus, but they forget one crucial thing:
Scrolling is still enabled when the menu is open, leading to weird interactions.
Users can accidentally scroll the page behind the navigation, which breaks the experience.
How to fix it
Framer Uni has your back, grab the scroll stopper component.
Copy and paste the component to your navigation, and set the
Block Scrollproperty toNoon the default desktop variant, and switch it toYeson the opened state of the navigation, so when that variant is displayed on the website, scrolling is disabled.
This ensures a smooth, controlled navigation experience.
6. Active scroll on full-height navigation
Some sites have full-screen navigation menus, but they forget one crucial thing:
Scrolling is still enabled when the menu is open, leading to weird interactions.
Users can accidentally scroll the page behind the navigation, which breaks the experience.
How to fix it
Framer Uni has your back, grab the scroll stopper component.
Copy and paste the component to your navigation, and set the
Block Scrollproperty toNoon the default desktop variant, and switch it toYeson the opened state of the navigation, so when that variant is displayed on the website, scrolling is disabled.
This ensures a smooth, controlled navigation experience.
Scroll stopper component.
Scroll stopper component.
Scroll stopper component.
Wrapping up
These six mistakes are super common but also super easy to fix once you know what to look for. By tweaking your animations, transitions, cursor settings, and layout, your Framer sites will instantly feel more polished and professional.
Wrapping up
These six mistakes are super common but also super easy to fix once you know what to look for. By tweaking your animations, transitions, cursor settings, and layout, your Framer sites will instantly feel more polished and professional.
Wrapping up
These six mistakes are super common but also super easy to fix once you know what to look for. By tweaking your animations, transitions, cursor settings, and layout, your Framer sites will instantly feel more polished and professional.
