In this tutorial we’re going to learn how to bring a character to life by showing you how to create a simple, cutout face rig animation in Elementor, without the use of custom code.
The tutorial will cover:
✔︎ Using SVG shapes
✔︎ Mouse Effects
✔︎ 3D Tilt Effects
✔︎ Z-Index
✔︎ And much more!
Download our character assets designed by our very own Steven Kiridis.
Hey there, it’s Ash from Elementor.
In this tutorial we’re going to bring a character to life by showing you how to create a simple, cutout face rig animation in Elementor, without the use of custom code.
Every moving part in a digital cutout, like every moving part in a paper cutout, must be its own shape.
Be sure to take note of what’s above what? The eyelid above the iris, the hair above the skin, and so on.
Pay close attention to the axis point for each part as well. Combine these principles to create a simple face movement.
Let’s begin by creating a new single column section.
We’ll set the column gap to no gap…height to fit to screen…and column position to stretch.
Selecting the column next we’ll set the vertical align to middle…and the horizontal align to center.
We’ll now open up the navigator to assist with staying organized throughout the tutorial.
With our initial configuration now complete, let’s build our character.
Starting with the face, let’s drop in an image widget.
We’ve already uploaded our images to the media library so will simply select them as and when we need them.
We’ll choose the face first of all and insert it into our page.
In the style tab, we’ll set the width of this image…then in the advanced tab we’ll amend it’s positioning to be inline…and absolute.
We’ll set the unit to viewport width, which will center our assets…and the vertical orientation to bottom which will position our character in the desired location. One slight adjustment with the vertical orientation and the base for character is complete.
Let’s now apply some motion effects. Adding these motion effects will really take our character to the next level. We’ll make good use of the ‘Mouse Track’ options available in Elementor, so that the animations are responsive to what the user is doing with their cursor.
Open up motion effects…and then enable mouse effects.
From here we can switch on ‘mouse track’…we’ll leave the direction as it is…but amend the speed like so.
Now don’t worry that our character currently looks like a candidate for a horror movie…we’ll fix this soon enough.
Let’s now rename the layer in the navigator to help us stay organized.
OK great, next, we’ll add in the t-shirt.
Instead of adding a new blank widget, we’ll simply right click the face and then select duplicate. By doing this, not only is the widget itself copied over, but the internal settings as well like position, alignment and animations, to name but a few. Making good use of the duplicate feature makes for a much faster workflow.
Let’s rename this in the navigator to help with our organization.
And then we’ll update the image to display the t-shirt…and amend the width within the style tab.
Switch over the advanced tab now and expand positioning, then amend the vertical orientation like so.
Even if we set our image to the center of the screen horizontally it still may not look centered. This happens because our assets are hand-drawn and therefore the size of the left side might be slightly different to the right side.
Instead of adjusting its horizontal position from here…we’ll adjust its margin instead. This way the image will always stay in the center.
OK, great! Let’s move onto the next part.
Next up is the jacket.
Let’s duplicate the t-shirt…rename it…replace the image…and update the size.
A great way to manage the assets which will be displayed at the front is by using navigator.
You can easily reposition them like this…or simply apply a z-index using lower…or higher values.
We are going to set it to 5 since we want it to be in front of all the other assets. Let’s continue positioning this.
We’ll apply some margin…and then adjust the vertical orientation.
As you can see, things are really starting to take shape. Let’s now move onto some smaller parts, the ears.
We’ll duplicate the jacket…rename…update the image to show the left ear…and amend the size.
Adjust the vertical orientation…and then the margin. Remove the z-index…and reposition the ear in the navigator.
With the first ear in position, let’s now adjust the mouse tracking. Expand the motion effects tab…and then navigate to ‘mouse track’. We’ll tweak the speed here slightly to better suit this part of our character.
OK great, that’s looking perfect.
Duplicate the left ear now…rename…update the image…and then amend the margin to position it on the other side.
Next, we have the nose. Duplicate the last ear…rename in the navigator…reposition…and update the image.
Amend the width…the margin…and then the vertical orientation.
In the motion effects tab, we’ll adjust the ‘mouse track’ direction to ‘direct’ which will move in the same direction of the user’s cursor.
Duplicate the nose now…rename…update the image to display the mouth…adjust the width of the mouth…then configure the vertical orientation…and finally change the margin a little bit to get closer to the center.
Under motion effects, we’ll change the mouse track direction to opposite.
OK, as you can see our character is really starting to take shape.
Next, we’ll build the hair.
Right click and duplicate the mouth, then rename this layer in the navigator.
We’ll update the image to show the hair base…then adjust the width. Now amend the vertical orientation…and the margin.
The ‘Mouse Track’ we’ll switch off for this layer.
Duplicate the hair base…rename…and reposition. Update the image and insert into the page. Update the width under the style tab…then in the advanced tab…the vertical orientation…and margin.
We’ll switch on the ‘Mouse Track’ and as you can see, because we duplicated this widget the values are saved from before.
Duplicate the last layer…and then rename.
We’ll update the image to display the left section of the hair and insert it into our page.
Update the image width next under the style tab…and then adjust the margin to suit.
In the positioning tab configure the vertical orientation.
Then finally, expand the motion effects…set the direction…and the speed.
OK, looking good.
Let’s now finish the hair.
Duplicate the last layer of hair…rename…and then update the image to display the right hand side of the hair.
Adjust the image width next…and open up the advanced tab. Here we’ll update the margin…and then the vertical orientation.
Under the motion effects tab, we’ll switch the ‘mouse track’ to opposite.
Let’s now add in the eyebrows.
We’ll start by duplicating the last hair image…then rename in the navigator just like before.
Update the image to show the right eyebrow…and then reposition this in the navigator to amend the order.
Adjust the image width…update the margin values…the vertical orientation…the mouse track direction…and the mouse track speed.
Duplicate the right eyebrow and let’s configure the left one now.
Rename…update the image…and adjust the margin.
As you can see the eyebrows already follow the cursor so no more adjustments needed here.
Now let’s finally bring our character to life by adding in the eyes.
Duplicate the last eyebrow image…rename it in the navigator…and then update the image to display the right eye.
We’ll amend the width next…and then the vertical orientation.
Now let’s move it to the back of all our other parts.
We can add zero as our z-index or drag our layer above the face. The result will be the same.
Now we’ll adjust the margin to perfectly place the eye.
Open up the motion effects tab now and set the mouse track to direct, and mouse track speed.
We’re also going to apply a 3d tilt to our eyes, so enable that now. By enabling 3d tilt, it provides a more realistic view of the roundness of the eyes.
OK, great, one last eye to go!
Let’s duplicate…rename…and update the margin.
Let’s tidy up our workspace now and take a look at what we’ve created.
Amazing!
As you can see we have a small amount of overflow. This is easily fixable by selecting the section and setting the overflow to hidden.
Please note the overflow will always be visible in the Elementor editor, but not on the live website.
And there we have it, you now know how to create a stunning animated character which interacts with the user’s cursor, providing a unique and special experience for anybody visiting your website.
Thank you watching.
Be sure to comment below with any questions, and don’t forget to like and subscribe for more amazing tips and tricks tutorials.
