Search the Community

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

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!

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 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!

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.

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

Hi all, I'm doing a front page with 5 animations where one fades away in place of another, and so on, and then it loops. Rather than write one enormous hideous looping timeline I thought I'd make each of the animations a separate timeline and use callbacks to trigger subsequent timelines and JQuery to fade the relevant DIVs in and out. A condensed version of my code is below. The callbacks work great until I get to the last animation (vr_pan5). It fades in the DIVs required to replay the first animation, but then doesn't restart the first animation (vr_pan1). I tried shuffling the order of the timeline declarations in the code. The issue seems to be an inability to play a timeline at the top of the code, after having played a timeline further down. I also tried moving code in and out of the window.load function, but that didn't make a difference either. Sorry for asking what is essentially a Javascript question and not a Greensock question! Also, sorry for not creating a codepen; I figured a glance at my semi-pseudocode would be enough for someone enlightened. Code follows: var vr_pan1, vr_pan2, vr_pan3, vr_pan4, vr_pan5; vr_pan5 = new TimelineMax({paused:true,repeat:0, onComplete:nextAnim, onCompleteParams:["#fg5", "#bg5", "#fg1", "#bg1", vr_pan1]}); vr_pan5 .add("start") //tween some stuff ; vr_pan4 = new TimelineMax({paused:true,repeat:0, onComplete:nextAnim, onCompleteParams:["#fg4", "#bg4", "#fg5", "#bg5", vr_pan5]}); vr_pan4 .add("start") //tween some stuff ; vr_pan3 = new TimelineMax({paused:true,repeat:0, onComplete:nextAnim, onCompleteParams:["#fg3", "#bg3", "#fg4", "#bg4", vr_pan4]}); vr_pan3 .add("start") //tween some stuff ; vr_pan2 = new TimelineMax({paused:true, repeat:0, onComplete:nextAnim, onCompleteParams:["#fg2", "#bg2", "#fg3", "#bg3", vr_pan3]}); vr_pan2 .add("start") //tween some stuff ; vr_pan1 = new TimelineMax({paused:true, repeat:0, onComplete:nextAnim, onCompleteParams:["#fg1", "#bg1", "#fg2", "#bg2", vr_pan2]}); vr_pan1 .add("start") //tween some stuff ; function nextAnim(fadeout_div1, fadeout_div2, fadein_div1, fadein_div2, new_anim) { $(fadeout_div1).fadeOut(); $(fadeout_div2).fadeOut(); $(fadein_div1).fadeIn(); $(fadein_div2).fadeIn(); var o = new_anim; o.restart(); } $( window ).load(function() { vr_pan1.play(); }); Thanks, eh.

Hey there guys! I've spent a good deal of time trying to figure this out - so now I've decided to ask a bit of help. When running and reversing timelines, the properties might change. Is there a way of updating these properties on the fly? I've come up with a small example, check out the codepen! Please let me know if you need me to clarify anything

