Timeline Reverse not working

[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);
  }
};

[Dipscom]

Hi cocacrave,

 

Welcome to the forums!

 

Every time I think I am getting the hang of JavaScript and being able to read code, someone throws me off my little horse...

 

Is this the fabled ES6? Do forgive my ignorance, I never get to play with the shiny new web toys....

 

So, assuming it is and that's a function that's being called on a user click I would say the following (which may or may not be right):

 

The reverse is never going to work because every time you click, you are creating a new paused timeline. Regardless of the state of your menu.

 

If your menu is active, it plays, if your menu is not active it reverses - but the timeline already is at the start so, it won't move.

 

You need to create your timeline outside of the click event to stop it being overwritten.

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' });


export const onClickMenu = (menuIsActive) => {
  
  if (menuIsActive) {
    onClickMenuTL.play();
  } else {
    onClickMenuTL.reverse();
  }
};

[Carl]

In addition to Dipscom's advice, it would help greatly if you could provide a very simple demo: http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

It can just contain a single animation on a single element with 1 or 2 buttons to control it. 

We don't need to see the real production assets or anything. 

 

This way we can test the code and provide a working version.

I'd also vote to avoid ES6 as to not limit the number of people who can help you quickly.