Motion effects

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

Until now, web designers who wanted to incorporate motion effects and animations needed to use external libraries or custom code.

Elementor Pro 2.5 offers an all-in-one solution for creating parallax, animations, and other motion effects, all seamlessly integrated into the Elementor editor.

Scroll Effects

Use Scroll Effects to create amazing animations and interactions as the user scrolls down the page. Here is a list of the scrolling effects:

Vertical displacement

This is the classic parallax effect you've been waiting for. Vertical scrolling causes the item to move at a different speed than the page while scrolling, in the direction and speed of your choice.

Horizontal displacement

Horizontal scrolling means that when the visitor scrolls up and down, the item moves to the right and left accordingly. An example of use: a section with clouds that moves to the right when the visitor scrolls down.

Transparency

Transparency allows you to make items gradually more transparent or more visible in correlation with the visitor's movement. An example is that a title appears and then dissolves according to the parchment.

There are 4 possible directions of effect:

Merge - Which means that the element starts out as transparent and gradually becomes visible.

Disappear - The element starts out as visible and gradually becomes transparent.

Fade into - The item starts out as visible, then fades, and then becomes visible again.

Fade off - The item starts out as transparent, then becomes visible, and then transparent again.

Blur

This setting is similar to Transparency, only instead of transparency, the element becomes blurred. A good example is background images, which get proper focus only when the user scrolls down.

To turn

Here, the element rotates as it travels. A good example is seen in the rotation of stars in the following image:

Note: The two settings, X and Y anchor points, determines the axis around which the element scales or rotates. If you set the top left orientation, the rotation will occur around the top left point of the item. If you set the center-center orientation, the rotation will rotate around its center, like a wheel. This setting is relevant only for the above 'To turn'effect as well as'Scale'effect listed below.

Scale

Scale allows you to grow and shrink items based on displacement. Example: a fund that grows as you move.

Note: Use the ' Apply effects on 'to determine if motion effects apply to mobile devices, desktop computers, or tablets. Mouse effects will only affect desktop devices.

Mouse effects

Mouse track

Create a sense of depth by making items move relative to the visitor's mouse movement.

3D tilt

Similar to how the Mouse Track moves the item in relation to the movement of the mouse, the 3D Tilt effect tilts the item according to the same movement of the cursor.

Motion Effects Browser Compatibility

* Slightly retarded behavior