Since the introduction of Elementor Pro 2.5, motion effects have been successfully integrated into our favorite page builder. Undoubtedly, a powerful and intricate set of design tools. Without any coding, we can apply motion effects to any element, column, or section in your Elementor-built website. For the average user, a static website will not be as appealing and eye-catching as one with beautiful animations and seamless transitions. It could almost be considered imperative in web development to learn motion effects in general, as clients are very fond of them. Let us go over each and every effect in Elementor and see for ourselves how they can be applied to your WordPress website.
Locating Motion Effects in Elementor
The developer team behind Elementor has done a tremendous job by accessibly incorporating motion effects into every aspect of the page-builders design tools. You can find motion effects in the widget sidebar, conveniently located in the Advanced settings.
Elementor supports two types of motion effects- Scrolling Effects and Mouse Effects. Scrolling effects are applied when the user scrolls in any direction and mouse effects are applied when the user hovers over the element with his mouse. Both of these effects are enabled and disabled by clicking on the rounded button next to the aforementioned effects.
Keep in mind that Section is the only component of the website, that supports only scrolling effects, but, apart from that, you are free to apply both of these effects everywhere you please. During this tutorial, we advise you to “play” around with different options and values in order to gain a general grasp of the boundaries set by the developers.
You have probably heard about the parallax effect. The vertical scroll is just that. It is a technique used in web development where the background of the website scrolls at a different pace than the foreground. This effect aspires to create an optical illusion in order to create a “feel” of depth within the two-dimensional space of the website. Historically, the vertical scroll is one of the first motion effects created for websites and, still, one of the most effective ones.
Head to the Elementor widget sidebar and take a look at vertical scroll configurations. As you can see, whether the effect has been applied can be seen by the highlighted edit button. If vertical scroll is in effect (or any other motion effect), then a new icon(circular arrow) will appear next to the edit button- Back to Default. This button does exactly what you think it does- reverts settings back to the default state.
Click on the edit button. There are 3 options available to you- Direction, Speed, and Viewport. Direction controls in which way the element will move when the user scrolls. Speed administers how rapidly the element will move. Viewport sets how much of the height of the viewport the element will use.
Similar to the vertical scroll, the horizontal scroll is a parallax effect too but displaces the elements horizontally instead of vertically. The goal of this effect is the same, but applications in web design slightly differ. If you will use the Elementors responsive mode, then you will notice, that configuring horizontal scroll effectively for the mobile version is somewhat finicky.
Options for the horizontal scroll are the same as for the vertical scroll. The only difference is that instead of deciding whether the elements will move up or down, you set their direction to left and right.
Web designers love to use both the horizontal and vertical scroll in conjunction in order to move the element diagonally when scrolling. It is instrumental to study these effects with great care, as you will stumble upon them quite often.
A highly useful feature is the transparency effect. Elementor elements can be made more or less opaque in relation to the visitor’s scroll. For instance, you might want your heading to slowly disappear when the website is being scrolled down.
You can tinker with 3 separate options. Let us take a look at the Directions option first. At the first glance, its capabilities might not seem so clear to you. There are 4 directions available:
- Fade in – The element starts transparent and gradually becomes opaque.
- Fade out – The element starts opaque and gradually becomes transparent.
- Fade out in – The element starts opaque, then fades out becoming transparent, then becomes opaque again.
- Fade in out – The element starts transparent, then becomes opaque, then transparent again.
Next, Level option. Basically, it sets how transparent the element will become. The value is not very intuitive per se, but with a little bit of experience, you will be able to get the general notion of its limits. Viewport sets how much of the height of the viewport the element will use.
Blur is similar to Transparency, but instead of making the element transparent, it becomes blurred. For example, you might want an image to re-gain its original focus only when the user has scrolled down and reached a certain point on your website.
There are 3 settings available. These settings fulfill the same function as settings in Transparency. But it is important to note the slight differences in the direction settings:
- Fade in – The element starts blurry and gradually becomes focused.
- Fade out – The element starts in focus and gradually becomes blurry.
- Fade out in – The element starts in focus, then fades out to become blurry, then becomes focused again.
- Fade in out – The element starts blurry, then becomes focused, then blurry again.
The blur effect is incredibly useful when you want to create an illusion of depth within your website. It tries to mimic how objects appear from a distance in real life and how the optic focus changes based on the distance between two focal points. With a clever approach to design, you will be able to re-create any situation, concerning blur effects, imaginable.
The Rotate animation rotates the element as the user scrolls. The function is clear, but general applications might not be. For instance, let us imagine that you want to display a Ferris wheel on your website. The supporting columns might be a static element like an image and the wheel itself would be a separate element (another image). An image of a wheel in itself would not rotate as the element is static, but if you would apply the rotate effect to it, then you would be able to create an illusion that the wheel is spinning when the user scrolls.
Just as with previous effects, we can set the direction, speed, and relation to the viewport in the settings. Finding the proper values might prove somewhat bewildering at the beginning, but we encourage you to fiddle around with settings to get a general feel for the values.
You might have noticed that after enabling the rotate animation two new options appeared underneath the motion effect list- X Anchor Point and Y Anchor Point. Both of these settings regulate the axis from which your element starts to rotate. For instance, if you would set X Anchor Point to “left” and Y Anchor Point to “top”, then the element would begin rotation from the upper left corner of its container.
In essence, Scale allows you to expand and shrink elements according to scroll. It is mostly used in conjunction with other effects to create complex animations in Elementor. A good example of Scale use would be the background of a section that expands as you scroll down and diminishes when you scroll up.
Again there are 3 different settings. By now, you must have grasped how the team behind Elementor has designed their motion effect settings. Speed and Viewport must have become self-explanatory to you as of now. But the Direction features 4 different options which we would like to discuss somewhat in detail:
- Scale Up – The element starts small and gradually becomes larger.
- Scale Down – The element starts large and gradually becomes smaller.
- Scale Down Up – The element starts large, then becomes smaller, and then grows again.
- Scale Up Down – The element starts small, then becomes larger, and then shrinks again.
The Scale effect features the same X and Y Anchor Point settings as the rotate effect. In the same manner, you can set from where on the axis the element will start to shrink or grow. Usually, Scale is used together with other motion effects to amplify their respective animations.
Now that we are familiar with scrolling effects, let us take a look at mouse effects. Mouse effects are used when there is a need to create a sense of depth. The elements are moved in relation to the user’s mouse movement. When Mouse Track is enabled, the affected element will relocate itself in accordance with the mouse’s motion.
In the settings, you can configure whether the element moves in the opposite direction(Opposite) or the same direction(Direct). Consequently, you can adjust the speed of the animation too.
Similar to the Mouse Track, 3D Tilt, basically, tilts the element in relation to the mouse movement. Commonly, it is used for more than one element as it offers a neat look and feel when applied properly. For instance, images quite often make use of this effect. Nowadays, there is a growing trend of applying this effect for different galleries in order to create an organic feel to the website.
In the same manner, as the Mouse Track, we can adjust the direction of the tilt and the speed of the animation. Be careful when implementing these effects on your website. Even though they are appealing to the eye and may catch the visitor’s attention, be careful not to use them too much. The content you want to display might get lost in the flow of the site as it would be encumbered with different animations.
You must have noticed the Entrance Animation window looming underneath the motion effects. Unlike the motion effects, which were added somewhat recently, Entrance Animations have been around for quite some time. They were added at the same time when Elementor implemented the Box Shadow option for its elements. The purpose for these animations is clear- to introduce an element and make it stick out.
The team behind Elementor has graced us with multiple entrance animations. There are 37 different animations altogether, let us take a quick look at them all:
- Fading -Fade in, fade in up, down, left, right
- Zooming – Zoom in, zoom in up, down, left, right,
- Bouncing – Bounce in, bounce in up, down, left, right
- Sliding – Slide in up, down, left, right
- Rotating – Rotate in, rotate in down left, down right, up left, up right
- Attention seekers – Bounce, flash, pulse, rubber band, shake, head shake, swing, tada, wobble, jello
- Light speed – Light speed in
- Specials – Roll in
Only by experimenting you will be able to find that one animation that suits your needs. With numerous options like these, applications are limitless. You can adjust the duration of animations and, if need be, set a delay for them. Animation Delay will allow you to set up intricate scenarios where elements beautifully enter the website as preordained by your desires.
Motion Effects and Elementors Responsive Mode
Every Elementor user is greatly appreciative of the Responsive Mode. The ability to instantly adjust the design for tablet and mobile devices is a tremendous feature that will allow you to save time and workload. Thankfully, we can regulate the responsiveness of the motion effects too.
With a simple click of a button, we can decide where our effects will be applied to. If you have added additional breakpoints via Elementor settings, then the elements responsiveness can be adjusted for them too. Keep in mind that, even though we can decide how the effects will be applied, we cannot apply responsive rules for each motion effect separately.
Motion effects are an instrumental part of website creation. Simple effects and animations, when used in conjunction with one another, can allow you to create unique design patterns. It is noteworthy to mention, that the Elementor team has built their motion effect library from scratch. This, in return, prevents redundant code and reduces the chances of conflict while minimally affecting the page load time and performance. Motion effects are an incredibly powerful design tool not to be taken lightly. Have a great time exploring the limitless applications of Elementors motion effects and stay tuned for more articles, Cheers!