How can I achieve a smooth scrolling effect in Webflow, like the one on the Oui Will website?
TL;DR
- Use Webflow’s native smooth scroll for simple anchor link transitions by setting link targets and section IDs.
- For inertia-based smooth scrolling like Oui Will, integrate Locomotive Scroll or Lenis by embedding scripts, wrapping content in a scroll container, and initializing the scroll in custom code.
- Adjust your DOM and Webflow interactions to ensure compatibility with the chosen scroll library.
To achieve a smooth scrolling effect similar to the one on the Oui Will website, you need to use custom scrolling behavior in Webflow, either via built-in features or by integrating third-party libraries like Locomotive Scroll.
1. Use Webflow’s Native Smooth Scroll for Anchor Links
Webflow supports basic smooth scrolling for on-page anchor links.
- Select a link in your project (e.g., inside the navbar) and set the Link Settings to scroll to a specific section ID.
- Set the target section’s ID (under Element Settings panel).
- Webflow automatically applies a native smooth scroll effect when a link scrolls to an anchor on the same page.
This is simple but limited to anchor link transitions—it doesn't affect overall page scroll speed or inertia.
2. Enhance Scrolling with Locomotive Scroll
To get more advanced smooth inertia-based scrolling (like Oui Will), you’ll need to use Locomotive Scroll.
- Go to https://locomotivemtl.github.io/locomotive-scroll to learn about the library.
- Inside Webflow:
- Add an Embed component to the
<head>and the end of<body>via Page Settings or an Embed Element. - Load the Locomotive Scroll CSS and JS via CDN (e.g., via jsDelivr).
- Wrap your page's main content in a
divwith an attribute likedata-scroll-container. - Initialize the smooth scrolling in a script: target the container and apply
smooth: true.
Important: Webflow doesn’t natively support this integration, so you need to ensure your structure matches Locomotive Scroll requirements, or scrolling/design interactions might break.
3. Adjust Webflow Interactions Compatibility
- If you’re using Webflow interactions (e.g., scroll-based animations), they may not work properly with Locomotive Scroll because of how it controls scroll behavior.
- To make them compatible:
- Use
data-scrollattributes for elements you want to animate. - Consider using GSAP ScrollTrigger with Locomotive Scroll to handle animations correctly.
4. Use an Alternative Like Lenis or Smooth Scrollbar
- Lenis by Studio Freight is a modern smoother alternative and easier to integrate than Locomotive.
- The process is similar—add the Lenis library via CDN, wrap content, and initialize smooth scrolling via script.
- It’s more inertial and fully responsive.
Summary
To replicate the Oui Will smooth scrolling in Webflow:
- Use Webflow’s native smooth scroll for basic anchor effects.
- For advanced inertia-based scrolling, integrate Locomotive Scroll or Lenis.
- Embed required scripts and structure your DOM accordingly.
- Ensure any Webflow interactions are compatible with your custom scroll library.