This tutorial shows you how and where you can edit the entrance animations or swap them with new animations. I also replaced some animations with a cool block reveal animation for widgets and columns.
What is a block reveal animation?
• Block Reveal Effect | ...
VERY IMPORTANT UPDATE 27-08-21
This tutorial has a long story and things are changed since the Elementor 3.3.0.
The animations are loaded in a different way and my stylesheet did'nt work anymore since Elementor 3.3.0 and later.
The good news is that I could make it work again with a new stylesheet.
Everything can be loaded via CSS now. You don't have to dequeue the original entrance animations and enqueue the customised animations anymore to prevent styles got overridden by every new Elementor update.
DOWNLOAD the new stylesheet here and read the instructions:
glyphbox.be/downloads/custom-...
If you want to see the results of the animations replacement right away, skip this video to 4:34 or via this live page franktielemans.be/blog/replace...
Timestamps
0:00 - Introduction
0:09 - What's wrong with the entrance animations?
1:58 - Where can I find the CSS file for the animations?
4:34 - Showcase of the revamped animations
5:48 - Showing the block reveal animations
6:20 - Where is your animations.min.css file located?
6:29 - How to use this in the Elementor editor?
7:28 - How to use the block reveal animations?
8:20 - Solving problems
11:36 - CSS variables - change directions
12:42 - CSS variables - Change block colors
13:58 - CSS variables - Change animations durations and delays
15:20 - Change element offset values for fade animations
16:00 - Block reveal animations in columns
16:48 - How to replace animations yourself?
Credits to the people from Aminista for their nice animations library
animista.net/
Thanks for watching and if you find this useful, feel free to subscribe my channel for more tutorials about Elementor and CSS
You can also buy me a beer as a token of appreciation for the effort I took in these tutorials via this link:
www.paypal.com/donate/?token=...
Негізгі бет Тәжірибелік нұсқаулар және стиль Elementor entrance animations replacement
Пікірлер: 48