How can I achieve a smooth scrolling effect in Webflow, like the one on the Oui Will website?
TL;DR
- Enable Webflow's native smooth scroll in Page Settings for basic anchor link scrolling.
- For advanced inertia-style scrolling, integrate a third-party library like Lenis via custom code in the Footer, wrap content in a scroll container, and initialize the script.
- Disable Webflow's built-in scroll animations when using custom scroll libraries and use custom event listeners instead.
- Use Webflow’s native scroll-based interactions for simpler effects without custom code.
To replicate the smooth scrolling effect seen on sites like Oui Will in Webflow, you’ll need to combine Webflow’s built-in scrolling options with a few custom code enhancements.
1. Enable Webflow’s Native Smooth Scroll
- Go to Project Settings > Page Settings
- In Page Settings, scroll to “Advanced Settings”
- Check the box labeled “Smooth Scroll” (also called “Smooth Scroll to Anchor Links”)
- This enables smooth scrolling for anchor links, but not advanced inertia or easing
2. Use a Third-Party Smooth Scrolling Library (like Locomotive Scroll or Lenis)
For finer control and inertia scrolling, use Lenis (modern, light) or Locomotive Scroll.
- Include the library inside the Footer Code section in Page Settings
- Example: Add Lenis JavaScript via CDN (insert inline in the Before </body> tag area)
- Initialize the script and wrap your content inside a scroll container (
<div id="lenis-root">)
Note: As per Webflow policy, avoid using full-sized custom scripts without proper structure, or it may conflict with Webflow’s own animations.
3. Adjust Webflow Interactions to Sync with Custom Scroll Libraries
- Turn off Webflow’s scroll-based animations if using a custom scroll engine like Lenis
- Instead, trigger animations using custom event listeners attached to scroll positions
- Ensure interactions are bound to the transformed container (e.g.,
#lenis-root) if a library transforms scroll behavior
4. Consider Using Webflow’s Native Scroll-Based Interactions for Simpler Effects
- For basic scroll-based animations, no code is needed:
- Select the element
- Go to Interactions panel
- Choose Scroll Into View or While Page is Scrolling
- Control opacity, scale, movement, etc., all with easing and duration
Summary
To achieve ultra-smooth, inertia-style scrolling like the Oui Will site, use a library like Lenis alongside Webflow. For simpler smooth scrolling, enable Webflow’s native smooth scroll and add scroll animations through the Interactions Panel.