Search the Community

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

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'd like to know if anyone has already used TweenLite or TimelineLite server-side with Node.js. If not, is there a way to do so ? A GSAP NPM module would be something great. Thx

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!

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

Is it possible to have two timelines referencing the same tween instances? I would like to reset each timeline back to duration 0 (and paused)], then play the appropriate timeline. It seems as though the first timeline to get played 'owns' the reference to the tween and the other timeline will simply not play what they have common. var tw1 = TweenLite.fromTo(dom('#challengerA'), 0.4, {css: {autoAlpha: 0, marginLeft: '-500px'}}, {css: {autoAlpha: 1, marginLeft: '-50px'}}); var tw2 = TweenLite.fromTo(dom('#challengerB'), 0.4, {css: {autoAlpha: 0, right: '-400px'}}, {css: {autoAlpha: 1, right: '-50px'}}); var tw3 = TweenLite.fromTo(dom('#chall_mascotA'), 0.4, {css: {autoAlpha: 0, marginLeft: '-50px'}}, {css: {autoAlpha: 1, marginLeft: '0px'}}); var tw4 = TweenLite.fromTo(dom('#chall_mascotB'), 0.4, {css: {autoAlpha: 0, marginRight: '-50px'}}, {css: {autoAlpha: 1, marginRight: '0px'}}); var tw5 = TweenLite.fromTo(dom('#chall_schoolA'), 0.4, {css: {autoAlpha: 0, marginLeft: '-50px'}}, {css: {autoAlpha: 1, marginLeft: '0px'}}); var tw6 = TweenLite.fromTo(dom('#chall_schoolB'), 0.4, {css: {autoAlpha: 0, marginRight: '-50px'}}, {css: {autoAlpha: 1, marginRight: '0px'}}); var tw7 = TweenLite.fromTo([dom('#chall_percentageCellA'),dom('#chall_percentageCellB')], 0.3, {autoAlpha: 0}, {autoAlpha: 1}); _view_tl_0.add(tw1, 0); _view_tl_0.add(tw2, 0); _view_tl_0.add(tw3, .2); _view_tl_0.add(tw4, .2); _view_tl_0.add(tw5, .3); _view_tl_0.add(tw6, .3); _view_tl_0.add(tw7, .4); _view_tl_0.add(winnerBanner,.6); // _view_tl_0.add(tw8, .4); _view_tl_1.add(tw1, 0); _view_tl_1.add(tw2, 0); _view_tl_1.add(tw3, .2); _view_tl_1.add(tw4, .2); _view_tl_0.pause(0);_view_tl_1.pause(0);_view_tl_2.pause(0); switch (_viewStatus){ case 1: // alert('1111'+_viewStatus); _view_tl_1.play(0); break; case 2: // alert('2222'+_viewStatus); _view_tl_2.play(0); break; case 0: // alert('0000'+_viewStatus); _view_tl_0.play(0); break; default: // alert('default'+_viewStatus); _view_tl_0.play(0); }

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 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});

Greetings everyone! Thank you for taking the time to read my question. I am using TweenLite and TimelineLite to create an animation timeline that simulates a user navigating a set of "sections". When the user clicks a button, I create a tween that animates a percent value over the course of 0.3 seconds. On "update" of this tween, the "progress" of my timeline is set using TimelineLite.progress(x). My issue is that if one of the sections is tweened for another reason to a different position on screen, when the timeline is progressed, the section immediately snaps back to where the timeline wants it, based on the original creation. What I would like is that the position of the section would tween from it's new, updated position, to the endpoint defined in the timeline. Is this possible? Here is some pseudo-code that should help illustrate my question. var percentObj = { current: 0 }; var myTimeline = new TimelineLite(); // ---------- // Set starting positions myTimeline.add( TweenLite.set($('#section1'), { 'css': { 'y': 0 } }), TweenLite.set($('#section2'), { 'css': { 'y': 1000 } }), TweenLite.set($('#section3'), { 'css': { 'y': 1000 } }) ); // ---------- // Now that starting values are set, // pause the timeline myTimeline.pause(); // ---------- // Create future animations that // will be triggered by the user // Animate to section2 myTimeline.add( TweenLite.to($('#section2', 1, { 'css': { 'y': 0 }, 'ease': 'Power1.easeInOut' }) ); // Animate to section3 myTimeline.add( TweenLite.to($('#section3', 1, { 'css': { 'y': 0 }, 'ease': 'Power1.easeInOut' }) ); // ==================== function buttonClick() { TweenLite.to(percentObj, 0.3, { 'current': 0.5, 'onUpdate': updateProgress } } function updateProgress() { myTimeline.progress(percentObj.current); }

Hi! I have a timeline animation which I would like to reverse, without reversing the last two tweens. In my jsfiddle example http://jsfiddle.net/identitoe/oLpvfqm4/2/ I would like to keep the last two tweens, the margin-top and the background-color and start reversing from the point I added the label. I just don' get it to work. Thank you

Sorry for not making a codepen, but my question is so pathetically simple I think it's unnecessary. The following works. (Obviously, it's just supposed to flash the two classes on and off in alternation.) But it doesn't work without the first (or last) two lines of code. Why not? I see redundancy here, and would like to refactor this properly. var foiled_crook = new TimelineMax({repeat:-1}); foiled_crook .set($('.crook'), {autoAlpha:"1"}) .set($('.crook-blocked'), {autoAlpha:"0"}) .add("foiled", "+=2") .set($('.crook'), {autoAlpha:"0"}, "foiled") .set($('.crook-blocked'), {autoAlpha:"1"}, "foiled") .add("trying", "+=2") .set($('.crook'), {autoAlpha:"1"}, "trying") .set($('.crook-blocked'), {autoAlpha:"0"}, "trying") ; Thanks, eh.

Hi, I am having a 101 issue I think, but am following the instructions as best as possible. Ultimately I am trying to create an Adobe Edge animation that completes after a mouse click (using multiple tweens in a TimelineLite function) and then links to a URL. The attached code is a simple test I created after my brain nearly burst trying to create the capability in the full animation. I also replaced the Window.Open with an Alert function for simplicity. All to no avail. The script is attached to the click event of an Adobe Edge animate element (it's a rectangle for completeness), the first alert works, the tween animates and then nothing... The browser console reports '"Javascript error in event handler! Event Type = element"'. Am I missing something in the .call parameters? All help much apreciated. Thanks! function GRsFunction( param1 ) { alert('from GRsFunction - ' + param1); } GRsFunction('This is the first call'); var tl = new TimelineLite(); //append a to() tween tl.to(sym.$("Rectangle"), 1, {left:450, top:95, scale:0.6, ease:Power2.easeInOut}); //then load up our call t1.call(GRsFunction, ["It's from TimelineLite"]); t1.play();

Normally, adding a tween without a position parameter will add it after ALL the tweens. Is there an easy way to add a tween right after the last tween? This without manually using variables, manually sorting the .to calls and without creating sub-timelines (ideally) In the example, tl.addLabel("after-bluebox"); adds the label BEFORE the tween, if not present. I think that there could be a way to add it AFTER the tween, perhaps tl.addLabel("after-bluebox", "", true); where true means "after the last tween you added"

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