Button inside a toggle button will just fire once, when clicking, not displaying again whenever i click it.

[Louienator]

Good day,

 

I have a problem with regards to my burger menu has a contact us button that will fire a pop-up every time i click it. but the problem is just after clicking close, contact-us button will not fire the pop-up again. Is there anything i lack? 

 

here's a fiddle: https://jsfiddle.net/gfhbcmn8/2/

 

Cheers

[Rodrigo]

Hi,

 

There are a few issues in your setup mostly with your CSS that don't play along with your timeline. You have the element with display none but you are animating autoAlpha. AutoAlpha is a combination of visibility and opacity, so there is no fade in/out animation.

 

This seems to work:

.contact-us {
  position: absolute;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100%;
  z-index: 10;
  visibility: hidden;
  opacity: 0;
  justify-content: center;
  align-items: center;
  background: rgba( 0, 0, 0, 0.9 );
  &__inner {
    position: relative;
    padding: 1em;
    background: #fff;
    z-index: 3;
    visibility: hidden;
    opacity: 0;
    box-shadow: 0 4px 18px 4px rgba(0, 0, 0, 0.4);
  }
  &__close {
    position: absolute;
    top: -1em;
    right: -1em;
    background: red;
    z-index: 4;
  }
}

var contactUs = gsap.timeline({
  reversed: true,
  paused: true,
  defaults: {
    ease: "none"
  }
});

contactUs.to( '.contact-us', {
  display: 'flex',
  autoAlpha: 1
})
  .to( '.contact-us__inner', {
  autoAlpha: 1,
}, "<");

$('.contact-launch').click(() => {
  if( contactUs.reversed() ) {
    contactUs.play();
  }
});

$('.contact-us__close').click(() => {  	
  contactUs.reverse();
});

Hopefully this helps.

Happy Tweening!

[Louienator]

Hi Rodrigo,

 

Thanks for the solution. Glad it worked. The only reason that i'm using display none because if i'll use opacity/visibility hidden. though it doesn't show up but it still takes up the space on where it's been placed.

 

https://jsfiddle.net/tbmpxyg6/26/

 

Cheers.

[Rodrigo]

Yeah IDK about that, must be something else in your HTML/CSS, as you can see in this example everything is working as expected:

See the Pen jOQKWNp by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

[Louienator]

1 hour ago, Rodrigo said:

Yeah IDK about that, must be something else in your HTML/CSS, as you can see in this example everything is working as expected:

 

 

 

Hopefully this helps.

Happy Tweening!

You have some different approach, and it's much cleaner in that way that you just set the animation then chop it into chunks of animation states. thank you for this.. and lastly, what's the use of the console.clear? thanks

[Rodrigo]

7 minutes ago, Louienator said:

lastly, what's the use of the console.clear? thanks

Normally sandboxes like jsfiddle, codepen, codesandbox, etc. run a lot of stuff that results in several logs in the browser's console. When you re-run a codepen those logs keep mounting. In order to make debugging easier I always run the clear method in order to remove everything before the JS part of the code executes, so any warning or error I get in the console, I know is from the last time the code ran and not a previous one, which can lead to start looking for error when there might not be one in the code.

https://developer.mozilla.org/en-US/docs/Web/API/console/clear

 

Mostly a personal preference 🤷‍♂️

[Louienator]

11 hours ago, Rodrigo said:

contactUs.to( '.contact-us', {
  display: 'flex',
  autoAlpha: 1
})
  .to( '.contact-us__inner', {
  autoAlpha: 1,
}, "<");

And oh, what's the use of this "<"? 

[Rodrigo]

46 minutes ago, Louienator said:

what's the use of this "<"? 

That's the position parameter, super useful and powerful for timelines. You can learn mor in the link.

 

Happy Tweening!