Jump to content
Search Community

Open and Close menu

Daniel2024 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

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();
}
Link to comment
Share on other sites

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?

  • Like 2
Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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()
}
 
}
Link to comment
Share on other sites

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.

  • Like 3
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...