Elementor Animated Shape Divider
Updated · MoxKit 1.4.4 · Download free on WordPress.org
The Elementor animated shape divider extension animates the Shape Divider that Elementor already has on Containers and Sections. Pick a shape under Style > Shape Divider as usual, then choose how it moves.
- Extension Animated Shape Divider
- Where Container or Section > Style > Shape Divider Animation
- Switch MoxKit > Extensions
- Price Free
Table of contents
What does Animated Shape Divider do?
Flow moves the shape sideways in an endless loop (the shape is rebuilt so its ends meet), Tide moves it up and down, Breathe scales it gently and Sway rocks it. An optional see-through second layer adds depth.
Animated Shape Divider is an extension: it adds settings to Elementor's own elements instead of adding a new widget. Turn it on or off for the whole site under MoxKit > Extensions.
Features
- Animations for the top and bottom divider separately: flow, tide, breathe, sway.
- Direction, cycle duration and strength.
- Second layer for depth with its own opacity.
- Pause while hovered.
- Pauses off screen.
How to use the Elementor animated shape divider
- Enable Animated Shape Divider under MoxKit > Extensions.
- Select a Container and add a shape under Style > Shape Divider.
- Open Style > Shape Divider Animation and pick an animation for the top or bottom divider.
- Click Update to save the page.
Animated Shape Divider settings
All settings live in Container or Section > Style > Shape Divider Animation.
| Setting | Type | Options and notes |
|---|---|---|
| Animation | Select | None, Flow (endless sideways loop), Tide (flow + rise and fall), Breathe (rise and fall), Sway (lean side to side) (default: None) |
| Direction | Choice | To the left, To the right (default: To the left) |
| Cycle duration (s) | Slider | Lower is faster. |
| Strength | Slider | |
| Second layer for depth | Toggle | A see-through copy drifts the other way behind the shape. On / Off |
| Layer opacity | Slider | |
| Pause while hovered | Toggle | On / Off |
Which shapes work best
Waves, Waves brush, Curve, Mountains and Clouds look natural with Flow. Triangle and Arrow shapes suit Breathe or Sway. Tide works with almost every shape. Remember to set the divider color to the background of the next section so the edge stays seamless.
Performance
The animation is CSS based and pauses when the Container is off screen. Visitors with reduced motion see the divider without movement.
The animation settings explained
Animation picks the motion for that side. Direction sets which way Flow travels. Cycle duration is the time for one full loop in seconds: higher values are calmer. Strength controls how far the shape moves or scales. Second layer for depth adds a lighter copy behind the divider with its own opacity, and Pause while hovered stops the motion while the pointer is over the Container.
Tips
- Waves, curves and mountains look best with Flow.
- Keep the strength low for subtle motion behind text.
Summary
The Elementor animated shape divider comes free with MoxKit Addons for Elementor. Switch it on under MoxKit > Extensions, open Container or Section > Style > Shape Divider Animation and pick the options described above. It works with the free version of Elementor.
Animated Shape Divider FAQ
Do I need a shape divider first?
Yes. The extension animates the divider you choose under Style > Shape Divider.
Can top and bottom move differently?
Yes. Each side has its own animation settings.
Does the Flow animation leave a gap at the edge?
No. MoxKit rebuilds the shape so its two ends meet, so the loop is seamless.
What is the second layer?
A see-through copy of the divider that moves at a different pace, which gives the edge more depth. Set its opacity per side.
Does it work with old Sections?
Yes. The animated shape divider works on Containers and on classic Sections.