Menu items not re-appearing after opening the menu again

[Louienator]

Hi,  i'm creating a toggle button where it'll show the menu items when the button is clicked. But the problem is that when you click it again, menu items will not appear anymore. 

Here's my fiddle:
https://jsfiddle.net/x78h0bt6/157/

[Rodrigo]

Hi,

 

This is a rather common issue with from instances. The problem in your particular case is that you're creating the from instance for the <p> tags in your menu on each click event. From instances take the element from the value you pass to the config object to their natural value. So the first time the natural opacity value of those elements is 1, then it goes from 0 to 1 as you instructed GSAP in the config. The problems begin when you hide the menu, you tween the opacity to 0, then the next time you click the button and GSAP animates from 0, the natural value GSAP is registering for the opacity is 0, because that's the current style value of the element, so it tweens the opacity from 0 to 0, see the problem?

 

There are two solutions for this:

1. Use fromTo() instances in order to force the final value to be 1:

     .fromTo( '.box-wrap p', 0.8, {
     	autoAlpha: 0
     }, {
     	ease: 'circ.in',
       autoAlpha: 1
     })
     .fromTo( '.mobile-menu__inner p', 0.4, {
     	autoAlpha: 0
     }, {
     	ease: 'circ.out',
       autoAlpha: 1,
       stagger: 0.2
     });

2. Remove all the styles applied by GSAP when you hide the menu:

   $( '.close-btn' ).click( function() {
     var menuOpen = gsap.timeline({
       onComplete: () => gsap.set('.mobile-menu__inner p', {
         clearProps: "all",
       }),
     });
     //...
   });

Finally in these cases is always better to just toggle a single GSAP instance and be done with it:

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

 

Hopefully this helps.

Happy Tweening!