Jump to content
Search Community

Open and close overlay

mr_a test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

 

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();	
}
*/

 

See the Pen rNBZvWG by jr_Arslan (@jr_Arslan) on CodePen

Link to comment
Share on other sites

Hey mr_a and welcome to the forums!

  • In general, if you are going to be reversing your animations, you should be using a timeline instead of just tweens. That way you can make use of the reverse() and reversed() methods.
  • You don't have to use your own selectors (like document.getElementsByClassName()) because GSAP automatically uses document.querySelectorAll() on strings that you give it.
  • You shouldn't put event listeners both in your JavaScript and your HTML. You should initialize them in one place or the other.
  • You can use the conditional check (similar to the one you have commented out at the bottom) to use one function for both the enter and exit states of the hover effect and click effect. If you do this, make sure that the timeline is paused. In order to get that to work properly on the hover state, you need to call squareTl.reverse(); to get it to be in the correct state.

Altogether you should get something like this:

 

See the Pen xxKajvB?editors=0010 by GreenSock (@GreenSock) on CodePen

  • Like 2
Link to comment
Share on other sites

cool .. thanks first for your fast answer and your short explanation ..

 

I had already written a similar code (see comment in the js code) but it could'nt test it if it's works .. because I always get an error message ("Can not find variable: TimelineMax) on this line :

var overlayTl = new TimelineMax({paused: true});

How can I fix this?

 

Oh and the following what I wanted to do with the click event is this:

 

Overlay is closed:

1st hover -> rectangles have a greater distance to each other
2. Click -> Overlya opens and Hover state is paused or hover state is now default.

 

Overlay open:
1.Hover: hover animation is played backwards
2. Click: Overlay disappears and hover state is default again

 

Here is a short animation:

 

view.gif

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...