cocacrave

I have a function onClickMenu with a parameter menuIsActive which is bool. Depending on the state of the menuIsActive, I want to either play the timeline in normal (from beginning to end) and reversed (from end to beginning). I don't know why this isn't working.. can someone please help me? export const onClickMenu = (menuIsActive) => { const menuLine1 = document.getElementById('menu-line1'); const menuLine2 = document.getElementById('menu-line2'); const menuLine3 = document.getElementById('menu-line3'); const menuLayout = document.getElementById('menu-layout'); const onClickMenuTL = new TimelineMax({ paused: true, }).to(menuLine1, 0.3, { attr: { d: 'M0 29h100v2H0z' } }, 'menuCollapse') .to(menuLine3, 0.3, { attr: { d: 'M0 29h100v2H0z' } }, 'menuCollapse') .set(menuLine2, { opacity: 0 }) .to(menuLine1, 0.3, { rotation: 40, transformOrigin: '50% 50%' }, 'menuRotate') .to(menuLine3, 0.3, { rotation: -40, transformOrigin: '50% 50%' }, 'menuRotate') .to(menuLayout, 0.3, { opacity: 1, display: 'block' }); if (menuIsActive) { onClickMenuTL.play(); } else { onClickMenuTL.reverse(0); } };