Hi 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 motion effects and bring our designs to life. To make it simpler, I'll refer specifically to entry animations when scrolling.
Preparation
Before we begin, we'll need access to a library of CSS animations. I recommend using Animista, a platform that offers a wide range of pre-built animated effects. Visit Animista to explore the available animations. Select the animation you want to use and take note of its name and variations.Configuration in Elementor
Adding CSS Animations Log in to your WordPress dashboard and go to “Appearance” > “Customize.” Navigate to “Additional CSS.” Delete any existing code and paste the CSS class for the animation you selected in Animista. Copy the keyframes provided by Animista and paste them into 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 into the description of the video or tutorial.Setting up custom animations
Inside the code snippet, define the title for your custom animation set. Paste in 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 your Elementor layout, such as an image or text widget. Access the element’s advanced options and select the custom animation you created. Adjust the animation duration and delay to your liking. Publish the page and check out the animation on scroll. And that’s it! You now have the ability to add your own custom animations to your Elementor layouts. Remember to experiment with different effects and variations to create unique visual experiences. I hope this tutorial was helpful for you. If you enjoyed the video, don’t forget to leave a like, subscribe to the channel, and turn on notifications for more content like this. See you in future videos!
function my_entrance_animations() { return array( 'Custom Animations' => [ 'rotate-scale-up' => 'rotate and scale left', ], ); } add_filter( 'elementor/controls/animations/additional_animations', 'my_entrance_animations' );
