Jump to content
Search Community

menu toggle with timelineLite - very small function

harp 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

Trying to toggle the menu - open it and close it within this function below but the variable storing the boolean value to toggle isn't working past the first if statement: Menu opens fine but doesn't close.. Error is: value assigned - menuOpen - isn't used.

How to fix this?

menuToggle(){
    let tlMenu = new TimelineLite();

    let menuOpen = false;

    if(menuOpen === false){
        console.log(menuOpen); //prints fine
        tlMenu
            .addLabel('menu-open')
            .to(this.menu, 1, {opacity: 1, autoAlpha: 1, ease: Power4.easeOut}, 'menu-open')
            .to(this.ctaLinks, 1, {color: 'black', ease: Power4.easeOut}, 'menu-open')
            .to(this.hamburger, 1, {stroke: 'black', ease: Power4.easeOut}, 'menu-open');

        menuOpen = true; // why not working here?

    }else if(menuOpen = true){ // false doesn't change to true so wouldn't work
        tlMenu
            .addLabel('menu-close')
            .to(this.menu, 1, {opacity: 0, autoAlpha: 0, ease: Power4.easeOut}, 'menu-close')
            .to(this.ctaLinks, 1, {color: 'white', ease: Power4.easeOut}, 'menu-close')
            .to(this.hamburger, 1, {stroke: 'white', ease: Power4.easeOut}, 'menu-close');

        menuOpen = false;
    };


}
Link to comment
Share on other sites

Did thanks! But menuOpen variable is not assigning value true. it still says as false...

 

 if(menuOpen === false){
        console.log(menuOpen); //prints fine
        tlMenu
            .addLabel('menu-open')
            .to(this.menu, 1, {opacity: 1, autoAlpha: 1, ease: Power4.easeOut}, 'menu-open')
            .to(this.ctaLinks, 1, {color: 'black', ease: Power4.easeOut}, 'menu-open')
            .to(this.hamburger, 1, {stroke: 'black', ease: Power4.easeOut}, 'menu-open');

        menuOpen = true; // why not working here? Not assigning true, stays false.

    }


 

Link to comment
Share on other sites

20 minutes ago, Sahil said:

@harp It will be nice if you make habit of posting codepen demos where we can check working code. It is too hard and time consuming to debug anything just by reading code.

 

Agreed. I've seen several questions from you with just pasted code. Sometimes a problem is easy to spot with a quick glance at code, but as @Sahil mentioned, it's easier for us to troubleshoot with a demo. You'll also get better answers if you provide live code that we can test and edit. If you haven't made one yet, check out this post:

 

Thanks for understanding and happy tweening.

:)

 

  • Like 3
Link to comment
Share on other sites

If you open the console, you'll see a 'Cannot tween a null target' error.

 

// switch this
 tlMenu
.addLabel('menu-open')
.set(this.menu, {className:'+=is-animating'})                
.to(this.menu, 1, {opacity: .98, autoAlpha: 1, ease: Power4.easeInOut}, 'menu-open')
.to(this.ctaLinks, 1, {color: 'black', ease: Power4.easeOut}, 'menu-open')
.to(this.hamburger, 1, {stroke: 'black', ease: Power4.easeOut}, 'menu-open')
 .set(this.menu, {className:'-=is-animating'});

// to this
tlMenu
.addLabel('menu-open')
.set(menu, {className:'+=is-animating'})                
.to(menu, 1, {opacity: .98, autoAlpha: 1, ease: Power4.easeInOut}, 'menu-open')
.to(ctaLinks, 1, {color: 'black', ease: Power4.easeOut}, 'menu-open')
.to(hamburger, 1, {stroke: 'black', ease: Power4.easeOut}, 'menu-open')
.set(menu, {className:'-=is-animating'});

 

Once I made that change, all the errors went away. Happy tweening.

:)

 

  • Like 3
Link to comment
Share on other sites

Okay that works too now.. not suppose to call the function ok go it!
 

Also, It doesn't close.. opens fine but then doesn't run the else if statement.. What am I doing wrong here?

Thank you, very grateful for your time and teachings.

Link to comment
Share on other sites

That's happening because you are declaring your menuOpen variable inside your menuToggle() function. Each time you click the menu button it sets the value to false.

 

// please move this outside of your menuToggle() function
let menuOpen = false;

 

Happy tweening.

:)

 

  • Like 2
Link to comment
Share on other sites

Actually, if it were me, I'd create one timeline and simply play/reverse it on click. That way you wouldn't be creating a timeline on every click, you wouldn't need any menuOpen variable nor would you have to add/remove that .is-animating class. 

 

Here's a demo from another thread, but it's the same concept and it'll show you how you could reduce your code a bit and animate it with one timeline.

 

See the Pen XKbEBQ by PointC (@PointC) on CodePen

 

Happy tweening.

:)

 

  • Like 2
Link to comment
Share on other sites

OH WOW!!! SO MUCH LESS CODE!!! WOW! SO MUCH CLEANER AND SO MUCH MORE ACCURATE TO THE POINT! WOW! THANK YOU! I want to get better at programming - javascript. I'm a novice. Any tips on how to get better? Just keep making mistakes?

I'm so thankful for your guidance, if you tutor I'd be happy to learn!

  • Like 2
Link to comment
Share on other sites

Everyone makes mistakes and writes too much code when they start their coding journey. Practice and time will make you better at it.

 

Most everything I know has been learned by hanging around the forum and answering questions. There are a lot of great people around here that will help you with GSAP problems and questions as you progress. @Sahil just made it to Superhero status. His new post may give you some encouragement too.

 

Happy tweening. 

:)

 

  • Like 3
Link to comment
Share on other sites

Quote

I'm a novice. Any tips on how to get better? Just keep making mistakes?

 

It seems very overwhelming at first, but every little bit of knowledge you gain starts to add up and suddenly you find you're starting to know how to do stuff. Just keep practicing. 

 

I asked a similar question a while back which led to a worthwhile discussion.

 

 

  • Like 1
Link to comment
Share on other sites

Hello,

Yes! I viewed that post and I learned a lot!

What my purpose/goal is: Create really cool 3D web graphics and animations. I want to learn WebGl and Greensock.

What I learned from the form which was sent:

Before learning WebGL/fully focus on GSAP:

1. Learn/get better at Core JavaScript especially ES6 because class syntax is much cleaner than regular OOP Inheritance approach so I'm following this:

See the Pen 44fd943b80c95bb48a030410f9b8f91b?editors=0010 by osublake (@osublake) on CodePen


See the Pen d14328e8948d2c55d92b666e5c7a73de?editors=0010 by osublake (@osublake) on CodePen


Plus other online sources but full practice of classes. I was before trying to learn what functional programming is but ES6 class syntax is what I'll focus on first then learn other approaches when I get good at classes.

2. Improve on the Math:
https://www.amazon.ca/Foundation-HTML5-Animation-JavaScript-Lamberta/dp/1430236655/ref=sr_1_1?ie=UTF8&qid=1519763836&sr=8-1&keywords=Foundation+HTML5+Animation+with+JavaScript

3. Watch videos of other code from pros like:
https://www.youtube.com/watch?time_continue=5&v=8aGhZQkoFbQ

4. Learn from forums like GSAP


I've scheduled my work schedule so I can work 4 days a week and rest 2 days focus on JS and Math.

Conclusion,

Work hard, don't give up, and keep coding. Have questions then message this great forum.

Thank you!

*if I'm missing anything please advice me. Very grateful for this forum!*
 

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