Search the Community
Showing results for tags 'x property'.
Found 1 result
-
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!