This may be obvious, but I was wondering the best practice for dealing with Timelines on rollover/out states? Specifically I do a Timeline animation on rollover of an object (using jQuery's hover()) — on rollout I want to kill that timeline and tweenback — I use a simple TweenMax on the rollout because I don't simply want to reverse the Timeline (that would be the obvious and elegant solution), as the 'out animation' is different from the 'in animation'. The best I could come up with is to store the Timeline in the object, and then kill it on rollout (myTImeline.kill()) and then do the 'out animation'. Is there a more elegant way? I take it because a Timeline is a complex thing that there's no equivalent to TweenMax's 'kill all tweens of this object'?

I am having some issues related to tweening HTML elements in 3d — specifically <li>'s in this case. I'm working on a site which is generated by PHP and have a menu generated for me of this type (the real menu is longer) <ul id="menu-main" class="menus menu-secondary sub-menu sf-js-enabled"><li id="menu-item-42" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-42" style="visibility: visible; opacity: 1; transform: translate3d(0px, 0px, 0px);"><a href="http://whatever.com/category/about/">About</a></li> <li id="menu-item-1350241" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1350241" style="visibility: visible; opacity: 1; transform: matrix(1, 0, 0, 1, 0, 0);"><a href="http://whatever.com/search/">Search</a></li> <li id="menu-item-47" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-47" style="visibility: visible; opacity: 1; transform: matrix(1, 0, 0, 1, 0, 0);"><a href="http://whatever.com/category/popular/">Popular</a></li> </ul> Wanted to fool around with some simple GSAP animation, and all works fine but I cannot get the li's to tween rotationX or rotationY within the jQuery hover callbacks. rotationZ works. If someone could point out the obvious point I'm missing I'd be grateful. initMenus(); function checkMenuItem(theTween) { if ($(theTween.target).hasClass('current-menu-item')) { tl = new TimelineMax(); tl.to(theTween.target,.25,{ease:Quad.easeInOut,scale:1.5}); tl.to(theTween.target,1,{ease:Bounce.easeOut,scale:1}); } } function menuover() { var tl = new TimelineMax(); tl.to(this,.25,{rotationX:'+=30deg',ease:Quad.easeIn,scale:1.5}); tl.to(this,.35,{rotationX:'-=30deg',ease:Quad.easeOut,scale:1.25}); } function menuout() { TweenMax.to(this,1,{ease:Bounce.easeOut,scale:1}) } function initMenus() { var tl = new TimelineMax({}); $('#menu-main li').css('visibility','visible'); $('#menu-main li ').hover(menuover,menuout); tl.staggerFrom('#menu-main li ',1.4,{onStart:checkMenuItem,onStartParams:["{self}"],alpha:0,x:"-=100",ease:Elastic.easeOut},.15,.1); }

Hi there. This is a straight forward question. What is the best technique for coding a replay button in Greensock AS3? Would TimelineMax be best? Could I see an example? Thanks in advance for any assistance.

Hi, I am trying to animate two div in the same ScrollScene simultaneously but only once has animation, the second is not animated. I just made a fiddle for this problem, I have other ScrollScene before and after. Codepen URL: http://codepen.io/dhenriet/pen/qtsgi

Have a sequence of overlaid images, am animating their opacity. The animation is looped, but pauses mysteriously for three seconds or so at certain points. Frustatingly the codepen does not recreate the issue - using coloured boxed only, it seems to proceed without pause. Am using image files each 590 kb (1024 x 768). Please note - this is designed for use as a local site only. Is this something to do with the browser cache? Am using Chrome on a Mac. The overlay of CSS animation does slow it down, but removing it does not rid the pausing issue. Alternatively, could it be that the CSS opacity is somehow reverting to the pre-animated state? Developer tools shows that the animation processing continues, during the pause in which it does not appear on screen. thanks for all help

Hello, I am have a simple animation that hides and shows the navigation. I made this into a TimelineMax sequence where on mouseenter it plays the time line, and on mouseleave it reverses the time line. With out setting a timer for 2 seconds, how can I delay the start of the reverse when the user rolls off? Here is what I currently have. var navTL = new TimelineMax(); navTL.to( $navMenu, 2, { alpha : 1, left : 0, ease : Strong.easeOut }, 'start' ) .staggerTo( $navMenu.find( '.top-btn' ), 1, { alpha : 1 }, 0.2, 'start' ); navTL.pause(); $navArea.on( 'mouseenter',function ( e ){ navTL.timeScale( 1 ).play(); } ).on( 'mouseleave', function (){ navTL.timeScale( 3 ).reverse(); } ); I tried adding things like navTL.delay( 2 ); to the mouse leave function And tried adding a repeat delay to the time line its self. But since I am not yoyo-ing that doesn't really come into play. I am looking for a GSAP solution to this. I can make a settimeout function but I don't think that is the cleanest way. Thanks in advance for your help. Jermbo

Hi! Is it possible that the onComplete and totalDuration methods of TimelineMax doesn't work at all? version 12.1.5 I have nested TimelineMax instances all has totalDuration = 0, the nested onComplete callback functions doesn't get called. The main TimelineMax onComplete function is triggered immediately though. Or I missed something in the last few months.. Thank you. Gergely.

I don't know. What am I doing wrong? My code is essentially like this: var tl = new TimelineMax({paused:true}) tl.to($("#pin"), 1, {x:455,y:198, onComplete:myFunction, onCompleteParams:["params"]}) .addLabel("play_from_here") .to($("#pin"), 1, {x:737,y:307}) tl.play(play_from_here) using play(), resume(), seek(), it doesn't matter, it always trigger all events on the way.

Hi, I'm still new to GSAP and considering that I couldn't find anything helpful, I suppose that I'm missing something obvious. Basically, I have a timeline which I need to kill/clear, then rebuild it. The new tweens in the timeline have the same target as the old ones, although they might have different properties. This is the simplest demo of my problem: http://codepen.io/nyordanov/pen/gAcjI You will see that #test gets stuck. What is the correct way of doing this?

Hi, I'm trying to run a sequence with multiple objects using a single TimelineMax instance, then moving between different labels on the timeline. Mostly this works well, but if I add another object to the sequence, with a delay, going to the specified time doesn't reset the objects properly. E.g. tl.insert(TweenMax.to(obj1, 1, {x:100, y:100}), 0); tl.insert(TweenMax.to(obj1, 1, {x:200, y:100, delay:1}), 0); //At this point tl.gotoAndStop(0) will reset the animation fine. if I add a tween of another object to the timeline, which has a delay also, then tl.gotoAndStop(0) doesn't work. E.g. tl.insert(TweenMax.to(obj2, 1, {x:200, y:200, delay:1}, 0)); Without the delay parameter, the timeline will reset itself fine if I call tl.gotoAndStop(0). Is there a bug in TimelineMax, or have I done something wrong?