Hi,
I want to open an overlay by clicking and if I click again close again.
currently I can only open it but not close it. have now tried several variations and looked in other threads and tried unfortunately it doesn't work.
and if i clicked and want to close it my animation (viewHover will be played backwards) and then the click animation will play backwards.
So: in the closed state I have: mouseover, mouseout, click and the open state also
Can someone tell me how to do it the best way.
Would appreciate your help.
here is the relevant part of my code:
HTML
<div class="overlay" id="over"></div>
<div class="nav_center">
<a href="#" class="icon_nav" id="view_wrap" onmouseover="viewHover();" onmouseout="viewHover();" onclick="click">
<span class="square square1" id="square1"></span>
<span class="square square2"></span>
<span class="square square3"></span>
<span class="square square4"></span>
</a>
</div
CSS
*{
padding:0;
margin:0;
background-color: #000000;
}
.nav_center{
display:flex;
justify-content: center;
align-items: center;
}
.icon_nav{
width: 40px;
height: 40px;
padding: 13px;
transition: transform 0.5s ease-in-out;
}
.square{
position: absolute;
width: 5px;
height: 5px;
background-color: #fff;
}
.square1{
margin: 0px 8px 8px 0px;
transform: translate(0px, 0px);
}
.square2{
margin: 0px 0px 8px 8px;
transform: translate(0px, 0px);
}
.square3{
margin: 8px 8px 0px 0px;
transform: translate(0px, 0px);
}
.square4{
margin: 8px 0px 0px 8px;
transform: translate(0px, 0px);
}
.overlay{
position: absolute;
z-index:-1;
width:100%;
height: 100%;
background-color:#333;
top:-110%;
}
JS
// Change View Animation
var view = document.getElementById('view_wrap');
// Events
var hoverView = view.addEventListener('mouseover', viewHover);
var hoveroutView = view.addEventListener('mouseout', viewHoverOut);
var clickView = view.addEventListener('click', click);
// Squares
var box1 = document.getElementsByClassName("square1");
var box2 = document.getElementsByClassName("square2");
var box3 = document.getElementsByClassName("square3");
var box4 = document.getElementsByClassName("square4");
// Overlay
var menuView = document.getElementsByClassName("overlay");
// View mouseover
function viewHover(){
TweenMax.to(box1, .5,{x:"-2px", y:"-2px", ease: Power2.easeInOut});
TweenMax.to(box2, .5,{x:"2px", y:"-2px", ease: Power2.easeInOut});
TweenMax.to(box3, .5,{x:"-2px", y:"2px", ease: Power2.easeInOut});
TweenMax.to(box4, .5,{x:"2px", y:"2px", ease: Power2.easeInOut});
};
// View mouseout
function viewHoverOut(){
TweenMax.to(box1, .5,{x:"0px", y:"0px", ease: Power2.easeInOut});
TweenMax.to(box2, .5,{x:"0px", y:"0px", ease: Power2.easeInOut});
TweenMax.to(box3, .5,{x:"0px", y:"0px", ease: Power2.easeInOut});
TweenMax.to(box4, .5,{x:"0px", y:"0px", ease: Power2.easeInOut});
};
// Close open
function click(){
TweenMax.to(menuView, 1, {top:"-10%", ease: Power3.easeInOut});
}
/*
var menu = new TimelineMax({paused:true, reversed:true})
menu
.to(menuView, 0.75, {top:"10%", ease:Power2.easeInOut})
function click() {
menu.reversed() ? menu.play() : menu.reverse();
}
*/