Search the Community

Hello!. Here is an example - http://codepen.io/kickflip2009/pen/LNBXOQ When i click on the image, all blocks with class 'content" appear, but i want to animate specific block which is under the image. Sorry for my English.

Hi, I'm quite new to GSAP and I wonder what the easiest way to loop a timelineLite would be? I've managed to loop separate tweens inside the timeline but not the whole timeline. TIA!

When adding a tween with a negative offset, but with a duration that does not exceed the previous tween, things start to behave weird when restarting the timeline. I created a small codepen example to demonstrate this. It seems like the first tween does not get overwritten by the second tween but only after the first tween finished for the first time. [edit] using relative ("+=100") or absolute (100) values does not make any difference [edit2] using tl.reverse(); instead of tl.restart() breaks the animation entirely

Hi all, I read many posts about loop animation and I manage to make one to work, but I believe there is a better way to do it, so if you can have a look and this demo http://codepen.io/anon/pen/ojJEmx and let me know how to make it better it will be great. Kind regards, Fernando Fas

Hi all - this is my first post on GSAP, hope you guys can help me. Love GSAP by the way, it is awesome. I'm using Reveal EventListeners (https://github.com/hakimel/reveal.js#slide-states) to trigger timeline sequences. These sequences are a combination of staggerFrom and from, and I use DrawSVG with Yoyo sometimes too. I found this example that pretty much matches my setup: http://stackoverflow.com/questions/23936987/how-to-trigger-a-gsap-function-when-a-slide-comes-active-with-reveal-js Here is one of the sequences, they all follow the same structure: Reveal.addEventListener('slideName', function () { tl = new TimelineMax(); tl.staggerFrom("#aSlideElement", 9, { rotationY: 1080, scale: 15, y:"-1900px", x:"600px", ease: Power4.easeInOutQuint }, 0.7) .from("#anotherSlideElement", 9, { onUpdate: cssFilterTween, onUpdateParams: ["{self}", "blur", 100, 1], ease: Power4.easeInOutQuint }, 0) .from("#yetAnotherSlideElement", 10, { fill:"#0f0c31", ease: Power4.easeInOutQuint }, 5) .from("#soManySlideElements", 4, { autoAlpha: 0, ease: Power4.easeInOutQuint }, 10) }, false); Reveal is basically a presentation slides framework and each slide has its own sequence that is triggered using an eventlistener. My problem is these sequences do not completely reset the timeline and all the elements when you 'leave' a slide. This means if you go back and forth between slides, the elements are sometimes misplaced, finish in the wrong position or get muddled start/finish timings. Eventually they just slow to a halt and do nothing. I have to refresh the page to get it back to where things started. I've tried restart(), clear(), remove(), kill(), pause(0), etc. I've tried placing 'overwrite: 3' amongst each tween. I've tried placing a single global timeline above the eventlisteners, rather than create a new timeline for each slide. I think it may be something to do with the volatile triggering that occurs when quickly going back and forth between slides, but I assume GSAP should be pretty quick at resetting? Any help would be awesome, this is really puzzling me. Thanks, James

deleted

I'm drawing a large shape using an array of points in a for loop and tweenlite as found at http://www.flashperfection.com/tutorials/Animated-line-drawing-using-TweenLite-in-AS3-22013.html for(var i:uint = 0; i < pointsArray.length; i++){ TweenLite.to(dot2, .05, {x:pointsArray[i].x, y:pointsArray[i].y, delay:i*.05, overwrite:false, onUpdate:updateHandler}); } function updateHandler():void{ lineAnim.graphics.lineTo(dot2.x, dot2.y); lineAnim.graphics.moveTo(dot2.x, dot2.y); } I would like the animation to complete before continuing, but I'm unable to find a way to be notified when the full animation is complete. onComplete does not work as it triggers on the first set of coords. I also tried triggering when i == pointsArray.length but the loop finishes multiple seconds before the animation completes. I would like to avoid using a timer.

