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:

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.

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.

How to completely disable the entrance animation engine & options

Access WordPress backend > Rey theme > Settings > Misc. tab and look for Enable Animations options and disable it.

Was this article helpful?
Dislike 0
Views: 897

Join the conversation