How to add smooth scrolling on Framer

beginner 8 min read Updated 2026-03-18

Quick Answer

Add smooth scrolling in Framer by selecting your frame or page, navigating to the Scroll section in the Properties panel, and enabling smooth scrolling with custom easing curves. You can also use Link components with scroll behavior for navigation between sections.

Try Framer Full Framer Review

Prerequisites

Basic Framer knowledge
Understanding of page structure
Familiarity with component properties
Knowledge of scroll targets

Step-by-Step Instructions

Select your scrollable frame

Open your Framer project and select the Frame or Page that contains scrollable content. Make sure the frame has content that extends beyond its visible height to enable scrolling functionality.

If your frame doesn't scroll, increase the content height or reduce the frame height first.

Access scroll properties

In the Properties Panel on the right side, locate and click on the Scroll section. If you don't see it, make sure your selected frame has Overflow set to Visible or Scroll in the Layout section.

Enable smooth scrolling

Within the Scroll section, toggle on Smooth Scroll. You'll see additional options appear including Scroll Behavior settings and easing controls.

The smooth scroll toggle is the key setting that transforms regular scrolling into fluid motion.

Customize scroll behavior

Adjust the Scroll Speed slider to control how fast the smooth scrolling responds. Set the Easing curve by selecting from presets like Ease Out, Ease In Out, or create a custom curve using the bezier curve editor.

Start with 'Ease Out' for a natural feeling scroll behavior that most users expect.

Set up scroll anchors (optional)

To create smooth scrolling navigation, select elements you want to scroll to and give them unique names in the Layers Panel. These will serve as scroll targets for navigation links.

Use descriptive names like 'hero-section' or 'contact-form' for easy identification.

Add navigation links

Create Link components or add OnClick interactions to buttons. In the link settings, choose Scroll To as the action and select your target element from the dropdown. Enable Smooth in the scroll options.

Test and refine

Use Preview Mode (Cmd/Ctrl + Enter) to test your smooth scrolling. Try scrolling with mouse wheel, trackpad, and clicking navigation links. Adjust the scroll speed and easing if the motion feels too fast or slow.

Test on different devices as smooth scrolling can feel different on mobile vs desktop.

Publish and optimize

Once satisfied with the smooth scrolling behavior, Publish your site and test it in a real browser environment. Monitor performance and consider reducing scroll complexity if you notice lag on slower devices.

Smooth scrolling can impact performance, so use it purposefully rather than on every scrollable element.

Common Issues & Troubleshooting

Smooth scroll option is not visible

Ensure your frame has content that overflows its boundaries and the Overflow property is set to Scroll or Visible in the Layout section.

Scrolling feels too slow or fast

Adjust the Scroll Speed slider in the Scroll properties. Lower values create slower, more dramatic scrolling while higher values feel more responsive.

Navigation links don't scroll smoothly

Check that your link components have Scroll To action selected and the Smooth option is enabled. Verify target elements are properly named and selectable.

Smooth scrolling causes performance issues

Reduce the number of elements with smooth scrolling enabled and consider using simpler easing curves. Test on lower-end devices to ensure acceptable performance.

Prices mentioned in this guide are pulled from current plan data and may change. Always verify on the official Framer website before purchasing.

Visit Framer View Framer Pricing