---
title: "Section Scroll Animation: Settings Overview"
url: https://theplusaddons.com/docs/section-scroll-animation-overview-in-elementor/
date: 2024-01-12
modified: 2026-09-28
lang: en
author: "Aditya Sharma"
description: "Section Scroll Animation ties a section's movement to the page scroll. As the section comes up into view it can fly up, fade in, scale or rotate into place, and..."
image: https://theplusaddons.com/wp-content/uploads/2024/01/Section-Scroll-Animation_-Settings-Overview-1024x536.jpg
word_count: 1065
---

# Section Scroll Animation: Settings Overview

## 

- Section Scroll Animation ties a section’s movement to page scroll, with entrance effects like Fly up, Fade in, Scale smaller, and 3D Rotate forward, plus exit effects like Fade out and Fly away as the section leaves the top of the screen.
- The Plus Addons for Elementor Pro adds Section Scroll Animation as an extension in The Plus Addons > Settings > Extensions, and it appears in the Advanced tab of every container and section instead of as a draggable widget.
- Entrance Delay and Exit Delay accept whole numbers from -20 to 20, but they change animation length rather than start time, and the default empty state acts as -5.
- Mobile Disable/Off is page-wide and device-based, so turning it on for one section disables the effect for every animated section on that page, while Fix Body Overflow addresses a horizontal scrollbar that can briefly appear on some themes.

Section Scroll Animation ties a section's movement to the page scroll. As the section comes up into view it can fly up, fade in, scale or rotate into place, and as it leaves the top of the screen it can fade or fly away. The effect follows the scrollbar, so it runs backwards when the visitor scrolls back up.

It is an **extension**, not a widget: once it is switched on it adds a **Scroll Animation** section to the **Advanced** tab of every container and section, so there is nothing to drag onto the page.

***Requirement - This extension is a part of The Plus Addons for Elementor Pro, make sure it's installed & activated to enjoy all its powers.***

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-extras/row-section-full-scroll-animation/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

## Before You Start

