Search the Community
Showing results for tags 'overlapping tweens'.
Found 3 results
-
Hi everyone, I am new to GSAP. trying to create a Shrinking header animation. I am trying to reduce the height of 1st section (Faded yellow) using scrollTrigger . But the issue is second section(Blue section) is hiding behind the 1st section on scroll..
-
Long time user and a big fan of GSAP Usually I can figure out issues on my own, but this time I'm really stuck. If you refresh the Codepen, you can see that the first animation is the text zooming in slowly, and then zooming out quickly after a brief delay. Now after all the animation is done, I added a tl.restart(); so that it will go back to the start and replays everything, but this doesn't seem to be the case. The text animation is now only appearing instead of the whole zooming in etc. Where did I go wrong??? o.O
-
Hi All, Me again. I'm trying to get my head around the TimelineMax way of animating: What I want to do seems simple: milestone_1 scales up, pauses for 0.3 sec while milestone_2 scales up. While milestone_2 pauses for 0.3 sec, milestone_1 scales back down then milestone_2 scales back down. (Many elements chained together like this should result in a wave-like progression.) How do I do this? I've tried different methods, to no avail. Below is one attempt that doesn't work. The result of code below is: milestone_1 scales up, then milestone_2 scales up, then milestone_2 scales down then milestone_1 scales down. Not good. (Btw: I'm writing this code into my script window in Animate CC, so using EaselJS syntax.) //DOESN'T WORK RIGHT: var tl2 = new TimelineMax({ yoyo: true, repeat: 1 }); tl2.to( this.milestone_1, 1.2, {scaleY: 2, scaleX: 2} ) .to( {}, 0, {} ); // Dummy tween. Seems like can't make the delay less than 1 sec. Even if set that number to 0, still seems like about a sec delay after scale up. tl2.to( this.milestone_2, 1.2, {scaleY: 2, scaleX: 2} ) .to( {}, 0, {} ); A secondary issue is what seems like a limit to how short of a delay I can set. Seems like I can't get a shorter than about a sec delay. Codepen: (I can also post my test FLA if anyone has Animate CC and wants that.) I also have a general question that would help me get on a 'learning curve': For the types of questions above (overlapping tweens and shortening the length of a delay), where would I find the answers? (What terms would I search for, presumably on the Greensock site?) Thanks much!
