Search the Community
Showing results for tags 'tweenfromto'.
Found 5 results
-
Hi, I can't make this animation do what I want it to do, I can not understand why. I have a button that calls function menuAnimation which plays my timeline, based on condition whether variable is_menu_active is true or false. My problem is that the tween from START_MENU to PAUSE_MENU skips pointerEvents:all, does not stops at label ''pause_menu, then goes to the next step pointerEvents:none. What is wrong with this code? Thank you. btn_menu.addEventListener('click', (e) => { e.preventDefault(); menuAnimation(); }); var tl_menu_animation = gsap.timeline({ defaults:{ ease: "power2.inOut" }, paused:true }); tl_menu_animation.addLabel('start_menu') .set('#nav_left,#nav_right', {autoAlpha:1}) .to('#nav_left,#nav_right', {duration:0.7, scaleX:1}) .to(nav_elems, {duration:0.4, autoAlpha:1}) .set('#navigation', {'pointerEvents':'all'}) .addLabel('pause_menu') .set('#navigation', {'pointerEvents':'none'}) .to(nav_elems, {duration:0.2, autoAlpha:0}) .to('#nav_left,#nav_right', {duration:0.4, autoAlpha:0}) .set('#nav_left,#nav_right', {autoAlpha:0}) .set('#nav_left,#nav_right', {scaleX:0}) .addLabel('end_menu'); function menuAnimation() { if(is_menu_active) { tl_menu_animation.tweenFromTo('pause_menu', 'end_menu'); is_menu_active = false; } else { tl_menu_animation.tweenFromTo('start_menu', 'pause_menu'); is_menu_active = true; } }
-
Running into a weird issue when adding multiple tweenFromTo's to a timeline. What I expect to happen in the Codepen: When I first load it, the blocks should be resting against the black line and not be skewed. tl_master and tl_base should be paused at 0. What's actually happening: The blocks are not touching the black line and are skewed. tl_base is paused at 0.5 seconds instead of 0. It looks like tl_base is paused at the start of the final tweenFromTo added to tl_master (which is starting from 0.5 seconds). I don't understand why it's jumping there when I have both timelines paused and set to immediateRender: false. I also tried adding a position parameter to the tweenFromTo's (thinking they were all being added at the same time and overlapping or something) but that did not fix the issue. Please let me know if I can clarify anything.
-
Hi! I am a big fan of the tweenFromTo and tweenTo function of TimelineMax. However, these functions always return a TweenLite instance. Is it in any way possible to make that a TweenMax? I would very much like to have access to repeat and yoyo properties, for example. In other words, something like this would be cool: myTimeline.tweenFromTo ( 'nowhere', 'somewhere', { repeat:-1, yoyo:true } ); (Or, maybe I'm missing something and this is already possible?) myTimeline.tweenFromTo ( 'nowhere', 'somewhere', { repeat:-1, yoyo:true } );
-
Hello I have a simple timeline set up with 6 steps, no nested timeline or anything, and each step has a label. At the moment I can tween to and from labels (while watching the animation play out in either direction) by using tweenFromTo. The problem with that is some steps are quite long, and I'd like to go from one step to another in a defined duration. Is this possible? For example, can I tweenFromTo label1 to label3 within X amount of seconds? The closest thing I have come across is setting a timescale to a high number, but that's not really a solution and it'll be inconsistent as the time between each step varies quite a bit. Thanks for any help
-
I can not pause an animation that is executed by tweenFromTo Please help