- **Edition:** **Pro**. The extension lives in The Plus Addons for Elementor Pro. With Pro deactivated the controls are gone, no script is loaded and the section renders with no animation at all.- **Prerequisite:** [Elementor](https://wordpress.org/plugins/elementor/) (free) installed and active.- **Extension to enable:** go to **The Plus Addons > Settings > Extensions**, find **Section Scroll Animation** and turn its toggle on. It is on the **Extensions** tab, not the **Widgets** tab.- **Prerequisite:** content above and below the section you want to animate. The effect is driven by scroll position, so a section that is already on screen when the page loads has nothing to animate through.

![The Plus Addons > Settings > Extensions, with the Section Scroll Animation toggle switched on.](https://theplusaddons.com/wp-content/uploads/2026/09/sectionscroll-extension.webp)

## Steps

- Select the **Container**, **Inner Container**, **Section** or **Inner Section** you want to animate.- Open the **Advanced** tab and expand **Scroll Animation**. The full path is **Advanced > Scroll Animation**.- Pick an **In/Entrance Animation**. This plays as the section rises into view. It ships on **None**.- Pick an **Exit Animation**. This plays as the section leaves the top of the screen. It also ships on **None**.- Scroll the published page, not the editor preview, to see it.

![A container selected, Advanced tab, Scroll Animation section, with In/Entrance Animation highlighted.](https://theplusaddons.com/wp-content/uploads/2026/09/sectionscroll-controls.webp)

## The animation choices

Both dropdowns offer the same nine effects plus **None**. The fade is worded **Fade in** in the entrance list and **Fade out** in the exit list; it is the same effect running the other way.

- **Scale smaller**- **Fade in** / **Fade out**- **3D Rotate backward**- **3D Rotate forward**- **Carousel forward**- **Fly up**- **Fly left**- **Fly right**- **3D cube** - the option label itself suggests using the 3D cube entrance animation on the next row as well, so the two sections turn together.

## Delays

**Entrance Delay** and **Exit Delay** take a whole number from **-20** to **20**. Despite the name they change the length of the animation, not when it starts: **positive numbers lengthen it, negative numbers shorten it**. Leave them empty and the extension uses **-5**.

> *These two fields only appear for seven of the nine effects - Fly up, Fly left, Fly right, Scale smaller, Fade, 3D Rotate forward and 3D Rotate backward. Choose **Carousel forward** or **3D cube** and the delay field disappears.*

## What you get on the page

A container set to **In/Entrance Animation: Fly up** and **Exit Animation: Fade out**, with everything else left alone, behaves like this as you scroll down a 1200 by 800 window:

| Scroll position | What the section does |
| --------------- | --------------------- |
| Page top | sits 240 pixels below its final position |
| Part way in | has risen to 22 pixels below its final position |
| Fully in view | in place, fully opaque |
| Leaving the top | opacity drops to about 0.28 |
| Gone past | opacity 0 |

![The section part-way through its Fly up entrance: still offset 79 pixels below its final position.](https://theplusaddons.com/wp-content/uploads/2026/09/sectionscroll-result-entering.webp)

![The same section once the entrance has finished and it sits in place.](https://theplusaddons.com/wp-content/uploads/2026/09/sectionscroll-result-full.webp)

With both dropdowns on **None** nothing at all is added to the page - no class, no script, no transform.

![Section Scroll Animation Demo](https://theplusaddons.com/wp-content/uploads/2026/09/section-scroll-animation-demo.webp)

## Settings table

| Setting | What it does | Default |
| ------- | ------------ | ------- |
| **In/Entrance Animation** | Effect as the section scrolls into view | None |
| **Exit Animation** | Effect as the section scrolls out of view | None |
| **Entrance Delay** | -20 to 20; positive lengthens the entrance, negative shortens it | empty (acts as -5) |
| **Exit Delay** | -20 to 20; positive lengthens the exit, negative shortens it | empty (acts as -5) |
| **Fix Body Overflow** | For themes where an effect briefly shows a horizontal scrollbar | No |
| **Mobile Disable/Off** | Turns the effect off on mobile devices | No |

## How it behaves

- **It follows the scrollbar.** The section's position and opacity are recalculated from the scroll offset, so scrolling back up plays the animation in reverse.- **The exit starts when the section passes roughly a third of the way up the screen**, as the panel note for **Exit Delay** says.- **Mobile Disable/Off looks at the device, not the window width.** Switching it on and then narrowing a desktop browser changes nothing; on a phone user agent the animation really is off. Test it with your browser's device emulation or on a real phone.- **Mobile Disable/Off is page-wide.** Turning it on for one section turns the effect off for every animated section on that page. The panel says as much in its own note.

## Limitations

- **Pro only.** There is no free version of this extension and no free equivalent in the plugin.- **You cannot disable it on mobile for one section only.** See above.- **No delay field for Carousel forward or 3D cube.** Those two effects run at their built-in length.- **The editor preview is not the test.** Publish or preview the page and scroll it in a normal browser window.

## Troubleshooting

### Nothing animates

Check three things: the extension is on under **The Plus Addons > Settings > Extensions**; The Plus Addons for Elementor Pro is active; and at least one of the two dropdowns is set to something other than **None**.

### It animates on desktop but I cannot switch it off for phones

**Mobile Disable/Off** keys off the device's user agent. Resizing a desktop browser will not trigger it - use device emulation or a real phone.

### I turned the mobile toggle on for one section and the whole page lost its animations

That is expected. The setting is read once per page, so one section switching it on disables the effect everywhere on that page.

### A scrollbar flickers while the effect runs

Turn on **Fix Body Overflow**. It exists for exactly this, on themes where a moving section briefly pushes past the page edge.

## Not verified

So you know exactly what has and has not been checked:

- Only **Fly up** (entrance) and **Fade out** (exit) were measured on a page. The other seven effects are listed from the plugin, not from a rendered test.- No **Entrance Delay** or **Exit Delay** value was entered, so nothing here says what a specific number looks like.- **Fix Body Overflow** was never switched on.- Only a top-level container was tested. Inner containers and the older Section element take the same controls, but were not rendered.- No test on real mobile hardware, and no test alongside other scroll features such as Horizontal Scroll or Magic Scroll.

https://www.youtube.com/watch?v=PanFRME2008

## Related Docs

- [Horizontal Scroll: Settings Overview](https://theplusaddons.com/docs/horizontal-scroll-elementor-widget-settings-overview/)- [How to Set Up One Page Scrolling with a Vertical Panel](https://theplusaddons.com/docs/setup-one-page-scrolling-vertical-panel/)

## Frequently Asked Questions

**Q: Why isn’t Section Scroll Animation doing anything on my page?**
A: The effect only runs when the extension is active in The Plus Addons for Elementor Pro and at least one animation dropdown is set to something other than None. It also needs scrollable content above and below the section, because a section already sitting in view has nothing to animate through. A good sanity check is to publish or preview the page in a normal browser window, since the editor preview is not the real test.

**Q: Can I use Section Scroll Animation on a section that starts already visible on load?**
A: That setup is a bad fit for this effect. Section Scroll Animation is driven by scroll position, so it needs the section to move into view as the visitor scrolls. If the section is already on screen when the page loads, there is no entrance travel to animate, which means the effect has nothing meaningful to do.

**Q: What’s the difference between entrance and exit animation in Section Scroll Animation?**
A: Entrance animation controls how the section behaves as it rises into view, while exit animation controls what happens as it leaves the top of the screen. The page says both dropdowns offer the same nine effects plus None, and fade is just labeled Fade in for entrance and Fade out for exit. That makes it easy to pair a subtle entry with a different exit behavior.

**Q: Which Section Scroll Animation settings actually change how long the motion lasts?**
A: Entrance Delay and Exit Delay change animation length, not start time. Positive numbers lengthen the motion and negative numbers shorten it, with values from -20 to 20. If you leave them empty, The Plus Addons for Elementor uses -5. One gotcha: these fields only appear for Fly up, Fly left, Fly right, Scale smaller, Fade, 3D Rotate forward, and 3D Rotate backward.

**Q: How do I stop Section Scroll Animation from flickering a horizontal scrollbar?**
A: Turn on Fix Body Overflow. The page calls this out for themes where a moving section briefly pushes past the page edge and causes a scrollbar flicker. It’s a targeted fix rather than a general animation setting, so it matters most when the effect looks fine but the layout briefly overflows during motion.

**Q: Why does turning on mobile disable for one section turn off animations on the whole page?**
A: Mobile Disable/Off is page-wide, not per section. The setting is read once per page, so enabling it anywhere disables Section Scroll Animation everywhere on that page. It also keys off the device user agent, not browser width, which means resizing a desktop window will not simulate mobile behavior. That’s why testing on device emulation or a real phone matters.