Improving The Default Elementor Entrance Animations

[@sunsetstudioz]

three years later in mid 2024 and still works. am now going to delete 7 plugins just because i was looking for this sweet entrance animation and you made it easy bro , i love you, you earned my sub.

[@bruceaisher]

Wow such an improvement - I always hated how the animations would fly in from the left/right - made it look so dated and also ended up showing the scroll bar. Now it's working great - thank you!

[@elementhow691]

Cheers Bruce I'm glad you like them now!

[@borislivshits11]

thank you so much, I was looking for a solution for this for a long time and didnt find this tutorial. I didnt imagine I can fix this so easily. thanks!!!

[@DKingFisher]

You can also adjust the value and get even better result depending on your taste. I use 100-150px

[@bharat61020]

How will this new css code for animation replace the one which elementor already has.. . For example elementor already has the keyframs and css inside it... Will the default css not conflict with your css?? Actually the new css isn't working for me the default one overrides my css for animations....

[@juanb.274]

same!

[@bharat61020]

@@juanb.274 I have found the solution for the custom animations in elementor.... Check out this video.... kzbin.info/www/bejne/lZKtdIuMm9OAmdE Note:- check the description of this video, everything is explained in the description, including the source for the css. You will just need to copy paste that css... They also have cool block reveal animations which you can try out on your elementor site.

[@_mzkr_]

I did exactly as you did but it did not change anything. I think it is on the right path so I am doing some more experimentation. Currently, I have tried creating a SCSS partial and adding it to my child style.css file. That did not work so I added the code directly to the customizer and it did not work either. Is there a live version where I can go and inspect the code? Maybe something has changed in Elementor which has blocked this. (update: I added it via Elementor Custom Code and it works but it would be good if I could add it to my CSS for modularity and caching...)

[@elementhow691]

It's still working just fine, as you can see in my before and after demos, in my tutorial. Yes indeed there is a live version, see at the start of the tutorial, you will find it there. I'm glad you were able to resolved this. Cheers mate!

[@franc0tic0]

Thanks bro! Awesome improvement

[@liamwiebe5272]

Worked perfectly! Thanks so much

[@christosdaglis1163]

Great insights! How can we find the rest of the animations names Elementor uses (for example the hover over gallery items animatins) and modify them in the same way?

[@elementhow691]

You will need to dig into the Elementor CSS files for this! That one: /wp-content/plugins/elementor/assets/lib/animations/animations.min.css

[@rocaivan]

What would be the CSS for the popup entrance improvement in the same way?

[@elementhow691]

Here is how you can improve them. You completely remove any entrance animation from the popup settings, and instead, you set the animation to the section that's in your popup template. Then it will work directly!

[@rtydesign]

I was wondering how to adjust this. Thanks so much for this!

[@elementhow691]

Cheers!

[@alejandromunoz463]

This tutorial is great thank you so much

[@elementhow691]

You're very welcome!

[@basicelement]

I created my own animation but it runs on page load. How to run when element appear on page (on scroll)?

[@mxicklejx7233]

Kinda late 😅 but did you found the solution? Cuz i am having same issue right now..

[@adamwhite1810]

Do you know how to make the same with the scrolling effects?

[@elementhow691]

The scrolling effects work completely differently... you can adjust the 'size' of the animation by adjusting the settings.

[@cacomartin]

Excellent ajustements! Well done! Thanks!

[@elementhow691]

Welcome!

[@PeterBroennimann]

Excellent, thx man! Elementor should change this as well.

[@elementhow691]

Agreed

[@shafnabibim6372]

Very helpful video, sir could you make a video on how to loop elementor entrance animations.

[@leewseea]

thank you kind sir, this is really helpful.

[@adied7725]

Thanks, great tips and great help I've looked at your webpage to👍😊

[@tauhidulislam29]

Nice tutorial. keep it up :)

[@mubasshirkhan9449]

Awsome tutorial

[@nikaholiq]

Hey awesome, is there a way to reset these when u scroll past them?

[@elementhow691]

Yes there is.. here : element.how/elementor-replay-entrance-animations-each-scroll-down/

[@bySterling]

Genius!

[@ITPGI]

Sir, thanks for your video, but not working for me. I have used FadeInup @keyframes fadeInDown { from { opacity: 0; transform: translate3d(0, -30%, 0) } to { opacity: 1; transform: none } } .elementor-element.fadeInDown { animation-name: fadeDown } @keyframes fadeInLeft { from { opacity: 0; transform: translate3d(-30%, 0, 0) } to { opacity: 1; transform: none } } .elementor-element.fadeInLeft { animation-name: fadeInLeft } @keyframes fadeInRight { from { opacity: 0; transform: translate3d(20%, 0, 0) } to { opacity: 1; transform: none } } .elementor-element.fadeInRight { animation-name: fadeRight } @keyframes fadeInUp { from { opacity: 0; transform: translate3d(0, 3%, 0) } to { opacity: 1; transform: none } } .elementor-element.fadeInUp { animation-name: fadeInUp } Please guide me.

[@BryanPhilips]

Thank you 🙏🏻

[@fatjay9402]

thank you ! very nice

[@elementhow691]

Welcome!

[@juanb.274]

dont work on mobile now :(

[@elementhow691]

I just tested it, worked fine on Safari iOS

[@juanb.274]

​@@elementhow691 I don't know if you have updated the code, I see you now have to pay to access, but for me, I needed to add browser support, I mean I took the code from here years ago if I recall well...thanks for replying!

[@elementhow691]

@@juanb.274 No need to pay to access...