---
title: "How to Add Smooth Scroll with Custom Easing in WordPress?"
url: https://qa.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://qa.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

- Integrates custom easing into smooth scrolling using the Smooth Scroll block from Nexter Blocks.
- Requires JavaScript math expressions, which can be sourced from easings.net, for custom easing functionality.
- Enables users to select 'Custom' from the Easing dropdown in the Smooth Scroll block's Advanced tab.

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://qa.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://qa.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.