How to use animated entrance effects

You are here:
Estimated reading time: 1 min

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:

LinkAdding 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.

LinkAdding 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:

LinkActivation 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

LinkAnimation 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.

LinkReveal 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.

LinkDetermine if a column has animations

A visual highlight is provided to columns handles when the Entrance animation is enabled.

Column handles have a red dot if entrance animations are 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.

LinkHow 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 .

Was this article helpful?
Dislike 4
Views: 2865

Suggest article improvements

Please use this form to suggest improvements and report missing or outdated content. Support requests will most likely not be answered and it's best to use the Support Request Form instead. Thanks!