Hello, I'm trying to loop a video and the video loops, but not at the end of the video, it's cut at approx 50% of the video. The video is 4 seconds long and at the half it just jumps to the end and starts the loop again. Any idea in how to prevent that? I'm loading the video with this line: var lVideoPlayer:VideoLoader = new VideoLoader("assets/myVideo.flv", {name:myVideo.flv,container:videosParents[_videoNdx], autoPlay:false, requireWithRoot:this.root, deblocking:1, repeat:(_videoNdx==1?-1:1),onComplete:_onConnect }); I would need perfect seamless loop, but hopping that way is hard. At the same time, the video triggers 2 events, right now I'm tracking that events using VideoLoader.PLAY_PROGRESS but perhaps it would be more efficient using cues? Well, thank you in advance, Toni

What is the best way to handle child timelines that have a infinite duration? You can't just `TimelineMax.add` an infinite child timeline because they would block and cause the remaining events to never run in the root timeline. The best way I have found is `restart`'ing the infinite child timeline in an `onStart` or `onComplete` event. One problem I have run into with this method is, if you seek past when the child timeline gets initiated, then it will never run. When using `start`, `stop`, `seek` on the root/parent timeline, how do you `start`, `stop` the child timeline appropriately? Here is a basic example of an infinitely spinning ball that also translates around on the root timeline: http://codepen.io/anon/pen/vOpBEV let tl = new TimelineMax(); let ballNode = $('.ball'); // Set up the infinite rotating timeline let alwaysRotateTl = new TimelineMax({ repeat: -1, paused: true }); alwaysRotateTl .fromTo( ballNode, 2, { rotation: 0 }, { rotation: 360, ease: Linear.easeNone } ); // Now do some stuff on the main timeline tl .addLabel('red-label') .set( ballNode, { backgroundColor: '#ff0000' }, 0 ) .to( ballNode, 2, { x: 100, backgroundColor: '#00ff00', onComplete: function() { // Start the infinite rotate loop alwaysRotateTl.restart(); } }, 'green-label' ) .to( ballNode, 2, { y: 100, backgroundColor: '#00ffff' }, 'cyan-label' );

