help center

Search
Close this search box.
On this page

Motion effects

Last Update: January 14, 2024

Motion Effects are a powerful set of controls for adding beautiful transitions and animations to your design.

Elementor Pro allows creating parallax, animations and other Motion Effects from the Elementor editor.

Motion Effects browser compatibility

ChromeFirefoxSafariOperaEdgeInternet Explorer
SupportedSupportedSupportedSupportedSupported (laggy response)Not Supported

Follow these steps to create Motion Effects:

  1. Login to WP admin.
  2. Edit the image where you want to apply motion effect. The Edit Image panel shows on the left. For information on creating and editing images, see Add Images.
  3. Click Advance > Motion Effects.
    Motion effects 9
  4. You can set the following:
    • Scrolling Effects
    • Mouse Effects
    • Sticky (For details, see Create A Sticky Header)
    • Entrance Animation – Choose the desired animation. This animates widgets, containers, sections, and columns. Animated items gradually transition into the page in an animated sequence once the user scrolls to them.
  5. Click Publish.

Scrolling Effects

Use Scrolling Effects to create amazing animations and interactions when the user scrolls through the page.

Motion effects 1

Here’s a list of the scrolling effects:

Scrolling effectsDescriptionExample
Vertical ScrollMakes the element move at a different speed than the page while scrolling, in the direction and speed of your choosing.Parallax effect.
Motion effects 10
Horizontal ScrollWhen the visitor scrolls up and down, the element moves right and left accordingly.A section with clouds that moves to the right when the visitor scrolls down.
Motion effects 8
TransparencyGradually makes elements more transparent or more visible in correlation to the visitor’s scroll.Titles appear and then dissolve in accordance with the scroll.
Motion effects 7
BlurThis setting is similar to Transparency.
Here, instead of going transparent the element gets blurred.
Background images get proper focus when the user scrolls down.
Motion effects 5
RotateThe element rotates as you scroll.See the rotation of the stars.
Motion effects 11
ScaleThe elements grow and shrink according to scroll.A background that grows while scrolling.
Motion effects 2
X Anchor Point
Y Anchor Point
Determine the axis around which the element scales or rotates.
• If you set orientation left-top, the rotation will happen around the left-top point of the element.
• If you set orientation center-center, the rotation will rotate around its center, like a wheel.

This setting is relevant only to the following motions:
• Rotate
• Scale
NA
Apply Effects OnChoose where you want to apply the effects on – Desktop, Tablet or Mobile.NA
Effects Relative ToDetermines the base for the calculation of scrolling effects and works with the Viewport scale set inside each effect.

Mouse Effects

Note
Mouse effects will only affect desktop devices.
Motion effects 6
Mouse effectsDescriptionExample
Mouse TrackCreate a sense of depth by making elements move in relation to the visitor’s mouse movement.Stars move with mouse movement.
Motion effects 4
3D TiltTilts the element according to the movement of the cursor.Image titles in the direction of cursor movement.
Motion effects 3

Exceptions

Reduced motion property

Elementor respects the “reduced motion property” preference that a user may set. If a user has set any of the following, then motion effects is 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”

jQuery and element animations

You might encounter animation or element display issues in Safari due to an outdated jQuery version used by WordPress.

  • Viewing “Mouse Track” effects in Safari can sometimes trigger a jQuery error.
  • This error can cause elements to disappear, like missing carousel arrows.
  • You may also see a “maximum call stack size exceeded” error message.

Following are the options to resolve this issue:

  • Disable entrance animations for widgets with motion effects.
  • Remove mouse effects from areas that combine scrolling and mouse effects.

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

Stuck?
Our Elementor Expert is Ready

Book a 45-min video consultation call with an Elementor expert and elevate your site!