Good Day. I'm creating an animation for a website menu. I created much of it, But The problem is when Overlay animation starts the content appears earlier, The content should appear as the overlay animation move from left to right. For the reference please check the menu animation here, https://www.mission-haut-brion.com, Below is the code that I have tried. Any help would be appreciated. You can find working fiddle here of the code. https://jsfiddle.net/dk724f6p/. Thank You
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body style="background-color: #000;">
<header>
<div class="header-top clearfix">
<h1 class="l-left link"><a href="index.html" style="font-size: 16px;"><img style="" src="assets/img/logo.jpg" height="100" width="100" alt=""></a></h1>
<a href="refrences.html" class="ref-menu-fix" style="">REFERENCES</a>
<a class="l-right link toggle-menu" style="cursor:pointer;" onclick="openNav()" style="filter: brightness(1);" href="#">
<i ></i>
<i ></i>
<i ></i>
</a>
<!-- <span class="l-right link toggle-menu" style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span> -->
</div>
<div id="myNav" class="overlay45">
<header style="background-color: #1f1f1f; height: 100%;">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<div class="row overlay-content" id="overlay-content" style="height: 100%; position: fixed;display: none;width: 100%;">
<div class="col-md-2" style="border-right: 1px solid #fff"></div>
<div class="col-md-8">
<div class="row mt-5">
<div class="col-md-12" style="text-align: center;">
<img src="assets/img/logo2.png" style="width: 20%; margin: 1 auto;" alt="">
</div>
</div>
<div class="row mb-5">
<div class="col-sm-12 col-md-2"></div>
<div class="col-sm-12 col-md-4">
<a id="menu-anim-fix" href="index.html">Home Page</a>
</div>
<div class="col-sm-12 col-md-4" style="text-align: right;">
<a id="menu-anim-fix" href="ouroffer.html">Our Offer</a>
</div>
<div class="col-sm-12 col-md-2"></div>
</div>
<div class="row mb-5">
<div class="col-sm-12 col-md-2"></div>
<div class="col-sm-12 col-md-4">
<a id="menu-anim-fix" href="ourwork.html">Our Work</a>
</div>
<div class="col-sm-12 col-md-4" style="text-align: right;">
<a id="menu-anim-fix" href="stepform.html">Order Us</a>
</div>
<div class="col-sm-12 col-md-2"></div>
</div>
<div class="row mb-5">
<div class="col-sm-12 col-md-2"></div>
<div class="col-sm-12 col-md-4">
<a id="menu-anim-fix" href="website-art.html">Website Art</a>
</div>
<div class="col-sm-12 col-md-4" style="text-align: right;">
<a href="contact.html">Contact Us</a>
</div>
<div class="col-sm-12 col-md-2"></div>
</div>
<div class="row">
<div class="col-sm-12 col-md-12" style="text-align: center;">
<a id="menu-anim-fix" href="refrences.html">REFERENCES</a>
</div>
</div>
<div class="row mt-5">
<div class="col-md-12 mt-5" style="text-align: center;">
<p class="mt-5" style="color: #fff;font-size: 12px;">2019- All Rights Reserved</p>
</div>
</div>
</div>
<div class="col-md-2" style="border-left: 1px solid #fff"></div>
</div>
</header>
</div>
</header>
<script>
function openNav() {
document.getElementById("myNav").style.width = "100%";
setTimeout(function(){
document.getElementById("overlay-content").style.display = "flex";
// document.getElementById("menu-anim-fix").style.display = "flex";
}, 100);
}
function closeNav() {
document.getElementById("myNav").style.width = "0%";
document.getElementById("overlay-content").style.display = "none";
}
</script>
</body>
</html>
header a {
letter-spacing: 8px;
text-transform: uppercase;
color: #fff;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
text-decoration:none !important;
}
header a:hover {
color: #d3a356;
letter-spacing: 10px;
}
.overlay45 {
height: 100%;
width: 0;
position: fixed;
z-index: 49;
top: 0;
left: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-x: hidden;
transition: 1s;
}
.overlay-content{
transition: 1s;
}
.overlay45 a {
display: block;
transition: 0.3s;
}
/*.overlay-content {
position: relative;
width: 100%;
}*/
.overlay45 .closebtn {
position: absolute;
top: -10px;
right: 65px;
font-size: 60px;
z-index: 50;
}
@media screen and (max-height: 450px) {
.overlay45 a {font-size: 20px}
.overlay45 .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}
@media screen and (max-width: 600px) {
.overlay45 .closebtn {
position: absolute;
top: -10px;
right: 20px;
font-size: 60px;
z-index: 50;
}
}
@media screen and (max-width: 767px) {
header .col-sm-12 {
text-align: center !important;
}
header .col-md-2 {
border-right: none !important;
border-left: none !important;
}
}
.refrences-website-fix{
padding-top: 10%;
}
.refrences-website-fix a{
font-size: 35px;
font-weight: 900;
}
.refrences-website-fix .corvin:hover
{
background-image: url(../img/logo.jpg);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.header-top {
padding: 0 10px !important;
}
.header-top img{
width: 50px;
height: 50px;
}
@media screen and (max-width: 760px) {
.header-top img{
width: 80px;
height: 80px;
}
}
.header-top {
padding: 0 60px;
position: fixed;
top: 0;
width: 100%;
z-index: 16;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.header-top a{
/*color: grey !important;*/
}
.header-top i{
background: #fff !important;
}
h1 {
line-height: 70px;
height: 70px;
}
h1 a {
display: block;
padding: 0 10px;
}
.toggle-menu {
width: 50px;
height: 50px;
display: inline-block;
position: relative;
top: 20px;
}
.toggle-menu i {
position: absolute;
display: block;
height: 2px;
background: white;
width: 24px;
left: 10px;
-webkit-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}
.toggle-menu i:nth-child(1) {
top: 16px;
}
.toggle-menu i:nth-child(2) {
top: 24px;
}
.toggle-menu i:nth-child(3) {
top: 32px;
}
/*.open-menu i:nth-child(1) {
top: 25px;
-webkit-transform: rotateZ(45deg);
-ms-transform: rotate(45deg);
transform: rotateZ(45deg);
}
.open-menu i:nth-child(2) {
background: transparent !important;
}
.open-menu i:nth-child(3) {
top: 25px;
-webkit-transform: rotateZ(-45deg);
-ms-transform: rotate(-45deg);
transform: rotateZ(-45deg);
}*/
nav {
height: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
background:#000;
position: fixed;
width: 100%;
/* -webkit-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;*/
visibility: hidden;
opacity: 0;
-webkit-transition: opacity 1s, visibility 0s 1s;
transition: opacity 1s, visibility 0s 1s;
z-index: 15;
}
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.l-left {
float: left;
}
.l-right {
float: right;
}
.ref-menu-fix{
text-align: center;
margin: 0 auto;
width: 50%;
font-size: 24px;
letter-spacing: 8px;
color: #fff !important;
margin-top:20px;
text-transform: uppercase;
}
.toggle-menu {
width: 50px;
height: 50px;
display: inline-block;
position: relative;
top: 20px;
}
.toggle-menu i {
position: absolute;
display: block;
height: 2px;
background: white;
width: 24px;
left: 10px;
-webkit-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}
.toggle-menu i:nth-child(1) {
top: 16px;
}
.toggle-menu i:nth-child(2) {
top: 24px;
}
.toggle-menu i:nth-child(3) {
top: 32px;
}