Search the Community

Hey, so I want to do what the title says: make a title slide in and then slide out with timelineLite. My code is in this jsfiddle. I know that, because I remove the top property, the title goes down, but what I wanted was that that going down was part of the transition, and not an instant thing, like it it is now. Is there a way to make this work? Thanks! (By the way, I'm new in the forum, so I'm sorry if I made any mistakes asking this question.)

Dear GSAP developpers, First of all, thanks for your library, which is now the only source of animation for the website I'm coding. Despite all my efforts, I can't find a way to work around my wish to use the same tween in multiple timelines. Yes, I can easily play a Tween and reverse it whenever I want (see the Codepen)... Yes, I can easily create a Timeline for one specific situation... But no, I can't find how to control a tween being played in a timeline from another timeline ! This Codepen's HTML describes what I would like to achieve. The buttons perform as I expect them to, except for the sequence requirement (#hero1, THEN #hero2). Obviously, I would like to use a TimelineLite for each sequence (using delays is not an option if the number of tweens involved increases), to allow the opening/closing of each #hero to be reversed midway if the user decides so. I guess my trouble comes from this (found in FAQ) : Any idea on how to get the behaviour I describe in the codepen's HTML ? [EDIT : I initially came to GSAP to avoid using callbacks, please don't tell me that's the solution :/] [EDIT : I just realized the problem as I put it is easy to solve. What I need is to AVOID at all costs using more than one tween for each object I work on. No problem with maniuplating in any way the tweens I declared, though. This forked codepen doesn't work, due to the funny behaviour when you quickly click on buttons]

I would like to set the 'top/left' coordinates of an element in a TimelineLite using variables set in a prior call (see below). When I use the code below (a simplified version of my code) I get the following error: 'ReferenceError: Can't find variable: finalleft'. I have also tried using window.foo to set the variables which also did not work. Any ideas on how to get this to work? var problemtl = new TimelineLite(); problemtl.to(step1, 1, {alpha:1}) .to(step1, 1, {scale:.8, left:300, top:300}, '+=0.5') .call(function(){finalleft = 500; finaltop = 100}) .to(step2, 1, {alpha:1}, '+=0.5') .to(step2, 1, {scale:.8, left:finalleft, top:finaltop}, '+=3');

Hi there, I am trying to copy exactly what the animator is achieving in this clip. http://greensock.com/sequence-video I need to create a HTML5 banner ad for a client. Unfortunately, I need a bit more control than just using Tweenlite delays and overlaying different animations. TimelineLite seems to offer the answer that I need and I thought that this tutorial was offering the solution. However, although my banner works as a simple animation as soon as I convert the code similar to that in the tutorial it ceases to work. My code looks like this... <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/plugins/CSSPlugin.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/easing/EasePack.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/TweenLite.min.js"></script> <script type="text/javascript"> var tl = new TimelineLite(); tl.from("#heading", 1, {left:-280, autoAlpha:0}) .from("#button", 1, {left:-280, autoAlpha:0}) .from("#tandc", 1, {autoAlpha:0}) </script> Do I need to include a <script src= for TimelineLite? Am i missing something really obvious? Thanks in advance, Phil

Hi, So I have this code: var toggleInfo = function(){ var info = new TimelineLite(); $('.info-open').click(function(e){ e.preventDefault(); info.to('.info', 0, { css: { className: "-=display-none"}, immediateRender:false}); info.to('.info', 0, { css: { className: "+=flex"}, immediateRender:false}); info.from('.info', 0.4, { css: { transform: "scale(0.2) translateZ(0)", opacity: 0 }, ease: Power3.easeOut, force3D: "auto"}); info.staggerFrom('.about span', 0.4, { css: { transform: "translateY(60px) translateZ(0)", opacity: 0}, ease: Power3.easeOut, force3D: "auto"}, 0.1); info.staggerFrom('.contact li', 0.4, { css: { transform: "translateY(-30px) translateZ(0)", opacity: 0}, ease: Power3.easeOut, force3D: "auto"}, 0.1); info.from('.info-close', 0.2, { css: { transform: "translateY(-60px) translateZ(0)", opacity: 0}, ease: Power3.easeOut, force3d: "auto"}); }); $('.info-close').click(function(e){ e.preventDefault(); info.reverse().timeScale(2); }); } And it works fine the first time i click the triggers. However, when I click "info-open" again after I have clicked "info-close", it fires info.reverse(). This is an overlay im toggling and the first open and close works, but when i want to open it again it only fires the reverse animation thus closing the overlay.

Hello, I'm pretty new to JS, but worked for many years with Flash AS. One issue I'm running into are Linter problems in my code editor "Brackets". My animation runs fine and Chrome also has no errors. But I really would like to get rid of all these Linter probelms showing up. I've loaded jquery and TweenMax libraries in my main html file: <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/TweenMax.min.js"></script> <script src="main.js"></script> In my "main.js" I have: var videoPanelTl = new TimelineLite(); Now this Linter problem that shows up: "'TimelineLite' is not defined. - W117 -". More problems show up when using "$" , or easing "Back" for example. They all show up as "is not defined". Seems like my JS file doesn't even know that TweenMax has been loaded in the html file? I'm also not getting any code hinting for TweenMax - probably for the same reason. I've searched for many hours on the internet since it seems a pretty basic question but couldn't figure it out. Is there a way to fix this? I would really appreciate any help.

Hi, I'm having trouble getting the revert() function to work after the following SplitText Timeline Tween with a random character order... http://codepen.io/GreenSock/pen/HafFE Can anyone help me out? Thanks! ~ Kyle

Hi Carl, I want to execute a moderately difficult timelinemax anumation. Every time I check out http://greensock.com/position-parameter I see the Visualizer. It reminds of Flash and I start getting illusions of an After Effects Timeline visualizer. Any news on this? Is it up for sale as a plugin? I would pay. I need to stop the illusions.

Hello, I have a little problem understanding the function of reverse TimelineLite. If someone has 5 minutes to help me understand, would be nice. $('#plop').on('click', function() { $(this).toggleClass('is-open'); // Animation var animNav = new TimelineLite({ paused: true }); animNav.to('#nav', 0.2, { x: 100, opacity: 1, ease: Sine.easeInOut }) .staggerTo('.nav-link', 0.1, { opacity: 1, ease: Sine.easeInOut }, '0.1', '-=0.15'); if ($(this).hasClass('is-open')) { animNav.play(); } else { animNav.reverse(); } return false; });

I might be just having a brain fart, but is there a simple way to tell a TimelineLite instance to play, and stop when it gets to x% of it's total duration? Just for context, I have gauge that's an svg, and I'm using drawSVG to animate all of the elements of a specific class name to indicate how full the gauge is. So if it were, say 75% full, I'd only want the Timeline to animate to 75% of the total. In the attached codepen example, only only some of the rays on that icon would animate. There might be a way better way to do this - I'm very open to suggestions!

this is my coding sample: var timeline:TimelineMax = new TimelineMax(); timeline.staggerTo([mc1,mc2,mc3],1,{onComplete:Function}, 1); i want each mc to have a different function. is it possible?

Hi, I am having a problem with staggerTo() working inside a timeline. Here is my code: var objects:Array = new Array(); function getObjects():void { objects = [object1, object2, object3]; } var timeline:TimelineLite = new TimelineLite(); timeline.call(getObjects); timeline.staggerTo(objects, 1, {scale:0}, 0); The getObjects() function, which populates the objects array, gets called before I apply staggerTo() on the objects. However, I think all of the timeline code gets parsed before any of this happens. So when staggerTo() gets parsed the objects array is actually empty, and the animation doesn't happen. Is there any way around this?

I've been trying multiple different ways of setting up the animation sequence but something is off with the duration and delay on the tween. Please let me know what I've done wrong. I'm trying to have a series of sections scroll in with a pinned child div for the text content and then have few divs animate in once the section is inView. But the autoAlpha and easing of the divs go by too quickly to be seen. Even when I set the delay and duration to 1000. It's easiest to see the whole sequence on my test page: flm.pushdesign.net I'm at a loss... I need your help. I'd be grateful for any suggestions. Cheers, Shannon

Hi, I haven't used the stagger function much but would like to take advantage of it. I have the following: //create the timeline var tlNav:TimelineLite = new TimelineLite(); var clips:Array = [clip1, clip2, clip3, clip4, clip5]; //Thumbs are coming in tlNav.staggerTo(clips, .5, {y:755, alpha:1}, 0.2) which works as expected, but what I need to accomplish is to have all the icons go back down a split second after they moved up, like so: tlNav.staggerTo(clips, .5, {y:794}, 0.2) but can't figure out how to achieve this, since I am not sure how to cut into the started stagger tween in order to start animating the clips down in the same order. They should just pop up staggered and back down right after they have popped up. Perhaps I am overthinking things... Also when to use the TimelineLite and TimelineMax stagger methods? I am a bit confused about that. Thanks guys!

Hi everybody, I hope this doesn't seem too dimwitted, but I can't for the life of me figure out how to get my banners to repeat 3 times. I just started delving into the GSAP tools the other day. I have been tweaking the code below to try and get it working but I keep running into a brick wall. Any suggestions? import com.google.ads.studio.ProxyEnabler; var enabler:ProxyEnabler = ProxyEnabler.getInstance(); ///////////////////////////////////////////// import com.greensock.*; import com.greensock.easing.*; import com.greensock.plugins.*; import com.greensock.TweenMax; import flash.display.MovieClip; //import com.greensock.plugins.BlurFilterPlugin; //TweenPlugin.activate([blurFilterPlugin]); ////////////////////////////////////////////////// /////vars ////////////////////////////////////////////////// var tt = TweenNano.to; var tf = TweenNano.from; var td = TweenNano.delayedCall; var tm = new TimelineMax({repeat:3}); stop(); //TweenLite.to(mc, 1, {blurFilter:{blurX:10, blurY:10}}); ////////////////////////////////////////////////// /////utility ////////////////////////////////////////////////// function makeBtn(_clip:MovieClip, _over:Function, _out:Function):void{ _clip.addEventListener(MouseEvent.ROLL_OVER, _over); _clip.addEventListener(MouseEvent.ROLL_OUT, _out); //_clip.addEventListener(MouseEvent.CLICK, btnClick); _clip.useHandCursor = true; _clip.buttonMode = true; } function btnOver(e:MouseEvent):void{ endframe.cta.gotoAndPlay(2); } function btnOut(e:MouseEvent):void{ endframe.cta.gotoAndPlay(1); } /*function btnClick(e:MouseEvent):void{ var sURL:String; if ((sURL = root.loaderInfo.parameters.clickTag)){ navigateToURL(new URLRequest(sURL), "_blank"); } trace("the " + e.target.name + " has been clicked"); }*/ function getElapsedTime():void{ trace("elapsed time " + getTimer() / 1000); } ////////////////////////////////////////////////// /////animation ////////////////////////////////////////////////// function slideFromLeft(_mc:MovieClip, _time:Number, _endAlpha:Number, _delay:Number):void { _mc.alpha=1; tf(_mc, _time, {x:-500, ease:Strong.easeOut, alpha:_endAlpha, delay:_delay}); } function slideFromRight(_mc:MovieClip, _time:Number, _endAlpha:Number, _delay:Number):void { _mc.alpha=1; tf(_mc, _time, {x:500, ease:Strong.easeOut, alpha:_endAlpha, delay:_delay}); } function fadeAlphaIn(_mc:MovieClip, _time:Number, _endAlpha:Number, _delay:Number):void { tt(_mc, _time, {ease:Strong.easeOut, alpha:_endAlpha, delay:_delay}); } ////////////////////////////////////////////////// /////banner ////////////////////////////////////////////////// function init():void{ makeBtn(btn, btnOver, btnOut); eventOne(); } function eventOne():void{ slideFromLeft(orange_mc, .5, 1, 0); slideFromLeft(logo1_mc, .5, 1, 0); td(.5, eventTwo); } function eventTwo():void{ slideFromLeft(text1_txt, .25, 1, 0); slideFromRight(text2_txt, .25, 1, .75); td(1.75, event3); } function event3():void{ fadeAlphaIn(image1_mc, .5, 1, 0); td(1, eventThree); } function eventThree():void{ fadeAlphaIn(image2_mc, .5, 1, 0); td(1, event4); } function event4():void{ fadeAlphaIn(text1_txt, 0, 0, 0); fadeAlphaIn(text2_txt, 0, 0, 0); fadeAlphaIn(image1_mc, 0, 0, 0); fadeAlphaIn(image2_mc, .5, 0, 0); fadeAlphaIn(logo1_mc, .5, 0, 0); fadeAlphaIn(orange_mc, .5, 0, 0); td(.5, eventFive); } function eventFour():void{ slideFromLeft(text3_txt, .5, 1, 0); slideFromRight(logo2_mc, .5, 1, .5); td(2.5, eventFourB); } function eventFourB():void{ tt(orange_mc, 1, {x:-600, ease:Strong.easeOut}); tt(text3_txt, 1, {x:-600, ease:Strong.easeOut}); tt(logo2_mc, 1, {x:-600, ease:Strong.easeOut}); td(.5, eventFive); } function eventFive():void{ fadeAlphaIn(endframe, 0, 1, 0); slideFromRight(endframe.choice_logo, .5, 1, 0); slideFromRight(endframe.ef_copy, .5, 1, 0); tf(endframe.ht1, .5, {y:"50", ease:Strong.easeOut, delay:.15}); tf(endframe.ht2, .5, {y:"50", ease:Strong.easeOut, delay:.2}); tf(endframe.ht3, .5, {y:"50", ease:Strong.easeOut, delay:.25}); tf(endframe.ht4, .5, {y:"50", ease:Strong.easeOut, delay:.3}); td(1.75, eventSix); } function eventSix():void{ tt(endframe.ef_copy, 1, {x:-600, ease:Strong.easeOut}); tt(endframe.ht1, 1, {x:-600, ease:Strong.easeOut}); tt(endframe.ht2, 1, {x:-600, ease:Strong.easeOut}); tt(endframe.ht3, 1, {x:-600, ease:Strong.easeOut}); tt(endframe.ht4, 1, {x:-600, ease:Strong.easeOut}); slideFromRight(endframe.ef_copy2, .5, 1, 0); slideFromRight(endframe.cta, .5, 1, .5); fadeAlphaIn(endframe.ef_copy3, 1, 1, 1); //tt(endframe.cta, 1, {x:-600, ease:Strong.easeOut, delay:2.5}); //tt(endframe.choice_logo, 1, {x:-600, ease:Strong.easeOut, delay:2.5}); td(.5, getElapsedTime); tm(0, eventOne); } ////////////////////////////////////////////////// init();

Hi all, New to Greensock so bear with me I've created a sidebar which is hidden, when you mouseenter the sidebar, it fires TimelineMax to animate the sidebar open. When you mouseleave it reverses that timeline. This works great. If you hover over the sidebar, even erratically, it behaves as expected. Now, I have a nav item inside the sidebar which, when clicked, fires another timeline which opens a full page subnav. I set a variable to say this subnav is open so I can keep the sidebar open. So the reverse will only run if the subnav is closed. If you hover the sidebar and click the button (looks like a little bottle) a full page colourful nav will appear. If you keep you cursor over the button, click it again (to close the colourful nav), then mouseleave the sidebar, it reverses as expected. If you... Hover the sidebar click the button mouseleave the sidebar to interact with the colourful nav then go back to the sidebar to click the button again to close the nav THEN mouseleave The sidebar should close but it remains open, the timeline doesn't reverse. All the variables seem correct so I'm stumped! I hope this makes sense, I've tried to explain it as best I can. See the Codepen for the working code. Many thanks!

Hi, I know how to call a function when a timeline animation is complete, but what if I want to call it in the middle of the animation? I want to call the displayContent() after the height=0 animation is called, how should I do that? var $outerBox = $selectedTab.parent('.standard-width'); var animate = new TimelineLite({ paused:true //onComplete:myFunction, //onCompleteParams:["param1"] }); animate.to($outerBox , .4, {height:0,opacity:0,ease:Power2.easeInOut}) .to($outerBox , .4, {height:100,opacity:1,ease:Power1.easeIn}) animate.play(); function displayContent(){ $selectedTab.css({display:'block'});// display selected tab }

I want to control my GASAP timeline that I have created in Adobe Edge Animate so this is what I do. //declare my variables var square1 = sym.$("square1"); square2 = sym.$("square2"); square3 = sym.$("square3"); square4 = sym.$("square4"); var tl = new TimelineLite(); //my simple timeline tl.to(square1, 2, {x:445}) .to(square2, 1, {x:-150}) .to(square3, 1, {y:"-=160"}) .to(square4, 1, {y:"-=160"}) sym.$("pauseBtn").click(function() { tl.pause() }); sym.$("playBtn").click(function() { tl.resume() }); and so on... (yeah I figured it out and this is the course I used to figure it out http://greensock.com/sequence-video AWESOME easing_2.html

Hello, I'm wondering if its possible to continue a timeline if a specific tween is completed when using appendMultiple, rather than waiting for the longest tween to complete. I don't want to use onComplete with a function because the function won't be part of the timeline when I play the timeline in reverse. I would greatly appreciate help getting the following example to only move on to step 2 when mc1.x = 100 rather than when mc2.x = 100, without needing to use the offset parameter if possible, because the combination of so many offsets and differently timed tweens is becoming too difficult to follow in my code. //step 1 timeline.appendMultiple( [ TweenLite.to(mc1, 0.5, { x: 100 } ), TweenLite.to(mc2, 1, { x: 100 } ) ] ); //step 2 timeline.appendMultiple( [ TweenLite.to(mc1, 1, { x: 200 } ), TweenLite.to(mc2, 1, { x: 200 } ) ] ); Thanks, Matt

Hello community, I'm using TimelineLite, which is amazing, but I'm having issues with tweens that have no duration. I need to have objects change position instantly but when I attempt to do so the object will start at that position when the timeline starts rather than changing to that position when I want it to. So in this basic example, mc2 will start at 200 BEFORE tweening to 100, instead of changing position instantly to 200 AFTER tweening to 100, yet mc1 is working as intended only because the duration of the 2nd tween is higher than 0: mc1.x = mc2.x = 0; timeline.appendMultiple( [ TweenLite.to(mc1, 1, { x: 100 } ), TweenLite.to(mc2, 1, { x: 100 } ) ] ); timeline.appendMultiple( [ TweenLite.to(mc1, 1, { x: 200 } ), TweenLite.to(mc2, 0, { x: 200 } ) ] ); Any help on how to change this example code to work the way I intended it to would be very much appreciated! Thanks, Matt

Hi Guys, I stumbled upon this rare behaviour and I'm not sure if it's happening because what I'm trying to achieve or something else. I have a TimelineLite and at some point an addPause() instance in it. The timeline is not nested and doesn't have any other timeline in it, just common from and to instances, nothing fancy. I added a callback in the addPause() method. What I want to achieve is to call the function when the timeline is going forward and reaches the addPause(). Then execute some code (load some resources asynchronously) and when that's done resume the timeline going forward. Then when the timeline goes back, of course it'll be paused and the callback in the addPause() will be executed. Here's when things brake. I created a boolean so when the timeline goes forward and the boolean is false load the resources and change the boolean. Then when the timeline passes through the addPause() again ignore the rest of the code in the callback and just resume so it goes back to time zero. Instead it keeps calling the addPause() callback and returning to that point in the timeline endlessly. I also tried using a TweenLite instance to take the progress of the timeline back to zero but as soon as the tween is completed the timeline starts again, even if I changed the pause state of the timeline before creating the tween, which shouldn't have any effect whatsoever in the play/paused state of the timeline (uncomment lines 32-33 and comment-out line 31). The only way it works is by forcing the timeline to be paused using an onComplete callback in the tween that changes the progress of the timeline (remove inline block comment ), which IMHO it's a bit hacky and strange. Rodrigo.

Hi, I am getting a bit confused after looking at all the different restart of a tween examples... All I would like to do is store one tween (myTween) in a variable and later restart that tween. Here is my code: import com.greensock.TweenMax; import com.greensock.TimelineLite; import com.greensock.easing.*; var tl = new TimelineLite(); var myTween:TweenMax = new TweenMax(card, .5, {x:148, y:168, scaleX:1, scaleY:1, blurFilter:{blurX:0, blurY:0, remove:true}}); //runs the card unblur function .2 seconds into the previous tween tl.add([cardReg], "-=0.1") tl.to(txt1, 1, {alpha:1}, "+=1") .to(card, .4, {alpha:0, scaleX:3, scaleY:3}, "+=1") .restart(myTween); stop(); Please advise. Thanks!

Hi, My question may sounds a little bit stupid - Is there a way to iterate throgh each item's prop with staggerTo without using too many loops? What i want to implement is somethink like this: $boxes.each(function(i, box){ var $box = jQuery(box); var animation = new TimelineLite({ paused: true }); animation.staggerTo($box, 1, {left: $box.position().left, top: $box.position().top }); this.animation = animation; }); // OR even better: var animation = new TimelineLite({ paused: true }); animation.staggerTo($boxes, 1, {left: $box.position().left, top: $box.position().top }); Any help would be greatly appreciated

I'm wanting to be able to destroy a timeline (based on resizing). When i destroy the timeline, i want to remove all of it's initial set-up CSS. Here is how a timeline is set-up: var scene = new TimelineLite(); scene .add("start", 0); scene .from(panel, 20, { opacity: 0 }, "start") .from(panelText, 20, { y: "+=60px" }, "start") .from(background, 20, { scale: "1.15" }, "start") With this, the panel is set to Opacity 0 initially. I have timelines within timelines as each panel (17 of them) animate in various combinations. I don't want the timeline active on mobile so i can disable it, but is there a method like clearProps for removing all CSS generated by all the timelines? Or must this be done outside of GSAP? The codepen attached (i got from the closest post i could find relating to this issue) demonstrates it resetting to the start, but the elements still have their CSS properties.

I'm working...or trying to work with GSAP in Adobe Edge.. And want to learn TimelineLite, i viewed the quick tip, which look very clear. But when i want to make the simple one...it won't work...with "" without "" insert tweenMax...also tweenlineLite..., different kind of object...sad but true...no action Does anybody know, what i'm doing wrong? grt, marcel // insert code to be run when the composition is fully loaded here var myWheel = sym.$("RoundRect"); var rect = sym.$("rect"); var tl = new timelineLite(); tl.to(rect, {x:750}) .to(myWheel, {x:750});