Open and Close menu

[Daniel2024 1 Likes (Newbie)]

Hello guys,

 

im trying to animate a menu with TweenMax.

If I click the menu-icon , the animation works properly and menu is viewable , but when i click again the animation doesn't work.

 

Thank you in advance.

 

Regards

Daniel

 

 

See the Pen mdbQLLa by Daniel2024 (@Daniel2024) on CodePen

[ZachSaucier 7,152 Likes (Superhero)]

Hey Daniel and welcome to the GreenSock forums.

 

The main issue is that you're adding to the timeline every time you open the menu. You should create the timeline animation when it is initialized and then toggle the playing and reversing on click. See the below threads for more info:

 

[Daniel2024 1 Likes (Newbie)]

@ZachSaucier , appreciate your help. Thank you ?

[Daniel2024 1 Likes (Newbie)]

if I want to add a second timeline for the reverse method , how can I do it?

 

So first i am running the first timeline and when i click to close the menu I want to add a different timeline..

 

[ZachSaucier 7,152 Likes (Superhero)]

4 minutes ago, Daniel2024 said:

if I want to add a second timeline for the reverse method , how can I do it?

Take a look at the second thread in my post above. It addresses using a different animation for the reverse.

[Daniel2024 1 Likes (Newbie)]

I was going through the code , but I didn't get it.. I am not really familiar with react..

 

I changed my code. How can I add the second timeline for the reverse method?

document.querySelector('.menu-icon').addEventListener('click', animateNavbar);

 

function animateNavbar(e){

 

tl.reversed() ? tl.play() : tl.reverse();

}

[ZachSaucier 7,152 Likes (Superhero)]

In the demo in the thread linked to, you can see this function: 

 

const toggleMenu = (e) => {
  e.preventDefault()

  if (isAnimated.current) {
    return;
  }

  isAnimated.current = true;

  if(isOpen.current) {
    closeMenu()
  } else {
    openMenu()
  }
}

It makes use of a boolean to check if the animation is playing (and returns if so).

 

It makes use of a second boolean to keep track of the state to determine which timeline to play. 

Does that make sense?

[Daniel2024 1 Likes (Newbie)]

Yes, got it. So I have to delcare my openMenu() and my closeMenu(), where i insert my timelines outside of the toggleMenu function , right ?

 

const isOpen = useRef()

I can call useRef however I want , right?

[ZachSaucier 7,152 Likes (Superhero)]

2 minutes ago, Daniel2024 said:

where i insert my timelines

Where you play() them, yes  

 

2 minutes ago, Daniel2024 said:

I can call useRef however I want , right?

if it's a function that you've declared. useRef that he is using in the demo is a React-specific thing. Most likely you'd use const isOpen = false; if you're not using React. It's just a variable to keep track of state, like I said.

[Daniel2024 1 Likes (Newbie)]

ok, thanks

 

First timeline is running , but the second one isn't . What is wrong in my code?

/ second timeline for reverse method

 

const secTimeLine = new TimelineLite({ paused: true });

 

secTimeLine.to('.slide-container', 0.5 , {

opacity: 0,

ease: Ease.easeIn

});

 

function closeMenu(){

tl.play();

}

 

// event

document.querySelector('.menu-icon').addEventListener('click', animateNavbar);

 

// animation status

const isAnimated = false;

const isOpen = true;

 

function animateNavbar(e){

// check for false

if (isAnimated.current) {

return;

}

 

// set to true

isAnimated.current = true;

 

if(isOpen.current) {

openMenu()

} else {

closeMenu()

}

 

}

[ZachSaucier 7,152 Likes (Superhero)]

You have tl.play() where it should be secTimeLine.play().

 

Besides that you should change the animations state variables that you have to match what's going on. So changing isOpen to false in the close function and true to the open one.

 

I think you should probably be using another Boolean value instead of Open.current...

 

It seems that you don't have a great grasp of JavaScript logic. Maybe a free online course would help? Codeacademy.com has a great course. Edit: I just found out they're no longer free. You could try the free trial but I'm sure there are other free courses out there that are good.