Search the Community

I have three timelines, playButtonAppear, playButtonPulse, and playButtonDisappear. Basically, the appear and disappear ones will always overlap the basic pulse state, so the goal is to smoothly transition between the pulse's bounce, and the animation of the appear or disappear. To control this, there is an offset where one meets the other, and fiddling with it helps to dial in to make sure the overlapping items are in sync. This is all great, but I'm noticing that the values I set (even when absolute as opposed to += or -=) are not the actual values being used. For instance, if say I want the pulse to shrink down to 0.8 scale, it will shrink down anywhere from no shrink down to 0 scale depending on exactly where it intersects the appear timeline. The results also differ based upon load times for the page... if one timeline was bumped a bit, the values for the next one overlapping it are different. This is not what I want. I want it to exactly shrink and grow under all circumstances from the absolute values I've set. I understand this will mean some nasty jumps if the interval overlap timing isn't correct, but I can work to dial that in. If I say shrink down to 0.8 and loop, for instance, it should always oscillate between 1 and 0.8 regardless of where the previous timeline had it when they overlapped. I'm not sure what this sort of interpretation is called, but I vaguely remember stumbling across it once in the documentation. Any pointers as to how to alter this behavior?

I wonder how to skip resp. merge tweenTo() event when triggered multiple times. Let me give an example first of all to illustrate my purpose: http://jsfiddle.net/vvweosts/1/ For now every single animation finalizes seperate each time when the button is triggered multiple times before given tweenmax is complete. But i would like to some kind of merge all triggered tweenTo() to one single animation. One tweenMax has a duration of 2sec that scale for 0.1. When i trigger the button 4 times immediately consecutively i would like the animation to end at scale(0.4) with a duration of about 2sec. Thank you in advance

Hi All, I have created a timeline which triggers an animation of a few lines of text and a couple of images. I heavily simplified the code to keep it simple in my Codepen example. My problem is that when I click to re-trigger the animation whilst it is already animating, the animation starts behaving in a way that I would not expect it to. Some of the text and/or images fade out or stop loading. I'm two months into Javascript and GSAP so I'm sure it's down to my logic. I just cannot work out how to stop this happening. Help will be very much appreciated. Thanks for your time. Steven

This tweet is where it started https://twitter.com/gryghostvisuals/status/556154294823813120 I'm doing a series of tutorials and articles for Tuts+ on TimelineMax so I'm interested in types of effects and demos readers would like to see included in this series. Thanks in advance for your ideas posted \o/

In this demo, am I missing something that prevents tweenTo from working when seek works just fine? I'm sure I'm just totally overlooking something simple... Thanks!

Hey, guys! I'm wondering the best way to setup a somewhat complex situation in which I can control tweens (TweenMax) from multiple timelines (TimelineMax) and/or from timelines and the tweens themselves. This is too involved for a CodePen, but it's likely just conceptual and I'll clarify, further. Here are some givens: I'm using drawSVG, but I think the analogy can apply to any tween. For simplicity, imagine a simple x tween in all cases 5 sets of 5 unique tweens (resulting in 25 unique tweens). need to animate each set in sequentially, but out simultanously. that is, "1,2,3,4,5 in" and "12345 out." The rub is that I want to be able to interrupt at any time. If this is clear, I could end up with "1,2,3 (half way) in", interrupt, and then "123.5 out" That is, 1 and 2 will finish, 3 will be half-way complete, I interrupt, and the 1, 2, and the visible half of three all tween out at the same time. When I was able to animate in and out sequentially, this was super easy because all I had to do was create one timeline and reverse it. Most important to this question, I could interrupt any time and everything looked beautiful. Half-complete still reversed seamlessly. When I was asked to switch to sequential in and simultaneous out, I was no longer able to reverse with a single timeline.reversre() call any time I wanted. For my first test, I created two timelines: sequential and simultaneous. I could easily play sequential in, then set the progress of simultaneous to 1 and reverse that timeline out. All fine, but I was no longer able to interrupt the switches. For example, half way through sequential in, the non-complete timelines would obviously jump to their ends to simultaneously reverse out. Then I wondered if I could create just the 5 sequential timelines but tell each tween to reverse individually (instead of reversing the timeline). And, I would then cleanup using progress() to make sure the timeline was at 0, etc. That is: "group1timeline.play()"; interrupt half way through the 3rd tween; "all group1 tweens reverse"; group1timeline.progress(0). But, I got some odd results. I moved on to thinking about synchronizing progress for each corresponding tween in the sequential and simultaneous timelines, but thought that too complicated. Next I thought about not using TimelineMax at all. . Put each tween of a group in an array and then play and reverse each one. That seems like it will work. How would you recommend setting up 5 sets of tweens so that I could sequentially animate each set in, but interrupt and simultaneously animate only the progress thus far, out simultaneously?

