This is a cool feature that’s adding various entrance animations to sections, columns and widgets.
The effects can be added only on Sections and Columns, while on widgets, there’s only the possibility of overriding inherited options.
Animations are not running in Elementor Edit Mode.
Effect types:
- Reveal eg: London demo’s above the fold part is fully animated with reveal effects with black background.
- Fade In eg: https://d.pr/v/J7MaVn
- Fade in from bottom https://d.pr/v/NssYMp
- Slide hidden from bottom https://d.pr/v/FiHrww
Adding entrance animations on Sections
Open a section’s settings, access the Advanced tab > Motion Effects section of settings eg: https://d.pr/i/OEgNW4 .
Sections only support Reveal, Fade in and Fade in from bottom effects (without Slide hidden from bottom).
For sections, the animations will start running only when the section is in viewport.
You can control the duration and delay in miliseconds.
Adding entrance animations on Columns
Open a column’s settings, access the Advanced tab > Motion Effects section of settings eg: https://d.pr/i/3GFjLi .
The supported options are:
Activation trigger:
When to run animations?
- In viewport . When this column has entered the viewport upon scrolling the page.
- After parent section has been animated. So after the parent section has finished its animation, it will trigger this column’s animation. This will work only if the parent section is animated too
Animation subject:
What to animate?
- Column itself . Choosing this will animate only this column.
- Widgets in this columns . Animate the widgets in this column, sequentially. In each widget you can override the animation parameters.
Animation duration. How long should the animation last.
Animation Delay. If you want to add a delay.
Reveal settings:
If you choose reveal you can configure these parameters:
Direction. Start the animations either from Left or Top.
Zoom animation. If you want to apply a subtle zoom effect.
Background color. If you want the reveal curtain to be colored.
Determine if a column has animations
A visual highlight is provided to columns handles when the Entrance animation is enabled.
Please know that this feature overrides Elementor’s built-in animations, so you won’t be able to find Elementor’s effects unless you fully disable Rey’s animation system.
How to completely disable the entrance animation engine & options
Access WordPress backend > Rey theme > Module Manager and look for Elementor Animations module toggle and disable it eg: https://d.pr/i/LBn1dX .