Menu Toggle plays only once

[Dirch]

Hey!

 

I want to animate a full screen menu. I have two timelines for my menu animation. One for animate in, one for animate out. The problem is, that the animation only runs once. How can I fix this?

 

See the Pen poyppYP by dirklach (@dirklach) on CodePen

[GreenSock]

That's because you keep calling play() on them, but perhaps you mean restart()? Remember that play() just tells the playhead to start moving forward from wherever it is. So if the playhead is already at the very end, it will try to move forward and immediately stop because it can't go any further. See the problem? 

 

Also, it looks like you might be misunderstanding how event listeners work because you're doing this...

burger.addEventListener('click', () => {
    menuIn.play() 
})

function menuInComplete() {
    burger.removeEventListener('click', () => {
        menuIn.play()
    })
    ...
}

That removeEventListener() inside menuInComplete() isn't doing anything because you're actually creating an entirely new function there and telling it to remove the "click" listener for that function...but there never was one added. Just because the code looks the same doesn't mean it's referencing the same object. 

let obj1 = {x: 0};
let obj2 = {x: 0}; // this is a completely different object

// same for functions...
let func1 = () => { menuIn.play() };
let func2 = () => { menuIn.play() }; // this is totally different, not just a reference to func1 

I'd probably handle the logic a bit differently, like by having a variable that tracks the open/closed state like this: 

See the Pen d5f031f3c59c36e8248a474bc13e9e48?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Is that what you're looking for?