Search the Community

Showing results for tags 'pause'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 / JS
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager


There are no results to display.

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL







Found 45 results

  1. Hi all, I'm very new to both javascript/jQuery and GSAP. I'm trying to make a timeline slider and want to use the .addPause feature to make the slider stop at certain points along the way. This works until the user interacts with the slider manually. After that, the .addPause functions are seemingly ignored and the timeline just goes along without pausing. How do I always ensure the .addPause function is respected upon pressing the play button? And if there are any optimizations you see that are obvious, please feel free to let me know! jsfiddle
  2. Hello GSAP community, I dug through the forums and tried to find if someone has already had this problem but I wasn't able to find the solution, so I thought I'd ask the community. I'm currently trying to figure out how to pause an element's animation at around 10 seconds into the the animation. I've tried using pause(), kill(), and have added a new function trying to pause the timeline, but I have had no luck. The scene in question is `scene4` in the codepen. Any ideas? Thank you very much for your time, it's greatly appreciated!
  3. christopherduffy

    Problem Pausing and Killing Specific Tweens

    Hi, this is my first forum post and I'm hoping to get some help with an issue and learn more about GSAP. The project I'm working on is replicating a video game character select screen where the user can navigate through 3 characters (using the left and right arrow keys) which have idle animations until selected where an active animation will play on the selected character. I am doing this by using sprite sheets and SteppedEase in TweenMax. I have the navigation and idle and active animations on document ready working. The problem I am having is when switching to the next character. The way I believe it should work (with limited knowledge of GSAP) is to kill the idle animation on the element that's to be selected and return its progress to 0 before adding a new active tween to the element. The main issue at the moment is I cannot seem to kill the animation of the specified object. I have tried using TweenMax.killTweensOf() but this does not reset the progress and when the active tween is added it starts on the frame from which the idle animation was killed. I have recreated a demo with basic sprite sheets (note: there may be an initial delay in loading the sprite sheets in CodePen because I am using Dropbox as a makeshift CDN) and labeled the code I am having issues with with the comment "start here". There are two areas with this comment, one for killing the active tween and one for killing the idle tween. What I am asking for specifically is help in killing and pausing (pause(0)) the tweens in question. The way you will know if this works is if you wait until the sprite sheet in the boxes are at a stage past "1" in their images and then navigation to another box, the sprite sheet of the box you navigated away from should return to the first stage which should display the number "1" and stop the tween, the box you navigate to should also return to the first stage and stop the tween, the 3rd box should continue its tween. I hope this doesn't read like an essay but I wanted to try and give as much detail as possible on what I need help with and what I've tried so far. Again any help / guidance will be appreciated as I've been banging my head against my keyboard for the past few days. Thanks
  4. karpec

    Timeline - call/pause/resume

    Hello everyone at GSAP forum. I appreciate any help with my problem I've been solving some time. There are few things I can't understand. This is my problem: Because I need to use some Tweens or Timelines repeatedly I decided to create functions with these Tweens/Timelines. These functions are appended to Timeline by .call() or .add() (both doesn't works) like this: var myTimeline = new TimelineMax() .add(down) .call(up) .add("box3", 1, {autoAlpha:0.2, scale:0.8, ease: Back.easeOut} )) ---------- function down() { var downTween = new TimelineMax() .add("#box1", 2, {scale:1, rotation:"-=30", ease: Back.easeOut} )) .add("#box2", 2, {y:"+=40", autoAlpha:1, scale:1, ease: Linear.easeOut} )) } ----------- No function in myTimeline waits for previous to complete - everything plays together - I'm not used to this behavior. I don't wanna use labels or something like that - I need them to chain (first one ends - second starts) as usualy when I add only tweens into timeline. Well, I tried to resolve my problem by some tricks but meet even more problems 1) I tried to use .pause() and then .resume() or .play() in my functions function down() { myTimeline.pause(); var downTween = new TimelineMax() .add("#box1", 2, {scale:1, rotation:"-=30", ease: Back.easeOut} )) .add("#box2", 2, {y:"+=40", autoAlpha:1, scale:1, ease: Linear.easeOut} )) } myTimeline.resume(); 2) I tried to use onComplete function down() { myTimeline.pause(); var downTween = new TimelineMax(onComplete:myTimeline.resume()) .add("#box1", 2, {scale:1, rotation:"-=30", ease: Back.easeOut} )) .add("#box2", 2, {y:"+=40", autoAlpha:1, scale:1, ease: Linear.easeOut} )) } I don't know why nothing works. What do I do wrong? Can anybody give my some explanation, please? Thanks a lot in advance. Peter
  5. tomasdev

    reversed(true) behavior auto-playing?

    This is not in the documentation. Either it's a bug or the docs need to be updated to be clearer. When using `timeline.reversed(true)` if the timeline state is paused/finished it will resume it and reverse it. While reading the docs I expected that code to behave as `timeline.reverse().pause()` rather than `timeline.reverse(0)` See the demo Codepen to see what I'm talking about. Click on Reverse once the animation finished.
  6. Hi All Having a bit of a problem with staggered animations. I want to stagger a list so that it fades in and moves up, pauses for 1s, then fades out and moves up even more, effectively: Fades in from y:100 Pauses for 1s Fades out to y:-100 I tried with a staggerFromTo but it just whizzes past and everything is performed in 1 go, putting a delay only delayed the start of the animation, not put a pause in the middle. I tried with a timeline, which works, but only for 1 item, when multiple items are used, they stack on top of each other in a mess. Any help appreciated
  7. hallibus

    Pausing timeline when complete

    Hey guys, I want to pause the timeline when it's completed. tl = new TimelineMax({repeat: -1, paused: true}); tl .to(dummy, 0.5, {x: '+=60', ease:Power3.easeOut}, 0.5) .addPause() .to(dummy, 0.5, {x: '-=60', ease:Power3.easeOut}, 1.5) .addPause(); The first addPause() works, the one at the end doesn't effect the timeline at all. The timeline is paused on load, a click on a button starts it. It pauses on the first addPause, a buttons starts it again but it doesn't pause on the last addPause. I hope it's somehow clear what I'm trying to achieve I'm thankful for any help.
  8. Hey there, if I want a pause of 2 seconds between Tweens in a Timeline, I got used to write{}, 2, {}); But it feels just not right and I wonder if there is something like tl.wait(2). First I thought "addPause" is what I need, but I believe it wasn't. This must be an everyday issue I assume, so I think I am just dumb and or blind. Thanks for some input.
  9. It seems like you could replace all of your setTimeout and setIntervals in your code using something simple like: var foo=0;, 1, { onComplete:function(){ // do something } }); Of course you could use repeat:-1 and onRepeat to make this a setInterval, too. Note that I Tween a generic variable as opposed to a DOM element to avoid the cost of accessing the DOM. Now this comes with several benefits such as the ability to pause, resume, or even killing all timers with a one-line command (which is very useful for me). I made a DOM-based webgame that is entirely timer and event driven, meaning that it was designed without using any game loop at all. Upon discovering the ability to use something like TweenMax.pauseAll(), I realized it would actually be possible to pause all animations, and even timers, if I changed my setTimeouts to TweenMax timers instead. Implementing a pause feature in my game would be a pretty big deal. So is this a good idea? I also noticed that chained setTimeouts tend to lose their timing while TweenMax does not. For example I have button timers that indicate the number of seconds remaining until a skill button is ready to be used, and it updates the seconds remaining every second. In reality the setTimeout is actually running a little bit late depending on how busy the processor has been, but if I use TweenMax timers, it will always be very precise and every second is almost exactly one second of delay (notably, setInterval does not appear to suffer from this timing problem). I particularly noticed this when I developed analog clocks for my website at work and I noticed that all four clocks kept absolute perfect timing no matter how much was going on or how long the webpage was running. Very cool. Any thoughts or feedback on this? I have over 1000+ setTimeouts/setIntervals throughout 70,000+ lines of code so this would be a drastic re-work.
  10. lynette

    pause onclick

    Hi, Is there a way to add an pause onclick? Here is my code: var $container = $("#container"), $content = $("#content"), $bg = ("#bg"), $panel1 = ("#panel1"), $panel2 = ("#panel2"), $panel3 = ("#panel3"), $line1 = ("#line-1"), $line2 = ("#line-2"), $line3 = ("#line-3"), $line4 = ("#line-4"), $btn = ("#btn"), $exit = ("#exit"), tl; var tl = new TimelineMax({repeat:2}) tl.from($line1, 1, {opacity:0},"+=2.25") .to($line1, 0.5, {opacity:0}) .from($line2, 2, {opacity:0}) .to($line2, 0.85, {opacity:0}) .from($line3, 2, {opacity:0}, "go") .from($line4, 2, {opacity:0}, "go") .from($btn, 2, {opacity:0}, "go")
  11. NamelessGhoul

    Catch pause moment

    Hello! I'm trying to catch library's internal pause event and I'm not sure I'm looking in the right place. In my code I have this loop: for (var i = 0; i < this._gaps.length; i++) { this.addPause(this._gaps[i], function() { console.log('%cpaused', 'color:red;font-weight:bold;'); Utils.afterRepaint(function() { if (_self.paused()) { _self.resume(); console.log('%cpaused off', 'color:red;font-weight:bold;'); } }); }); } And I'v also put console.log() in library: (starting at line 1609) if (pauseTween) { console.log('gsap pause'); console.log(pauseTween); this._time = time = pauseTween._startTime; this._totalTime = time + (this._cycle * (this._totalDuration + this._repeatDelay)); } There is delay between those logs, that's why I think that it's not the right place where to check it. Could you point me in the right direction?
  12. Sandschieber

    pausing before split text

    Hi there, I like to animate 3 things step by step: 1. an div animation 2. One Second later: H1 Splittext Animation 3. Two Seconds later: H2 Splittext Animation I dont know how to put a pause before the splittext animation. I have tried it with an marker before the splittext loop, but that does not work. I would be pleased for any help Here is my modified codepen:
  13. Hi, this is probably super obvious, but I was wondering how I might set up a next & previous button, so that when clicked, it would play a next or previous step in a timeline sequence? What I want to do is basically an animated slideshow/presentation. The first frame/scene (which has it's own timeline) would animate, and when it's over it would pause until someone clicks the "next" button. If the "previous" button is clicked, I'd like it to replay the previous scene. What I'm stuck on is getting the master timeline to pause between scenes, as well as getting it to replay just the previous scene (and not reverse the entire master timeline). It seems simple but I'm a little stuck. I put together a simple example on codepen to illustrate what I'm trying to do: Any insight is much appreciated.
  14. Hello everyone, I am currently creating a page that uses the GreenSock animation library to trigger animations as a user scrolls down the page. The interesting kink in this is that I need to swap out timelines I have created for the sake of responsive design (ie the animation graphics change to less complex ones when the page gets smaller.) This is a simplified test case from my actual page, but gets the same point across. The primary issue I am having is with using .pause() and instantiation of a new TimelineMax() that uses the same elements. For example, if I create a timeline with a Tween, and then pause it: var t1 = new TimelineMax(); t1.add(TweenMax.from($('#element1'), 1, { scale: '0.2', autoAlpha: 0, transformOrigin: 'center center', ease: Back.easeOut }), 0); t1.pause(0); // reset to beginning and hold, don't play yet. I can then play the animation back later on using .play() or .restart() and it works fine. However, let's say I never actually play the animation, and then kill this timeline, and attempt to create a new one that attaches to #element1: // so, instead of t1, we want to run t2 instead, so kill t1 t1.kill(); // create t2 instead var t2 = new TimelineMax(); t2.add( TweenMax.from($('#element4'), 2, { x: '-5px', ease: Power2.easeOut }), 0) .add( TweenMax.from($('#element3'), 2, { x: '-10px', ease: Power2.easeOut }), 0) .add( TweenMax.from($('#element2'), 2, { x: '-20px', ease: Power2.easeOut }), 0) .add( // Note element1 is reused here TweenMax.from($('#element1'), 1, { x: '-5px', y: '20px', scale: '0.2', autoAlpha: 0, transformOrigin: 'left bottom', ease: Back.easeOut }), 0.5)) // attempt to run t2; In this case, t2 will never run the animation/TweenMax on #element1 if t1 never left the paused state. However, if t1 was ever actually played with before the t1.kill(), t2 will work successfully. I'm not sure how this works internally with GreenSock or if there is a better way I should be changing out animation timelines on the same objects. This only seems reproducible if .pause() is called, and .restart() / .play() is never called on the timeline originally containing (in this case) #element1. Does anyone have a workaround or a better method for me? I've been banging my head on this for hours and have come to the conclusion it's either post here or start digging into GreenSock source.
  15. Hi everyone, my situation is this: I have two timelines, one for the loading initial animation and another one for the coreography when the page is loaded. The animation of the loader (a spinner) is made more or less the same as the codepen linked but in this way, as you can see, the rotation doesn't stop properly. (In simple words i want to pause the rotation animation WHEN the page is loaded, but I doesn't want to stop that if it's still moving) tlTimeline .to(test, 1, {rotation: "+=90", repeat: -1, repeatDelay: 1, onRepeat: loaded}); function loaded(){ tlTimeline.pause();; //this one is not included in the codepen } I need to find another way to stop the repeat animation at the end of the repeat animation because in this way it makes a little step forwards.
  16. friendlygiraffe

    Inserting a pause/delay/wait into Timeline

    I've been digging around looking for the best way of inserting a pause or 'wait' into timeline. I found this thread here, (and I am also an experienced AS3 dev making the transition to Javascript) but it didn't work for me What's the best way of achieving this? var tl = new TimelineMax({delay:0.5, repeat:3, repeatDelay:2}); tl.add( TweenMax.staggerFrom(['#text1_dc','#main_img_dc','#sky_logo_dc'], 1, {autoAlpha:0}, 0.2) ); tl.add( "PAUSE OF 2 SECONDS WOULD GO HERE" ); tl.add( TweenMax.from('#img_skybox_dc', 0.5, {autoAlpha:0}) );
  17. danissimo

    Pause nested Timeline

    I'm trying to pause nested timeline: (buttonsHomeOff) .to ([_rootRef.overlay, _rootRef.bottomPlate], 0.5, {autoAlpha:1, ease:Linear.easeNone, onComplete:function():void {backdropLoader.pauseVideo(); _rootRef.backdrop.visible = false;}}) .staggerFromTo ([_rootRef.buttonHome, _rootRef.buttonBack, _rootRef.buttonForward], 0.5, {y:"+=20"}, {y:"-=20", autoAlpha:1, ease:Cubic.easeOut, onComplete:buttonsPrezOn}, 0.1) .add (RAOTimeline); RAOTimeline.addLabel ("slide_01") .staggerFrom ([_rootRef.prezRAO.item_01, _rootRef.prezRAO.item_02, _rootRef.prezRAO.item_03], 0.5, {y:"+=20", alpha:0, ease:Cubic.easeOut, onComplete:buttonsPrezOn}, 0.1) .addLabel ("slide_02") .addPause ("slide_02") .to ([_rootRef.prezRAO.item_01, _rootRef.prezRAO.item_02, _rootRef.prezRAO.item_03], 0.5, {alpha:0, ease:Linear.easeNone}) .to (_rootRef.logoSmall, 0.5, {y:"-=20", autoAlpha:1, ease:Cubic.easeOut}) .staggerFrom ([_rootRef.prezRAO.item_04, _rootRef.prezRAO.item_05, _rootRef.prezRAO.item_06, _rootRef.prezRAO.item_07, _rootRef.prezRAO.item_08], 0.5, {y:"+=20", alpha:0, ease:Cubic.easeOut, onComplete:buttonsPrezOn}, 0.1, "-=0.4") But when I again play child timeline after the pause (.play()), the playhead is already at the end of the child timeline (all objects are already animated to the end values). Looks like the values calculations don't stop at the pause position. Is it a bug or did I miss anything?
  18. Greetings, I've encountered a strange issue where tweening a class name in a timeline causes issues when you reset that timeline via pause(0). The codepen has more info, please check it out: Please let me know if my syntax is incorrect, or perhaps if changing classes using both Greensock and jQuery might be causing the problem. Thank you! -Gwen
  19. Hi there, I am trying to animate a car moving along a road and need the wheels rotation and the chassis bouncing to stop as the road runs out. It's not looking too bad except that i can't get the chassis and tyre vars to finish after the rest of the timeline finishes. The code below simply pauses everything from the start. Sorry if the answer is obvious... <script type="text/javascript"> var chassis = new ("#chassis", .1, {top:1, yoyo:true, repeat:-1}) var tyre = new ("#tyre", .5, {rotation:360, transformOrigin:"50% 50%", repeat:-1, ease:Linear.easeNone}) var tl = new TimelineMax(); tl .from("#suv", 8, {left:20, ease:Elastic.easeInOut}, "start") .from("#shop", 6, {left:1456}, "start") .to("#road", 6, {left:-1456}, "start") chassis.pause(); tyre.pause(); </script> Thanks in advance, Phil
  20. Hi there! So the issue that I'm running into is that I am trying to pause all of the tweens that are .isActive(). This works for all tweens that are actively tweening, but not those that have a delay on them. They will then play while everything else if paused. So what I'm looking for is a way to get .isActive() that includes delayed tweens. Any help? Some background: Originally, I was using .pauseAll(true, true), and .resumeAll(true, true). And that worked as expected, except I couldn't continue using that method because I can't resume all tweens because some will need to be resumed, and some will still need to remain paused. So now I'm using getAllTweens(), and then storing off only the active ones using .isActive() and then using .pause() and .resume() on only those that are stored off. Is there a way for .pause() to behave more like .pauseAll() or is there some other way that would work? Thanks! This is using TweenMax and as2. I'm not using TimelineMax, nor can I for this project.
  21. m4g1c14n

    Can not pause a tweenFromTo

    I can not pause an animation that is executed by tweenFromTo Please help
  22. lbweb

    WebBanner Pause at 30sec

    I'm trying to build a web banner using TweenNano but one of the requirements is that the ad has to stop animating after 30secs. I've been trying to implement the code, but I keep getting errors and I'm not a seasoned enough flash developer to know what the deal is: import com.greensock.*; import com.greensock.easing.*; import; import; var animateTxt = function begin():void {, 1.5, {alpha:1, delay: 0, ease:Quad.easeInOut});, 1.5, {alpha:0, delay:3, ease:Quad.easeInOut});, 1.5, {alpha:1, delay:4.5, ease:Quad.easeInOut});, 1.5, {alpha:0, delay:7.5, ease:Quad.easeInOut, onComplete:begin}); } animateTxt(); var timer:Timer = new Timer(30000, 1); timer.addEventListener( TimerEvent.TIMER, function(evt:TimerEvent):void { trace('timer launched'); animateTxt.pause(); } ); startBtn.addEventListener(MouseEvent.CLICK, onStart); function onStart(e:MouseEvent):void {; } timer.start(); stop(); Any help would be GREATLY appreciated
  23. kilmc

    Pausing nest timelines

    I'm having a bit of trouble getting a set of chained timelines to pause as they complete. I want to have timelines to control a couple of objects on screen and then pause until the user hits the forward button to advance but I can't seem to get the pause to kick in. It just keeps running through both timelines. I'm guessing I'm using the wrong approach. Would love some help on this. $('.trigger-forward').click(function() {; }); $('.trigger-backward').click(function() { scene.reverse(); }); var moment_1 = new TimelineMax({pause:true}); var moment_2 = new TimelineMax({pause:true});"#scene_earth_move .earth", 2, {scale: 1.4}, 0) .to("#scene_earth_move h1", 1, {top: "40%"}, 0);"#scene_earth_move .earth", 2, {scale: 2}, 0) .to("#scene_earth_move h1", 1, {top: "80%"}, 0); var scene = new TimelineMax({paused:true}); scene.add(moment_1) .addPause() .add(moment_2); Thank you
  24. luxury

    AS2 TweenMax Pause/Resume

    Hi all, I've searched and searched to no avail for help with my problem. I need to be able to pause some animations while others continue to play. And then resume them again when needed. And this needs to be done with TweenMax (I cannot use TimelineMax). And AS2. Ideally, there would be an easy way to create a function that I pass the movieclip location & whether or not it should be paused. Something sort of like this? public function pauseMC (MC:MovieClip, State:Boolean):Void{ if (State){ MC.pause (); }else{ MC.resume (); } } Thanks for any help! -Zach
  25. Hi I'm building an infinite horizontal image slider that slides when the user hovers over a 'next' or 'previous' buttons. The design requires the animation to gradually pause/resume with a subtle easing and not pause immediately. the only solution I found was to use an infinitely repeating tween for the slider, and attach a second tween to the buttons that tweens the 'timeScale' of the original tween with an easing. Is there a simpler native way to do so without creating a second tween? Thanks