[Animation jumps at the end of the timeline while it shouldn't]

Thank you very much, Blake. I will keep in mind, to not mix up css animations and JS animations. Issue is solved

[Animation jumps at the end of the timeline while it shouldn't]

Hi, guys.

 

I am quite new to GSAP. The system is really solid, however, I ran into a small problem.

I am trying to animate the X property of the the main container and text in it. Basically, I want to make a nice slide out menu.

 

THE PROBLEM:  The black background slides out really nicely, BUT, the text starts sliding out as normal, but then jumps at the end as if it was skipping something. 

 

I cannot figure out what is causing that. I would be really grateful If someone helped me out, because I feel like I am missing something really fundamental here.

 

Here is the code:

 

Codepen: 

var menu = $('.js-menu'),
  menuContainer = $('.menu-container'),
  menuItems = $('.js-menu-items h3 a');

var tl = new TimelineMax({
  paused: true,
  reversed: true,
}); // set new timelinemax

// container animation
tl.from(menuContainer, 3, {
    x: '-1000',
    autoAlpha: 0,
    force3D: true,
    ease: Power3.easeOut
  })
  // text animation 

tl.from(menuItems, 2, {
  x: '-600',
  autoAlpha: 0,
  force3D: true,
  ease: Expo.easeOut
});

// toggle animation
$(menu).on('click', function() {

  tl.reversed() ? tl.play() : tl.reverse();

});

Thanks in advance!

See the Pen ZbPrLX by arthurleonov (@arthurleonov) on CodePen