---
title: "How to Add Smooth Scroll with Custom Easing in WordPress?"
url: https://nexterwp.com/docs/add-smooth-scroll-with-custom-easing-in-wordpress/
date: 2025-07-16
modified: 2026-04-14
author: "Aditya Sharma"
description: "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..."
image: https://nexterwp.com/wp-content/uploads/2025/07/Add-Smooth-Scroll-with-Custom-Easing-in-WordPress-1024x519.png
word_count: 288
---

# How to Add Smooth Scroll with Custom Easing in WordPress?

## Key Takeaways

- Nexter Blocks Smooth Scroll block adds smooth scrolling with custom easing to a WordPress website, and it requires Nexter Blocks to be installed and activated.
- Custom easing uses a JavaScript math expression copied from a function’s value after “return”, then replaces the “x” variable with “t” before it is added.
- Smooth Scroll block uses the Advanced tab’s Easing dropdown set to Custom, and the effect appears on the frontend only.

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](https://nexterwp.com/docs/add-smooth-scroll-in-wordpress/).

***Requirement  - This block is a part of the Nexter Blocks, make sure it's installed & activated to enjoy all its powers.***

[LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-smooth-scroll)

To add custom easing, you have to write your own JavaScript math expression, or you can use sites like [easings.net](https://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.