Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Search the Community

Showing results for tags 'loop'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge


There are no results to display.

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Personal Website



Company Website



  1. jeffklunder

    Seamless loop

    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
  2. 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();
  3. 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.
  4. 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..
  5. 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
  6. 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
  7. 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!
  8. 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.
  9. 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?
  10. 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!
  11. 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();
  12. 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!
  13. 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
  14. 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>
  15. 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