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: http://codepen.io/arthurleonov/pen/ZbPrLX
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!