Add a function and twwen after reverse

[CedGrvl]

Hi There !

 

I have an animation on a menu. There is no problem to start the animation via the burger button and close it with the cross button
In this menu, I obviously have links to sections of the page.

I would have liked the animation to reverse and I could add one or two tween for opacity or something else.

I can also install a set timeout after the reverse of the animation on the menu links but I think there is another solution.

Could you help me?

Sorry I'm learning as much js as gsap, I guess
Thanks You
Ced

 

 

function displayMenu(){

    let socialMenu = document.querySelectorAll('.js-socialMenu li');
    let animateMenu = new TimelineMax({paused: true});

    animateMenu.to("#js-burger", 0.5, {opacity: 0})
                .to(".js-page", 0.5, {opacity: 0})
                .to(".js-menu", 0.5, {x:0})
                .fromTo(".js-nav", 0.5, {x : "-50vw"}, {x: 0})
                .staggerFromTo(".c-menu__item", 0.1, {x: "-30vw"}, {x: 0}, 0.2)
                .fromTo(".js-logoGrvl", 0.5, {x : "-50vw", opacity: 0}, {x: 0, opacity:1})
                .staggerFromTo(".js-iconMenu", 0.5, {x:-200, opacity: 0}, {x: 0,opacity: 1, rotation: "360"}, 0.2)
                .staggerFromTo(socialMenu, 0.5, {y: 60, opacity:0}, {y: 0, opacity: 1}, 0.2)
                .pause();


    // Store burger button menu
    let burger = document.getElementById("js-burger");
    burger.addEventListener('click', function(){
        animateMenu.play();
    });

    // Store cross button
    let cross = document.getElementById('js-cross');
    cross.addEventListener('click', function(){
            animateMenu.reverse();
    });
    

     //Store  Links
     let menuLinks = document.getElementsByClassName("js-menuLinks");
     for (let i = 0; i< menuLinks.length; i++){

        let location = menuLinks[i].name;

         menuLinks[i].addEventListener('click', function(){

            animateMenu.reverse()
            .call(function() {
                window.location = location;
            })

         })
     };


};


displayMenu();

        

 

[PointC]

It sounds like you're looking for the onReverseComplete callback.

 

let animateMenu = new TimelineMax({onReverseComplete: yourFunction});

More info in the docs:

https://greensock.com/docs/v2/TimelineMax

 

If you have other questions, a demo is always helpful.

Happy tweening.

 

[CedGrvl]

If I use oncomplereverse it works for menu links but for the cross, it will no longer do a simple reverse?

I'm going to try to put a pen

 

Thx for your answer