---
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-09-13
lang: en
author: "Aditya Sharma"
description: "Custom easing controls exactly how a scroll glide speeds up and slows down, for a feel that matches your brand. The free Smooth Scroll block in Nexter Blocks accepts your..."
image: https://nexterwp.com/wp-content/uploads/2025/07/Add-Smooth-Scroll-with-Custom-Easing-in-WordPress-1024x519.png
word_count: 305
---

# 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.

Custom easing controls exactly how a scroll glide speeds up and slows down, for a feel that matches your brand.

The free Smooth Scroll block in Nexter Blocks accepts your own easing formula.

*For every Smooth Scroll setting in one place, see the [Smooth Scroll block guide](https://nexterwp.com/docs/add-smooth-scroll-in-wordpress/).*

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

## Before You Start

- **Edition:** Free — works in Nexter Blocks (free) and with Nexter Blocks Pro.- **Block to enable:** Smooth Scroll, switched on under **Nexter > Blocks** in your WordPress dashboard.- **A formula:** a short math expression that uses `t` (from 0 to 1) and returns a value from 0 to 1.

## Steps

- Open [easings.net](https://easings.net), pick a curve and scroll to its math function. Copy only the part after `return`.

- Replace every `x` with `t`. For example, `1 - Math.pow(1 - x, 4)` becomes `1 - Math.pow(1 - t, 4)`.

- Add the **Smooth Scroll** block, open **Scrolling Core** and click **Advanced**.

- Set **Easing** to **Custom** and paste your formula into **Custom**.

![Easing set to Custom with a formula in the Custom field](https://nexterwp.com/wp-content/uploads/2026/09/smooth-scroll-custom.webp)

- Save and scroll the live page to feel the result.

## Formula Examples

| Feel | Formula |
| ---- | ------- |
| Ease out (quadratic) | `1-(1-t)*(1-t)` |
| Strong ease out | `1 - Math.pow(1 - t, 4)` |
| Ease in (slow start) | `t*t*t` |
| Linear | `t` |

## How It Behaves

- The formula runs in the browser as JavaScript each time the page scrolls.- Duration still sets how long the glide lasts; the formula only shapes the speed over that time.- The editor does not show the effect. Check it on the published page.

## Limitations

- The formula must use `t`. Copied formulas that still use `x` do not work.- A formula with a typo can stop smooth scrolling on the page. Test it after saving.

## Troubleshooting

### Scrolling is back to normal after adding a formula

Check the formula for typos and that every `x` is now `t`, or switch Easing back to a built-in option.

## Related Docs

- [Smooth Scroll block: all settings](https://nexterwp.com/docs/add-smooth-scroll-in-wordpress/)- [Add smooth scroll to the Scroll Navigation block](https://nexterwp.com/docs/add-smooth-scroll-to-the-scroll-navigation-block/)- [Create one-page scroll navigation](https://nexterwp.com/docs/create-one-page-scroll-navigation-in-wordpress/)