Accessible Animated Off-Canvas Menu with Elementor and Elemental Menu

[@cleversoft426]

Well done

[@janebryan9695]

It's so raw :)

[@franktielemans6624]

Lovely update thx!
I have a question though. I have modified some Elementor entrance animation with CSS and I noticed these overrides do work on my homepage title and buttons but not on the menu items.
I modified the fadeInDown and the fadeInLeft animation:
Here is the CSS:
@keyframes fadeDown {
from {
opacity: 0;
transform: translate3d(0,100%,0);
clip-path: inset(0 0 100% 0);
}
to {
opacity: 1;
transform: translate3d(0,0,0);
clip-path: inset(0 0 0 0);
}
}
.elementor-element.fadeInDown {
animation-name: fadeDown
}
@keyframes fadeLeft {
from {
opacity: 0;
transform: translate3d(-100%,0,0);
clip-path: inset(0 100% 0 100%);
}
to {
opacity: 1;
transform: translate3d(0,0,0);
clip-path: inset(0 0 0 0);
}
}
.elementor-element.fadeInLeft {
animation-name: fadeLeft
}
It's a combined transform translate and clip-path animation for a more modern look.
But when I use the fadeInDown animation with the menu items (as shown in this video) the regular (unmodified) animations are playing. Is there a reason for that?
This is a site I'm working on:
bouwdedobbeleer.be/
On the homepage the hero image and hero titles use the modified fadeInDown animation. (aswel as all the buttons on the website) The heroimage and a few other things use the modified fadeInLeft animation.
Also is there a way to reverse the menu-items animation before the menu closes? So when you click the close button, the menu items play an out animation and then the panel closes.
I managed to do this with the Elementor nav menu widget and custom CSS, here is an example:
franktielemans.be/blog/offcanvas-menu-left-slanted-staggered/
Is this possible with Elemental menu plugin?

[@wpclevel]

Hi Frank,
Yes, the default animations from Elementor are not good enough so Elemental Menu always support custom animation. To achieve that, please follow this article wpclevel.com/blog/2021/04/how-to-customize-an-entrance-animation-with-elemental-menu.html.
If it still does not work, please let me know.

[@franktielemans6624]

Thanks for the quick reply
I never tried the custom animation, but I tried it now via the tutorial and I can't make it work. At least not with this version. I added the CSS from the Animista website, copied the classname and keyframes and created the data attribute as shown in the tutorial.
it plays the random entrance animation that I choose to enable the Elementor animation , not the custom animation from Animista.
here is my testpage
bouwdedobbeleer.be/testpage-for-menu/?preview_id=4708&preview_nonce=a53f95ed05&preview=true
The submenu is behind 'OVER ONS' , I used the bounce animation to enabl the Elementor animations.
The data atribute is data-emm-animation|slide-in-elliptic-top-fwd
The CSS is from here:
animista.net/play/entrances/slide-in-elliptic
Anyway...
But the question was not about the submenu animation, It was about the animations of the menu-items in the off-canvas menu. Can these be custom/modified aswel?

[@wpclevel]

@@franktielemans6624 Hey, You're right. We made some changes and there should be an update for version 1.1.1. Please update to that version and try this tutorial ua-cam.com/video/2o64Imon7-o/v-deo.html

[@franktielemans6624]

​@@wpclevel Thanks, it works now.