Hi, I am trying to repeat my timeline. The timeline plays perfect, but just one time. Please, can somebody please take a look at my code to see if there is any problems. import com.greensock.*; import com.greensock.easing.* mcText._alpha = 0; mcButton._alpha = 0; mcLegal._alpha = 0; mcPlaneicon._alpha = 0; mcPlaneicon2._alpha = 0; mcPlaneicon3._alpha = 0; mcPlaneicon4._alpha = 0; mcAmsterdamicon._alpha = 0; mcParisicon._alpha = 0; mcParis._alpha = 0; mcAmsterdam._alpha = 0; mcPriceamsterdam._alpha = 0; mcPriceparis._alpha = 0; var tl = new TimelineMax({repeat:2}); tl.add( TweenLite.to(mcAmsterdam, 0.3, {_alpha:90, delay:1, ease:Sine.easeOut, overwrite:false}) ); tl.add( TweenLite.to(mcAmsterdamicon, 0.3, {_alpha:90, delay:1.4, ease:Sine.easeOut, overwrite:false}) ); tl.add( TweenLite.to(mcPlaneicon2, 0.3, {_alpha:90, delay:1.8, ease:Sine.easeOut, overwrite:false}) ); tl.add( TweenLite.to(mcPriceamsterdam, 0.3, {_alpha:90, delay:2.2, ease:Sine.easeOut, overwrite:false}) ); tl.add( TweenLite.to(mcLegal, 0.5, {_alpha:100, delay:2.2, ease:Sine.easeOut, overwrite:false}) ); tl.add( TweenLite.to(mcAmsterdamicon, 0.3, {_alpha:0, delay:5, ease:Sine.easeOut, overwrite:false}) ); tl.add( TweenLite.to(mcAmsterdam, 0.3, {_alpha:0, delay:5, ease:Sine.easeOut, overwrite:false}) ); tl.add( TweenLite.to(mcPriceamsterdam, 0.3, {_alpha:0, delay:5, ease:Sine.easeOut, overwrite:false}) ); tl.add( TweenLite.to(mcPlaneicon2, 0.3, {_alpha:0, delay:5, ease:Sine.easeOut, overwrite:false}) ); tl.add( TweenLite.to(mcBg, 0.3, {_x:-1920, delay:5.2, ease:Sine.easeOut, overwrite:false}) ); tl.add( TweenLite.to(mcParis, 0.3, {_alpha:90, delay:5.8, ease:Sine.easeOut, overwrite:false}) ); tl.add( TweenLite.to(mcParisicon, 0.3, {_alpha:90, delay:6.2, ease:Sine.easeOut, overwrite:false}) ); tl.add( TweenLite.to(mcPlaneicon3, 0.3, {_alpha:90, delay:6.6, ease:Sine.easeOut, overwrite:false}) ); tl.add( TweenLite.to(mcPriceparis, 0.3, {_alpha:90, delay:7, ease:Sine.easeOut, overwrite:false}) ); tl.add( TweenLite.to(mcParisicon, 0.3, {_alpha:0, delay:10.2, ease:Sine.easeOut, overwrite:false}) ); tl.add( TweenLite.to(mcParis, 0.3, {_alpha:0, delay:10.2, ease:Sine.easeOut, overwrite:false}) ); tl.add( TweenLite.to(mcPriceparis, 0.3, {_alpha:0, delay:10.2, ease:Sine.easeOut, overwrite:false}) ); tl.add( TweenLite.to(mcPlaneicon3, 0.3, {_alpha:0, delay:10.2, ease:Sine.easeOut, overwrite:false}) ); tl.add( TweenLite.to(mcLegal, 0.5, {_alpha:0, delay:10.2, ease:Sine.easeOut, overwrite:false}) ); tl.add( TweenLite.to(mcText, 0.3, {_alpha:100, delay:10.7, ease:Sine.easeOut, overwrite:false}) ); tl.add( TweenLite.to(mcPlaneicon4, 0.3, {_alpha:90, delay:11.1, ease:Sine.easeOut, overwrite:false}) ); tl.add( TweenLite.to(mcButton, 0.3, {_alpha:90, delay:11.5, ease:Sine.easeOut, overwrite:false}) ); tl.add( TweenLite.to(mcButton, 0.3, {_xscale:110,_yscale:110, delay:13, ease:Sine.easeOut, overwrite:false}) ); tl.add( TweenLite.to(mcButton, 0.3, {_xscale:100,_yscale:100, delay:13.3, ease:Sine.easeIn, overwrite:false}) ); tl.add( TweenLite.to(mcButton, 0.3, {_xscale:110,_yscale:110, delay:14, ease:Sine.easeOut, overwrite:false}) ); tl.add( TweenLite.to(mcButton, 0.3, {_xscale:100,_yscale:100, delay:14.3, ease:Sine.easeIn, overwrite:false}) ); tl.add( TweenLite.to(mcButton, 0.3, {_xscale:110,_yscale:110, delay:15, ease:Sine.easeOut, overwrite:false}) ); tl.add( TweenLite.to(mcButton, 0.3, {_xscale:100,_yscale:100, delay:15.3, ease:Sine.easeIn, overwrite:false}) ); tl.add( TweenLite.to(mcBg, 0.3, {_x:0, delay:16, ease:Sine.easeOut, overwrite:false}) ); tl.add( TweenLite.to(mcText, 0.3, {_alpha:0, delay:16, ease:Sine.easeOut, overwrite:false}) ); tl.add( TweenLite.to(mcPlaneicon4, 0.3, {_alpha:0, delay:16, ease:Sine.easeOut, overwrite:false}) ); tl.add( TweenLite.to(mcButton, 0.3, {_alpha:0, delay:16, ease:Sine.easeOut, overwrite:false}) );

