Jump to content


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

Recommended Posts

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:



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

Link to comment
Share on other sites

You have transition all in your CSS, which will fight against GSAP. You should also set the display for your anchor tags or animate the h3 instead.


See the Pen qOvoWe?editors=001 by osublake (@osublake) on CodePen

  • Like 4
Link to comment
Share on other sites

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

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.