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.
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 (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.
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.
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 |
With both dropdowns on None nothing at all is added to the page – no class, no script, no transform.
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.
