help center

Search
Close this search box.
On this page

Add entrance animations to your page

Last Update: January 14, 2024

The Entrance Animations feature lets you animate your Widgets, Sections, and Columns. This way, as your site visitor scrolls down the page, the elements appear with an entrance animation.

animations blog Add entrance animations to your page 1
  1. Right-click the Section, Column, or Widget’s handle sectionhandle Add entrance animations to your page 3 to edit the element.
  2. Go to the element’s Advanced > Motion Effects tab.
  3. Choose an animation from the Entrance Animation dropdown selections. Note that you can choose your Entrance animation, including “None”, per device.

You can choose from 37 different entrance animations including:

  1. Fading: Fade in, fade in up, down, left, right
  2. Zooming: Zoom in, zoom in up, down, left, right,
  3. Bouncing: Bounce in, bounce in up, down, left, right
  4. Sliding: Slide in up, down, left, right
  5. Rotating: Rotate in, rotate in down left, down right, up left, up right
  6. Attention seekers: Bounce, flash, pulse, rubber band, shake, head shake, swing, tada, wobble, jello
  7. Light speed: Light speed in
  8. Specials: Roll in

 See it live in our  Entrance Animations release post

Note: Elementor respects the “reduced motion property” preference that a user may set. If a user has set any of the following, then motion effects will be disabled for that user:

  • Mac: “System Preferences > Accessibility > Display” and check/un-check the box for “Reduce motion”
  • iOS: “Settings > General > Accessibility” and turn on/off “Reduce Motion”
  • Windows 10: “Settings > Ease of Access > Display > Simplify and Personalise Windows” and turn on/off “Show Animations in Windows”

Note: In Safari, if you are not seeing mouse effects, or you are experiencing the problem of elements disappearing in Safari, this is due to an old jQuery version being used by WordPress. In some cases, viewing Mouse Track effects via Safari might cause a jQuery error which will cause elements to disappear, such as missing carousel arrows, for example. If this happens, you may also see an error which references “maximum call stack size exceeded”. To resolve the issue, either remove entrance animations from widgets with motion effects and/or remove mouse effects from areas that have both scrolling and mouse effects simultaneously activated.

Have more questions? We’re more than happy to assist.

Link is copied to clipboard!
On this page

Is this article helpful?

Share this article

Platinum popup banner