Do you want to add custom easing to smooth scroll in WordPress? With custom easing, you can easily customize the smooth scrolling behaviour on your site.
With the Smooth Scroll block from Nexter Blocks, you can easily add smooth scrolling with custom easing to your WordPress website.
To check the complete feature overview documentation of the Nexter Blocks Smooth Scroll block, click here.
Requirement – This block is a part of the Nexter Blocks, make sure it’s installed & activated to enjoy all its powers.
To add custom easing, you have to write your own JavaScript math expression, or you can use sites like easings.net.
Click on the easing you want to use.
On the next page, scroll down to the Math Function section and copy the entire value after “return”.
For example, if the function is
function easeInExpo(x: number): number {
return x === 0 ? 0 : Math.pow(2, 10 * x - 10);
}You have to copy the entire value after “return”, i.e., “x === 0 ? 0: Math.pow(2, 10 * x – 10)”.
Now you have to replace the “x” variable with the ”t” variable to make it work.
So the final expression will be “t === 0 ? 0 : Math.pow(2, 10 * t – 10)”.
Add the expression in Smooth Scroll
Now, add the Smooth Scroll block to the page and follow the steps –
1. After doing the appropriate settings in the Simple tab, go to the Advanced tab and select Custom from the Easing dropdown.
2. Then, in the Custom field, you have to add the JavaScript math expression.
Note: You’ll see the effect in the frontend only.
Now you’ll see the smooth scrolling with custom easing.