HI all, So, just started playing around with GSAP. Being more familiar with Google Web Designer, I'm very impressed with GSAP. Makes creating animation a whole lot easier. As a first, simple test I wanted to make a banner with 3 frames. This works fine, but I can't seem to find a way to seamless go from frame 3 to frame 1. As is is now, frame 3 slides out of view, showing a background image. What I would like it to do is frame 2 slides out, revealing frame 3; frame 3 slides out, revealing frame 1. Is this possible or am I just failing? (= The example can be seen here: http://codepen.io/jeffklunder/pen/ZGeQyM Thanks... Jeff

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 everyone, first of all, this is my first day using gsap and I am like a child ! Awesome plugin. Aaand I just Edit it because it was a really stupid question when you search a little more. I am very sorry. At least this is my first post in this forum.

Hi, I'm new to GSAP so my issue could (hopefully) be peanuts for you guys I want to loop a timeline and add 90 degrees to the variable rotation every time it runs. Can't get it to work, because TimelineMax keeps the original value of rotation. The variable does get updated though..

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

Hi there and thx for support. Before creating a new topic I found this one http://greensock.com/forums/topic/6567-video-stop-between-loop/ but it's not exactly the same problem. I'm loading 4 different flvs (short time each between 1 and 2 minutes) using a LoaderMax that have to repeat indefinitly (until the user stop it of course). After a time videos stop repeating one after the other. They are well rewinded to 1st frame but seem to not be played again. If I wait a very long time (2h repeating) the 4 videos seem to become blocked on 1st frame. I first tried to declare repeat property as -1 like this : m_loader1 = new VideoLoader("flv1.flv", {name:"subCol", container:m_interface.subtileScreen, repeat:-1, width:590, height:350, autoPlay:false, visible:true }); m_loader2 = new VideoLoader("flv2.flv", {name:"subJoie", container:m_interface.subtileScreen, repeat:-1, width:590, height:350, autoPlay:false, visible:true }); m_loader3 = new VideoLoader("flv3.flv", {name:"subSur", container:m_interface.subtileScreen, repeat:-1, width:590, height:350, autoPlay:false, visible:true }); m_loader4 = new VideoLoader("flv4.flv", {name:"subTrist", container:m_interface.subtileScreen, repeat:-1, width:590, height:350, autoPlay:false, visible:true }); m_loader = new LoaderMax({name:"subtile"}); m_loader.append(m_loader1); m_loader.append(m_loader2); m_loader.append(m_loader3); m_loader.append(m_loader4); m_loader.load(); I also tried to comment repeat:-1 and handle myself play and complete events for each video like this : m_loader1.addEventListener(VideoLoader.VIDEO_PLAY, onVideo1Play); m_loader1.addEventListener(VideoLoader.VIDEO_COMPLETE, onVideo1End); private function onVideo1Play(event : LoaderEvent) : void { trace("[log] onVideo1Play " + event.currentTarget.name + " video time " + event.currentTarget.videoTime); } private function onVideo1End(event : LoaderEvent) : void { trace("[log] onVideo1End " + event.currentTarget.name + " video time " + event.currentTarget.videoTime); m_loader1.gotoVideoTime(0, true); } And same behaviour, onVideo1End is called that rewind video to 0s, but video is not played even if forceplay = true. However onVideo1Play is called after onVideo1End. I think I have something wrong... Could you help me please ? Best, laugre

Hello and thanks for this great library. I have a little problem with the video repeat function of videoloader. I load multiple video and I had set repeat:-1. The video loops to infinity but between the loops I have a freeze time about 2 seconds. This is the code I use: Any Ideas? I had tried both with gsap 12 and Tweening platform 11. Thanks in advance for your time!

New to Gsap, I have been looking forever for way to loop to specific time or label. My example is not a slider, there will be animations between each background fade, I removed absolute position on .slide for the sake of testing. When the animation first loads it will fade in from nothing, but it can not do this when it loops around again it should start from lets say 5 seconds in. Not sure exactly how to go about doing this. Create two timelines, with the opening fade, then trigger the next timeline on complete then loop. In my days of flash there was a gotoAndPlay(frame); Please forgive my lack or understanding, am sure its something simple. Just like to know the best approach. Many thanks.

hello, I am very new at tweenmax. I made my wheel spin. But I would like my wheel to spin 360 degrees left and after, spin 360 degrees right. and have a yoyo effect where it goes left right left right. var ferris = document.getElementById("ferris-wheel"); TweenMax.to(ferris, 1, { rotation:360, ease:Linear.easeNone } ); TweenMax.to(ferris, 20, { rotation:-360, ease:Linear.easeNone } ); how do i do this?

Hi, i realise this is way too similar to this thread: http://forums.greensock.com/topic/4683-mp3loader-making-a-perfect-loop/ but since this is about a video, not an audio (and therefore, I don't have the "repeat" property), I thought I'd ask. My idea is to loop a video that I've loaded using VideoLoader, but I want it to be a seamless loop. My first (and obvious) approach was adding a listener for the VIDEO_COMPLETE event on the video, and then play the video again from 0: var video:VideoLoader= LoaderMax.getLoader([videoId]) as VideoLoader; video.addEventListener(VideoLoader.VIDEO_COMPLETE, onVideoComplete); protected function onVideoComplete(event:LoaderEvent):void { var video:VideoLoader= event.target as VideoLoader; video.gotoVideoTime(0); video.playVideo(); } but this doesn't make it seamless, it freezes on the last frame of the video for a second or two, and then starts again. My second approach was adding a listener for the PLAY_PROGRESS event, and when the video reaches a certain sufficient point, start it from 0: var video:VideoLoader= LoaderMax.getLoader([videoId]) as VideoLoader; video.addEventListener(VideoLoader.PLAY_PROGRESS, onVideoComplete); protected function onVideoComplete(event:LoaderEvent):void { var video:VideoLoader= event.target as VideoLoader; if(video.playProgress >= 0.95){ video.gotoVideoTime(0); video.playVideo(); } } this made it better, but the same problem stays, it freezes (now not on the last frame, but on one of the last ones) and then starts all over. Is there a way to have a smooth loop, or another approach to make it smoother than these two I've tried? Thanks!

Is there any way I can reduce the size of TweenLite's footprint within my Flash banner? On publish, Actionscript 2.0 Classes make up 20K of my 32K banner. I'm not doing anything crazy here, just fading in/out and moving up/down. I tried using TweenNano...file size was GREAT. But I couldn't figure out how to make my banner repeat only two times, since there is no "repeat" or "restart" features like there are in TweenLite. Am I importing something that I don't need? Here's my AS2.0 TweenLite Code: // import the tween engine import com.greensock.*; import com.greensock.easing.*; ////////////////////////////////////////////////////////////////////////// // define the timeline var timeline:TimelineLite = new TimelineLite({onComplete:repeat}); // define repeat function variables var nPlays = 0; var totPlays = 2; // repeat timeline if played less than three times function repeat() { if (nPlays < totPlays) { timeline.restart(); nPlays++; } } ////////////////////////////////////////////////////////////////////////// // get your tween on timeline.appendMultiple([ TweenLite.from(text1, 1, {_alpha:0, _y:"-20", ease:Expo.easeOut, delay:.5}), TweenLite.from(text1b, 1, {_alpha:0, _y:"40", ease:Expo.easeOut, delay:.5}), TweenLite.to(text1, 1, {_alpha:0, _y:"20", ease:Expo.easeOut, delay:2.5}), TweenLite.to(bg1, 1, {_alpha:0, ease:Expo.easeOut, delay:2.5}), TweenLite.from(text2, 1, {_alpha:0, _y:"-20", ease:Expo.easeOut, delay:3}), TweenLite.to(text2, 1, {_alpha:0, _y:"20", ease:Expo.easeOut, delay:5}), TweenLite.from(text3, 1, {_alpha:0, _y:"-20", ease:Expo.easeOut, delay:5.5}), TweenLite.to(text3, 1, {_alpha:0, _y:"20", ease:Expo.easeOut, delay:7.5}), TweenLite.from(text4, 1, {_alpha:0, _y:"-20", ease:Expo.easeOut, delay:7.5}), TweenLite.from(stall, 2, {_y:"10", delay:10})]); stop(); Here's my AS2.0 TweenNano code. File size is great, but I can't figure out how to make it repeat only twice. // import the tween engine import com.greensock.*; import com.greensock.easing.*; ////////////////////////////////////////////////////////////////////////// // define repeat function variables var nPlays = 0; var totPlays = 2; // repeat timeline if played less than three times function repeat() { if (nPlays < totPlays) { //initBanner.start(); initBanner(); nPlays++; } } ////////////////////////////////////////////////////////////////////////// function initBanner({onComplete:repeat}) { //the issue is with this line TweenNano.from(text1, 1, {_alpha:0, _y:"-20", ease:Expo.easeOut, delay:.5, overwrite:0}); TweenNano.from(text1b, 1, {_alpha:0, _y:"40", ease:Expo.easeOut, delay:.5, overwrite:0}); TweenNano.to(text1, 1, {_alpha:0, _y:"20", ease:Expo.easeOut, delay:2.5, overwrite:0}); TweenNano.to(bg1, 1, {_alpha:0, ease:Expo.easeOut, delay:2.5, overwrite:0}); TweenNano.from(text2, 1, {_alpha:0, _y:"-20", ease:Expo.easeOut, delay:3, overwrite:0}); TweenNano.to(text2, 1, {_alpha:0, _y:"20", ease:Expo.easeOut, delay:5, overwrite:0}); TweenNano.from(text3, 1, {_alpha:0, _y:"-20", ease:Expo.easeOut, delay:5.5, overwrite:0}); TweenNano.to(text3, 1, {_alpha:0, _y:"20", ease:Expo.easeOut, delay:7.5, overwrite:0}); TweenNano.from(text4, 1, {_alpha:0, _y:"-20", ease:Expo.easeOut, delay:7.5, overwrite:0}); TweenNano.from(stall, 2, {_y:"10", delay:10, overwrite:0}); } initBanner(); stop();

Hello GreenSock, first of all, thank you for this wonderful suite you've created! Second, my problem. I have a clip which has 37 frames and i need to loop it forward or backward for 3 times, starting everytime from a different frame, and ending the triple loop on the same frame where i started. I will post you a super-simplified version of my code in which i try to set the final frame for both the forward and the backward animations, making a check to avoid passing non-existent frame 0 or frame 38 to the plugin (i obviously imported the greensock classes and activated both the FrameForwardPlugin and the FrameBackwardPlugin): var nRound:int = 0; var totRounds:int = 2; var completeRoundFrames:int; var clipRound:TweenLite; var direction:String = "forward"; //can be "forward" or "backward" if(direction == "forward") { completeRoundFrames = (clip.currentFrame - 1) == 0 ? 37 : (clip.currentFrame - 1); clipRound = TweenLite.to(clip, 6, { frameForward:completeRoundFrames, ease:Linear.easeNone, onComplete:loopRound } ); } else if (direction == "backward") { completeRoundFrames = (clip.currentFrame + 1) == 38 ? 1 : (clip.currentFrame + 1); clipRound = TweenLite.to(clip, 6, { frameBackward:completeRoundFrames, ease:Linear.easeNone, onComplete:loopRound } ); } function loopRound():void { if (nRound < totRounds) { trace("ROUND N." + nRound + " COMPLETED"); clipRound.restart(); nRound++; } } In this way the loop is working, but when it reaches the end of the animation and starts the following one, there's a little glitch because every animation ends one frame before (in case of forward) or one frame after (in case of backward) the original frame of the clip. Also the final animation (third phase of the loop) stops on a different frame (+1 or -1) than the original one. I've tried passing as the frame parameter for both the forward and backward animations the clip.currentFrame, but in this case the animation won't even start! I might have explained the problem not so well, but i hope you can give me some advice! Thank you very much!

Hello, I am animating three divs according to three variables I request from a server: this.onload = function(){ var tldot = new TimelineMax({delay:0, repeat:-1}); tldot.add( TweenMax.to(".bgdot", <%= 1/windSpeed1 * 100 %>, {backgroundPosition:"100px center", ease:Linear.easeNone}) ); var tldash = new TimelineMax({delay:0, repeat:-1}); tldash.add( TweenMax.to(".bgwave", <%= 1/windSpeed2 * 100 %>, {backgroundPosition:"100px center", ease:Linear.easeNone}) ); var tlwave = new TimelineMax({delay:0, repeat:-1}); tlwave.add( TweenMax.to(".bgdash", <%= 1/windSpeed3 * 100 %>, {backgroundPosition:"100px center", ease:Linear.easeNone}) ); }; I am trying to make periodic server requests that will alter the speed of the animation according to the new values passed by the variables. I tried to do this manually by doing using tweenmax: window.setTimeout(function() { TweenMax.to(".bgdot", <%= windSpeed1 %>, {backgroundPosition:"-100px center", ease:Linear.easeNone, repeat:-1}); }, 5000); But since this affects an ongoing animation it makes a bump. Is there any way I can alter the speed and keep the flow of the loop? If so, how do I add it to the current TimelineMax I created? Thanks, João

Hello, I have an element whose opacity is being changed based on scroll position. No problem there. When the element is in the scroll range, I want it to loop an animation only while within the scroll position range. The looping the animation part is what I'm having trouble with. I tried calling a function, using onComplete, etc. Here is the timeline: var tlwhoweareGreen = new TimelineMax({paused:true}); tlwhoweareGreen.append( TweenLite.to($("div#whoweare-green"), 1, {css:{opacity:1, autoAlpha:1}}) ); /*I've been trying to append the timeline or call a function here. Once the opacity has been set to 1, I want it to loop back to zero and back to one, infinitely until the the user has scrolled outside the range*/ Here is the scroll function: $(window).scroll(function() { var getVert = $(this).scrollTop(); console.log(getVert); var getHor = $(this).scrollLeft(); function scrollTween(startPoint, endPoint, tweenName, type) { var progressNumber; if(type == 'vertical') { progressNumber = (1 / (endPoint - startPoint)) * (getVert - startPoint); } else if (type == 'horizontal') { progressNumber = (1 / (endPoint - startPoint)) * (getHor - startPoint); } if (progressNumber >= 0 && progressNumber <= 1) { tweenName.progress(progressNumber); } else if(progressNumber < 0) { tweenName.progress(0); } else if(progressNumber > 1) { tweenName.progress(1); } } scrollTween(400, 800, tlwhoweareGreen, 'vertical'); $("div#whoweare-green").css("display", "block"); }); }); </script>

I have a function that loops and appends an elements to a div. How can i reference this newly added element and tween it? clickableGrid: function( ){ for (var i = 0; i < 30; i ++) { var box = createItem(); $("#tilesview").append(box); //How can i reference this newly added element and tween it? TweenLite.to($(box), duration, {css : {top:90,left: 100},}); ? } } createItem: function () { var tileItem = "<div class='tileItem'><div class='tileImage'></div><div class='tileTitle'>test</div></div>" return tileItem }, I have been adding them to the stage and then using boxes.each( function (i){ box = $(this); } to target each added item. but i bet there is a better way. only one iteration. thanks cp