Jump to content
Search Community

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

arthurleonov test
Moderator Tag

Go to solution Solved by OSUblake,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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:

 

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

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.
×
×
  • Create New...