How to create animation effects in elementor

The Motion Effects feature for Elementor extends the current settings capabilities of Elementor to give you more latitude both in the number of animations and the addition of trigger thresholds as well as the selection of devices for which the animation will be visible.

Enable motion effects

Pay attention: this feature can only be applied to a widget.

By default the feature is disabled. In the admin panel select ‘EAC Components’ link ‘Features’ tab then activate the option ‘Motion effects’ and save settings.

Motion effects activate feature

Make animation settings

By their very nature motion effects are very resource intensive of your browser. So be careful not to overload your pages.

Select widget properties, ‘Advanced’ tab, unfold ‘EAC motion effects’ section and activate the ‘Entrance animations’ toggle.

In the list select an animation.

Enable motion effects

For the animation:

  • select its duration,
  • the upper and lower thresholds of the visible part of the window between which the animation will be triggered,
  • finally you can select the devices in which the animation will be visible. Mobile are excluded by default.
Motion effects settings

Credit

Entrance animations: powerfull CSS library animate.css

Leave a Comment