How to create your custom entrance animations with Elementor

Hello friends! I'm Carlos and in today's video I'm going to show you how to create your own custom animations in Elementor. These animations are those that we apply to containers or widgets to add movement effects and give life to our designs. To make it simpler, I will refer specifically to the input animations when scrolling.

Preparation

Before we begin, we will need to access a library of CSS animations. I recommend using Animista, a platform that offers a wide range of predefined animated effects. Visit Animista to explore the animations available. Select the animation you want to use and take note of its name and variations.

Settings in Elementor

Adding CSS animations Access the WordPress dashboard and go to “Appearance” > “Customize”. Navigate to “Additional CSS”. Delete any existing code and paste the CSS class of the animation you selected into Animista. Copy the keyframes provided by Animista and paste it in the same section as well.

Implementation in Elementor

Installing the Code Snippets plugin Install the free Code Snippets plugin from the WordPress repository. Activate the plugin and navigate to the “Code Snippets” section in the WordPress menu. Creating functions to apply animations Create a new code snippet and give it a descriptive title, such as "Function to apply my animations." Copy and paste the PHP code provided in the description of the video or tutorial.

Setting custom animations

Within the code snippet, define the title for your set of custom animations. Paste the CSS animation class you copied from Animista. Define a title for the animation in the selector, for example, "Flip In."

Application in Elementor

Refresh the Elementor page for the changes to take effect. Add an element to the Elementor layout, such as an image or text widget. Access the element's advanced options and select the custom animation you created. Adjust the duration and delay of the animation according to your preferences. Publish the page and check the animation when scrolling. And that's it! You now have the ability to add your own custom animations to your Elementor designs. Remember to experiment with different effects and variations to create unique visual experiences. I hope this tutorial has been useful to you. If you liked the video, don't forget to leave a like, subscribe to the channel and activate notifications for more content like this. See you in future videos!
				
					function my_entrance_animations() { return array( 'Custom animations' => [ 'rotate-scale-up' => 'left rotation and scaling', ], ); } add_filter( 'elementor/controls/animations/additional_animations', 'my_entrance_animations' );
				
			
Share in your social networks

Leave a Comment