---
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 includes a Smooth Scroll block that allows users to add smooth scrolling with custom easing to their WordPress website.
- Users must write their own JavaScript math expression or use easings.net to customize the easing function for smooth scrolling.
- To implement custom easing, users select Custom from the Easing dropdown in the Smooth Scroll block's Advanced tab and input their JavaScript expression.

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. 

## Frequently Asked Questions

**Q: What if my custom easing expression doesn't work?**
A: If your custom easing expression isn't functioning, double-check that you've replaced the 'x' variable with the 't' variable correctly. For example, ensure your expression looks like 't === 0 ? 0 : Math.pow(2, 10 * t - 10)'. A common mistake is forgetting this step, which can prevent the smooth scroll effect from applying properly.

**Q: Can I use the Smooth Scroll block with other themes?**
A: The Smooth Scroll block is part of Nexter Blocks, which is designed specifically for WordPress with Gutenberg as the primary builder. While it may work with other themes, optimal performance and compatibility are guaranteed when used with Nexter Theme. If you're using a different theme, ensure it supports Gutenberg to avoid issues.

**Q: What is the best way to choose a custom easing function?**
A: Choosing a custom easing function depends on the visual effect you want to achieve. Sites like easings.net provide a variety of options. Experiment with different functions to see how they affect the scrolling experience. A well-chosen easing function can enhance user engagement by making transitions feel smoother and more natural.

**Q: How do I check if the Smooth Scroll effect is working?**
A: To verify that the Smooth Scroll effect is functioning correctly, you should preview your page in the frontend after adding the Smooth Scroll block and setting your custom easing. If you don't see the effect, revisit your settings in the Advanced tab to ensure the custom easing expression is correctly entered.

**Q: Does the Smooth Scroll block support mobile devices?**
A: The Smooth Scroll block is designed to work on all devices, including mobile. However, it's important to test the effect on various screen sizes to ensure it performs as expected. Mobile users may have different scrolling behaviors, so consider how your custom easing impacts their experience.