arthurleonov
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by arthurleonov
-
-
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
Animation jumps at the end of the timeline while it shouldn't
in GSAP
Posted
Thank you very much, Blake. I will keep in mind, to not mix up css animations and JS animations. Issue is solved