Full screen menu

Adress 1
Adress 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et metus neque. Aenean sed lorem in ex molestie viverra. Ut venenatis ex massa, quis volutpat mi condimentum at. Proin quis metus dictum, efficitur ex sit amet, pretium est.

Thanks to www.elementorcodes.com

Download and unzip the file
Import to Elementor template

This is the code for the plain color animation.

@keyframes moveOute {
0% {
transform: translateX(100%);
}
49% {
transform: translateX(0);
}
94% {
transform: translateX(0);
}
100% {
transform: translateX(0);
}
}

.textbackground {
display: none;
position: fixed;
top: 0;
left: 100%;
height: 100%;
width: 100%;
text-align: center;
background-color: #fff;
z-index: 9999;
animation: moveOut 3.3s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
}

.curtain {
position: fixed;
top: 0;
left: 100%;
height: 100%;
width: 100%;
text-align: center;
background-color: #ff0000;
z-index: 9999;
animation: movesOut 3.3s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
}

.textbackgrounds {
opacity: 0;
position: fixed;
top: 0;
left: 100%;
height: 100%;
width: 100%;
text-align: center;
background-color: #fff;
z-index: 9999;
animation: moveOut 3.3s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
}

.curtains {
position: fixed;
top: 0;
left: 100%;
height: 100%;
width: 100%;
text-align: center;
background-color: #ff0000;
z-index: 9999;
animation: movesOut 3.3s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
}

@keyframes moveOut {
0% {
transform: translateX(0);
}
33% {
transform: translateX(-200%);
}
59% {
transform: translateX(-200%);
}
59.6% {
transform: scaleY(.005) scaleX(0);
}
100% {
transform: scaleY(.005) scaleX(0);
}
}

@keyframes movesOut {
0% {
transform: translateX(0);
}
33% {
transform: translateX(0);
}
59% {
transform: translateX(-200%);
}
59.6% {
transform: scaleY(.005) scaleX(0);
}
100% {
transform: scaleY(.005) scaleX(0);
}
}

</style>

This is the code for the large icon animation. You will need to replace the roar.svg URL with your own.

<div class=’textbg’> </div>
<div class=’textbgs’> </div>
<style>
#rightsection {
display: none;
position: fixed;
top: 0;
left: 0;
animation: moveOutes 3.3s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
width: 100vw;
}
@keyframes moveOutes {
0% {
transform: translateX(100%);
}
33% {
transform: translateX(0);
}
84% {
transform: translateX(0);
}
100% {
transform: translateX(0);
}
}
.textbg {
display: none;
background-image: url(/wp-content/uploads/2019/09/roar.svg);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
position: fixed;
top: 0;
left: 100%;
height: 100%;
width: 200%;
text-align: center;
background-color: #fff;
-webkit-box-shadow: 0px 0px 19px 16px #fff;
-moz-box-shadow: 0px 0px 19px 16px #fff;
box-shadow: 0px 0px 19px 16px #fff;
z-index: 9999;
animation: moveOuts 3.8s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
}
.textbgs {
opacity: 0;
background-image: url(/wp-content/uploads/2019/09/roar.svg);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
position: fixed;
top: 0;
left: 100%;
height: 100%;
width: 200%;
text-align: center;
background-color: #fff;
-webkit-box-shadow: 0px 0px 19px 16px #fff;
-moz-box-shadow: 0px 0px 19px 16px #fff;
box-shadow: 0px 0px 19px 16px #fff;
z-index: 9999;
animation: moveOuts 3.8s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
}
@keyframes moveOuts {
0% {
transform: translateX(0);
}
89% {
transform: translateX(-200%);
}
94% {
transform: translateX(-200%);
}
96%{
transform: scaleY(.005) scaleX(0);
}
100% {
transform: scaleY(.005) scaleX(0);
}
}
.menu-mainmenu-container * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.35s ease;
transition: all 0.35s ease;
}
.menu-mainmenu-container li {
display: inline-block;
list-style: outside none none;
margin: 0.4pxem 0.6em;
padding: 0;
}
.menu-mainmenu-container a {
padding: 0 0.4em;
color: rgba(255, 255, 255, 0.5);
position: relative;
text-decoration: none;
display: inline-block;
}
.menu-mainmenu-container a:before {
position: absolute;
content: ”;
-webkit-transition: all 0.35s ease;
transition: all 0.35s ease;
opacity: 0;
left: 11%;
right: 11%;
top: 0;
bottom: 0;
border-left: 1.4px solid rgba(255, 255, 255, 0.7);
border-right: 1.4px solid rgba(255, 255, 255, 0.7);
}
.menu-mainmenu-container a:hover,
.menu-mainmenu-container .current a {
color: #ffffff;
}
.menu-mainmenu-container a:hover:before,
.menu-mainmenu-container .current a:before {
opacity: 1;
left: 0;
right: 0;
}
</style>
<script> document.addEventListener(‘DOMContentLoaded’, function() {
jQuery(function($){
$(‘.hamburger’).click(function() {
$(‘.textbg’).toggle();
$(‘.textbgs’).toggle();
$(‘.textbgs’).css( ‘opacity’, 1);
$(‘#rightsection’).fadeToggle(‘slow’);
});
});
});
</script>

This is the code for the simple Fade In animation.

<style>

#rightsection {
display: none;
position: fixed;
top: 0;
left:0;
width: 100vw;
z-index: 99;
}
</style>

document.addEventListener(‘DOMContentLoaded’, function() {
jQuery(function($){
$(‘.hamburger’).click(function() {
$(‘#rightsection’).fadeToggle(‘slow’);
});
});
});
</script>