Want words that move, fade or turn as visitors scroll down the page?
The Magic Scroll option of the Advanced Typography widget from The Plus Addons for Elementor animates a text item between a start and an end state while the page scrolls.
To check the complete feature overview documentation of The Plus Addons for Elementor Advanced Typography widget, click here.
Requirement – This widget is a part of The Plus Addons for Elementor, make sure it’s installed & activated to enjoy all its powers.
Before You Start
- Edition: Pro — The Advanced Typography widget needs The Plus Addons for Elementor Pro. In the free plugin it shows in the Elementor panel with a lock icon.
- Widget to enable: Advanced Typography, switched on under The Plus Addons > Widgets.
- Magic Scroll is available only in Multiple mode.
Steps
- Add the Advanced Typography widget and set Select Option to Multiple.
- In Text Listing, add your text to the items. How Multiple mode works.
- Open the item that should move and turn on Magic Scroll.
- Click the pencil icon of Scroll Options to set when the animation starts (Offset) and how many pixels of scrolling it lasts (Duration).
- On the Initial tab, open Initial Position and set the start state.
- On the Final tab, open Final Position and set the end state.
- Publish and scroll the page.
Settings
| Setting | What it does | Default |
|---|---|---|
| Offset | Moves the start point of the animation, in px | 0 |
| Duration | How many px of scrolling the animation takes | 300 |
| (X) / Horizontal Distance | Horizontal position | 0 |
| (Y) / Vertical Distance | Vertical position | Initial 0, Final -50 |
| Opacity | 0 (invisible) to 1 (fully visible) | 1 |
| Scale Value | Size, 0 to 2 | 1 |
| Rotate Value | Rotation in degrees, -360 to 360 | 0 |
How It Behaves
- The animation starts when the item reaches the middle of the browser window and follows the scroll position over the Duration.
- With the default settings, the item slides 25 px down over 300 px of scrolling. The distances are applied at half their value, with the sign reversed, so a Final (Y) of -50 moves the text 25 px down.
- Each item has its own Magic Scroll, so one word can move while the others stay still.
Troubleshooting
I can’t find Magic Scroll
It is inside the items of the Text Listing. Set Select Option to Multiple and open an item.
Nothing moves
Check on the published page. The page must be long enough to scroll the item past the middle of the window.