Hey guys! I have a div with text placed inside a container with a flexible width which means that depending on the screen width the height of the div will change. I would like to tween the height and alpha so that they start at height: 0px and autoAlpha:0 and on click the height increases to 100% of the text as it fades in. The provided example is part of a much larger timeline in my project and all other aspects of my gsap code are working great. I have read through other demonstrations using the set property, but I have not seen this working with TimelineMax, only with TweenMax. Is there something else I need to do to get my text container to start at 0 and tween to auto? Much appreciated!

Is it possible to move labels around dynamically after they have been created? The reason I ask is that the parameters of my tweens are changing dynamically in realtime. If the start and end point of the tween moves, then I have to remove the tween from the timeline, and insert a new tween with the new parameters. What would be very nice, is if I can create the tweens based on labeled positions, and then move those labels dynamically...with the start points of those tweens moving accordingly. Is this possible? Thanks.

Hello, I am having a little trouble with finding a good equation for animating text with a fixed play length. A user needs to be able to tell me: "I want this animation to play for [x] amount of seconds" I am using TimelineMax.staggerFrom with a SplitTextField to make this happen. I first need to ensure my understanding of StaggerFrom is correct. In this case, lets say we are doing a fade in by character. Here is my understanding of how this should work: T = total time (2 seconds in this case) C = total number of characters (let' use the word "Hello", so this is 5) A = time for each character to fade in S = stagger time (time between letters starting to fade in) I inferred from the documentation that the total time of a StaggerFrom could be calculated by the following equation: T = (S * (C-1) + A) example: "Hello" in 2 seconds 2 = (.35 * (5-1) + .6) This is saying that the total time equals the total of all the stagger times plus the time it takes for 1 character fade in. The difficult part, which I am having trouble with, is using different numbers for the stagger time and fade time, as I want the characters to overlap on the fade in. I believe my equation for how the StaggerFrom is working is incorrect, since my simulations in Excel all work but when I port it over to actionscript (and yes I checked the variables at runtime and they are matching my simulation), it only plays for around 1 second. If anyone could help correct my understanding of how StaggerFrom works, I would greatly appreciate it! Thank you!

I discovered today (unless im doing it wrong) that my paused tweens and timlines don't play when added to a timeline. They need to be manually unpaused. Is this a desired effect? Would you guys be open to implementing a switch? Thanks.

Is there is any way to reverse a timeline in a different way compare to when it plays for example in my case, I would like to move elements in the scene one by one but when it comes to reverse the scene I am thinking of moving all the elements out of the scene at once ! So is there a shortcut for this or I have to write another timeline? This is my timeline code : var tlThree = new TimelineMax(); // SP tlThree.add( TweenMax.to(".layer-thirtyFour", 0.35, {visibility:"visible", top:0}) ); tlThree.add( TweenMax.to(".layer-thirtyFive", 0.35, {visibility:"visible", left:0}) ); tlThree.add( TweenMax.to(".layer-thirtySix", 0.35, {visibility:"visible", top:0}) ); tlThree.add( TweenMax.to(".layer-thirtySeven", 0.35, {visibility:"visible", left:0}) ); tlThree.add( TweenMax.to(".layer-thirtyEight", 0.35, {visibility:"visible", left:0}) ); tlThree.add( TweenMax.to(".layer-thirtyNine", 0.35, {visibility:"visible", top:0}) ); tlThree.add( TweenMax.to('.detail[data-title="seaLevelRise"]', 0.35, {display:"block", alpha:1}) ); tlThree.add( TweenMax.to('.up[data-dest="greenHouse"], .down[data-dest="cleanEnergy"]', 0.35, {delay:0.2, display:"block", alpha:1}) ); Normally I use .reverse method like this : tlThree.reverse() But it reverses the timeline one element at a time and in some special cases I would like to reverse the timeline as a whole in a way that all elements move out of the page in 0.35 s time, please note that my CSS styles for these layers are like this for example : .layer-thirtyNine { visibility: hidden; position: absolute; left: 0; top: -100%; } So if this goes out of the page as a whole in any direction does it interfere with CSS ? Thanks in advance. PS: www.12wave.com Has done this using GSAP but I could not find out how!

I have a clickable icon which when clicked by user I want to reverse a timeline and after the reverse process is finished play another timeline but the point is that I want to call a function just before the second timeline starts to play so here is the functions I would like to call : function day() { $('section').removeClass('night').addClass('day'); } function night() { $('section').removeClass('day').addClass('night'); } and here is the click function I wrote: $('.up').click(function() { TweenMax.delayedCall(0, function(){tlFour.reverse()}); TweenMax.delayedCall(5.4, function(){tlThree.call(day, 0); tlThree.play()}); } In which the second 5.4 delay is the time needed for tlFour timeline reverse to finish and here are my timelines : var tlThree = new TimelineMax(); tlThree.pause(); tlThree.add( TweenMax.to(".layer-twentyTwo", 0.5, {left:0}) ); tlThree.add( TweenMax.to(".layer-twentyThree", 0.5, {top:0}) ); tlThree.add( TweenMax.to(".layer-twentyFour", 0.5, {top:0}) ); tlThree.add( TweenMax.to(".layer-twentyFive", 0.5, {left:0}) ); tlThree.add( TweenMax.to('.detail[data-title="cleanEnergy"]', 0.5, {alpha:1}) ); tlThree.add( TweenMax.to('.up[data-dest="greenHouse"]', 0.5, {delay:0.2, display:"block", alpha:1}) ); tlThree.add( TweenMax.to('.down[data-dest="greenPlanet"]', 0.5, {delay:0.2, display:"block", alpha:1}) ); var tlFour = new TimelineMax(); tlFour.pause(); tlFour.call(night, 0); tlFour.add( TweenMax.to(".layer-twentySix", 0.5, {alpha:1}) ); tlFour.add( TweenMax.to(".layer-twentySeven", 0.5, {top:0}) ); tlFour.add( TweenMax.to(".layer-twentyEight", 0.5, {left:0}) ); tlFour.add( TweenMax.to(".layer-twentyNine", 0.5, {top:0}) ); tlFour.add( TweenMax.to(".layer-thirty", 0.5, {left:0}) ); tlFour.add( TweenMax.to(".layer-thirtyOne, .layer-thirtyTwo", 0.5, {left:0}) ); tlFour.add( TweenMax.to(".layer-thirtyThree", 0.5, {top:0}) ); tlFour.add( TweenMax.to('.detail[data-title="greenPlanet"]', 0.5, {alpha:1}) ); tlFour.add( TweenMax.to('.up[data-dest="cleanEnergy"]', 0.5, {delay:0.2, display:"block", alpha:1}) ); tlFour.add( TweenMax.to(".review", 0.5, {delay:0.2, display:"block", alpha:1}) ); Please note that tlFour.call(night, 0); is for the time that tlFour timeline plays as a result of another click and I would like to reverse that but as the timeline reverse method does not reverse calling functions I had to call the day() function to reverse that but the problem is that this function executes after tlThree is played completely but I want it to be called just before that, any other Ideas on how to write this code in a better way is also appreciated because I am new to GSAP, Thank you PS: for tlFour the night() function is called just before the timeline begins to play and that is fine but for tlThree this is not happening and that is the problem.

Hi guys, so about a year ago i used teenmax v 1.12, and it worked fine. I updated to the latest version somehow the same code doesn't work anymore. Can someone point me to the new changes in the codes. Or maybe if my code is wrong. Thx. TweenMax.to($("#cover"), 5, {css:{alpha:0}}) The above is the code. If i replace v 1.14 to the old version, somehow it works. By the way i'm using this in adobe Air HTML.

So I am using .reverse() method for my Timeline in some cases, The questions is how could I jump to the first frame instead of waiting for it to complete the reverse ?

Hello! I posted once before about a similar problem, and I was able to workaround that problem easily, but this one is a tad different. In the codepen sample I provided, there are 6 color blocks. Each one is animated in its own timeline, and each timeline is then nested in a master timeline. In this master timeline, I set up a pause at the end of each nested timeline, so that playing the timeline only plays one scene (or, in this example, one animation) at a time, then pauses and waits for the user to press "continue". It is also paused at the start, so you must press "continue" to see the first block. In the linear sequence, all is well: run the codepen and press continue at the end of each block's animation and the blocks animate in when and as expected. The following steps, however, cause a problem: 1. Run the codepen 2. Press continue to display the red block 3. Keep pressing continue and finish the sequence so that all blocks are on-screen 4. Press the button labeled "Orange" and see the orange block animate in as expected 5. Press the button labeled "Blue" and see the green block animate in As you can imagine, the blue block should have been the one to animate in. In addition, I am firing events on each block animation's start and finish, and the events fired for step 5 are two start events for the "green" block and 1 finish even ("green-done") for the green block. The "blue" event never fires. I'm at a loss. Anyone have any idea why this isn't working, or what I'm doing wrong? Effectively, having these "jump-to-scene" buttons is crucial for a project, so any help would be very valuable. Thanks, Frank

Before I go trying to reinvent the wheel, I thought I'd ask if anyone has experiencing in printing a timeline and its nested timelines/tweens in block format. What I'm envisioning are blocks whose widths are relative to their duration, contain nested elements which can be interacted with the fin-tune and/or reorder animations.

I am using TimelineMax to create a sort of comic that the user can step through. At the end of each sequence of animations, I have a label to indicate the completion of a scene, a pause, and a triggerEvent function that lets my application know that we now need user interaction to continue (typically, to display a next button). Unfortunately, when the user clicks the "next" button to continue (which simply calls the play() method of the timeline), the triggerEvent function fires again, because the playhead was paused at that same frame. There are a number of solutions I am considering so that the triggerEvent function doesn't fire on play, but I wanted to first find out from folks here if there is another way I should be approaching this that is more obvious (as is frequently the case). Thanks in Advance, Frank

Hello, I am having a little trouble with the SplitTextField and need a little direction. I cant find a good way to explain this, so I'm going to describe it bluntly. Example: I have two animations in a timeline, 1 should fade text in, the next should use a splittextfield to fade out by word When I run the animation as a whole, the text appears after the entire animation is complete (once the splittextfield has been disposed) My Theory: Since I am adding all the animations to a master animation at once, the splittextfield is being created right away and looking at the current state of the textfield. Since it has an alpha of 0, the splittextfield is created with an alpha of 0 and never shows on the screen. Below is my code of each item: // FADE IN /**Text Fades In From 0 to 1 (Alpha)*/ public static function FadeIn(target:Object, time:Number):TimelineMax{ var t:TimelineMax = new TimelineMax(); TweenMax.set(target,{alpha:0}); t.add(TweenMax.to(target, time, {alpha:1})); return t; } // FADE OUT BY WORD /** Text fades out by word */ public static function FadeOutByWord(target:TextField, time:Number):EnhancedTimelineMax{ var stf:SplitTextField = new SplitTextField(target, "words"); var t:EnhancedTimelineMax = new EnhancedTimelineMax({onComplete:cleanup, onCompleteParams:[stf]}); t.splitTextField = stf; t.add(TweenMax.staggerTo(stf.textFields, time / 2, {alpha:0}, (time / stf.textFields.length), cleanup, [stf])); return t; } // CLEANUP /** Cleans up the Split Text Field */ private static function cleanup(mySTF:SplitTextField):void{ mySTF.destroy(); } // TEST PROGRAM masterTimeline = new TimelineMax(); createTextField("MAKE SOME NOISE!!!!\n GO DIAMONDBACKS!"); masterTimeline.add(StandardAnimations.FadeIn(text,4)); masterTimeline.add(StandardAnimations.FadeOutByWord(text,4)); masterTimeline.play(); My Goal: I would like the text to fade in to an alpha of 1, then I want the fade out function to fade each word using alpha from 1 to 0. My Question: If my theory is correct, how do I keep the splittextfield from being created right away? Please let me know if there is a correct method which I am missing. Thank you very much!

Hello, Trying have the last animation sit for 0.5s before it restarts. Tried a few things that are commented out. Dug around a bit with no luck. window.onload = function() { var logo = document.getElementById("logo") // tweenBtn = document.getElementById("tweenBtn"); //var tl = new TimelineMax({repeat:-1}) var tl = new TimelineMax({repeat:-1}) //logo will animate 100px to the right of its current position tl.to(logo, 0.5, {left:"+=100px"}) .to(logo, 0.5, {left:"+=100px"},"+=0.5") .to(logo, 0.5, {left:"+=100px"},"+=0.5") .to(logo, 0.5, {left:"+=100px"},"+=0.5") /* Delay Fails */ // .delay("+=0.5"); // .pause(0.5, false); // .delayedCall(0.5, function() { tween.resume();}); } Thanks for your help.

Hello, I am having a little bit of trouble finding a way to remove the split text field from a textfield once I stop the animation its in. Long story short, I made a library which creates little timelines (sub-animations) for each animation (a timelineMax for flashing text, one for bouncing text, etc.). I give the end user the ability to combine all these little tiimelines into one big timeline, so that they may do something like the following: Text fades in, text flashes, text spins, text slides off screen All is working fine until one point. If one of those sub-animations uses a Split Text Field for its operation and the end user clicks the stop button before that sub-animation completes, the Split Text Field stays on the textField and I cannot find a way to remove it (usually the textField disappears). If needed, I can provide some code but I have a sneaky suspicion that there is a very simple and already completed solution for this exact issue. I can say that I do the following whenever the "stop" button is clicked as an attempt to fix the issue: (These are applied to the 'master' timeline) timeline.stop(); timeline.seek(0); timeline.clear(true); TweenPlugin.activate([blurFilterPlugin]); TweenMax.to(target,0,{blurFilter:{remove:true}}); Thank you in advance for your assistance!

Hi guys! I'm developing a mobile app with computer network animations, using GSAP. My intent is to show multiple messages to user using tl.call() function of TimelineMax, with $ionicPopup, before the animation starts. See the code: function($scope, $stateParams, $ionicPopup) { TweenLite.defaultEase = Power1.easeInOut; var tl = new TimelineMax(); tl.call(function() { tl.pause(); $ionicPopup.alert({ title: "Informação", template: "{{'SEQUENCE_NUMBER_PRESENTATION_1' | translate }}" }).then(function() { tl.resume(); }); }); //"dummy" here tl.call(function() { tl.pause(); $ionicPopup.alert({ title: "Informação", template: "{{'SEQUENCE_NUMBER_PRESENTATION_1' | translate }}" }).then(function() { tl.resume(); }); }); //more code } The problem occurs when I call tl.call() like that, one just after other, the second does not work! If I insert a kind of "dummy" statement between the two "calls", like "tl.to('.animationFrame', 0.5, {x: 0});", it works fine. Can you say what is wrong in my code, or if it is a bug in GSAP? Thanks.

If you look at the Codepen demo you will see I have three buttons, each linked to a different timeline. Clicking a button starts a timeline, which then pauses. I have two issues: 1) I don't want a button click to start a timeline if one is already active. I tried changing the test to if ( ( timelines[1].progress() === 0 ) && ( !timelines[current].isActive() ) ) { but that doesn't work. 2) My button code would obviously be better in a for loop, but if I do that JSLint says I shouldn't declare functions within a loop. I've googled for solutions but what I've found has been hacky or inelegant. Any ideas how I can solve that? I've been using GreenSock for about a week, and I love it! Great design.

Is there a way to set a callback after instantiation of a TimelineMax object?

import com.greensock.*; import com.greensock.easing.*; TweenLite.defaultEase = Linear.easeNone; var tl:TimelineMax = new TimelineMax(); tl.add( TweenMax.to(mc1,2, {x:"500"}),0.5 ); tl.add( TweenMax.to(mc2,2, {x:"500"}),1 ); tl.add( TweenMax.to(mc3,2, {x:"500"}),1.5 ); tl.add( TweenMax.to(mc4,2, {x:"500"}),2 ); tl.add( TweenMax.to(mc5,2, {x:"500"}),2.5 ); stage.addEventListener(MouseEvent.CLICK,Rewind); function Rewind(e:MouseEvent) { tl.tweenTo(0); } Hi, I'm trying to tween a TimeLine to a certain time in the timeline (0, in this case). Is it possible to control how quickly this it tweened to? even adding easing? Something like tl.tweenTo(0,2,{ease:Sine.easeInOut}); Thanks, Darren