Version 1.5 added the premium plugin from Greensock - ScrollSmoother.
It allows you to enhance the site experience with a smooth-scrolling effect, by leveraging the ScrollTrigger library and the native browser's scrolling.
In a nutshell, you need to wrap your content with 2 divs, assign them the correct ID and turn the feature on from Motion.page settings pane. As a bonus, it even has its own parallax effect that can be applied with data attributes easier than with ScrollTrigger itself.
How to set up the structure?
According to official ScrollSmoother documentation from the Greensock site, it requires wrapping your content with two divs, like this:
Let's take Oxygen Builder as an example. It's super easy and quick to set this up.
You should have your MAIN template set up which is applied to all your pages (or at least all pages with smooth scrolling), and create a structure as from the screenshot below.
Note: If you use any "fixed" elements, like a header, put it outside of this wrapper.
Go back to Motion.page builder, and open the "Global Settings" from the top right corner, where you can directly enable ScrollSmoother.
In the default settings, it uses IDs as per the instructions above, however, you are free to change these and use a different name of ID or even a class (use #ID or .class in the input). After the ScrollSmoother is enabled, it should work right away.
There are a few more options to configure, although the default setup works on its own.
Effects
This is an exciting feature if you are able to use data attributes in your page builder or theme. To be able to use that, enable this option.
Now you can add data-speed attribute to your elements to change the scrolling speed of these elements and create a nice parallax effect.
Eg. data-speed="0.5" would scroll at half the normal speed, and data-lag="0.8" would take 0.8 seconds to "catch up" to the smoothed scroll position.
Here's it would look in Oxygen Builder:
Normalize Scroll
If enabled, it forces scrolling to be done on the JavaScript thread, ensuring it is synchronized and the address bar doesn't show/hide on mobile devices.
Ignore Mobile Resize
If enabled, vertical resizes on touch devices won't trigger the ScrollTrigger.refresh which would recalculate values, avoiding the visual jumps.
Note: By default the smooth scrolling is not enabled on Touch devices, so you would need to set the smoothing time for "Touch". It's really recommended to use smooth scrolling on touch devices.
Smooth Anchor Links
Anchor links don't work properly with a ScrollSmoother, so we went one step ahead, and created our own fix. The script will run through your anchor links, if there are any, and modifies them to use the ScrollSmoother.
You can disable this option if you don't use any anchor / scroll to hash links on your site.
Ease
You can change the easing style of the smoothing with this dropdown. "Expo" is the default option.
Bonus Tip: Using the ScrollSmoother with Gutenberg and page builders that won't allow you to wrap the content
If you use Gutenberg or page builder that doesn't work with DIVs as Oxygen does, we created this snippet that may help you to wrap the content and achieve the structure required for ScrollSmoother. You can put it to CodeSnippets or other plugin of your choice like this:
Here's the raw code:
add_action('wp_body_open', function() {
echo '<div id="smooth-wrapper">';
echo '<div id="smooth-content">';
});
add_action('wp_footer', function() {
echo '</div>';
echo '</div>';
});Let us know with any feedback, we are always ready to improve.