Do you want your accordion to appear item by item instead of all at once? A stagger animation fades each item in shortly after the previous one.
The Accordion widget from The Plus Addons for Elementor has a Stagger Animation option.
To check the complete feature overview documentation of The Plus Addons for Elementor Accordion 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 — Stagger Animation is part of The Plus Addons for Elementor Pro. In the free plugin the option shows an upgrade notice instead of working.
- Widget to enable: Accordion, switched on under The Plus Addons > Widgets.
Steps
- Add the Accordion widget and your items.
- In Content > Extra Option, turn on Stagger Animation.
- Set Visibility Delay and Gap (both in milliseconds).
| Setting | What it does | Default |
|---|---|---|
| Visibility Delay | How long each item takes to fade in | 500 |
| Gap | The wait between one item and the next | 500 |
How It Behaves
- The items stay hidden until the accordion scrolls into view, then fade in from the top down.
- It runs once per page load.
Limitations
- Long lists take a while. With 10 items and a 500ms gap, the last item appears about 5 seconds later. Lower the Gap for long accordions.
Troubleshooting
The accordion is invisible
It is waiting to scroll into view. Check the published page and scroll down to it.
