Jump to content
GreenSock

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

Search the Community

Showing results for tags 'pause'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

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

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Personal Website


Twitter


CodePen


Company Website


Location


Interests

  1. //this right here is a code inside a function which gets called multiple times and responsible to animate multiple objects from its initial position to targeted position(object and position changes after every iteration). //Also a progress bar is implemented which is responsible to show the progress of the animation. this.tween = new TimelineMax({ onUpdate: showProgress.bind(this)}); this.tween.to(from, { duration: 10, x: to.x, y: to.y, z: to.z ,});
  2. Hi I'm very new to gsap and I was trying to make a hover animation for my buttons. But I would like the button to return to his start position. I tried to use clearProps, but that doesn't seem to do the trick. Hope someone can help!
  3. What best way to make complexe text callBack (story) inside a time line ? currently this not work fine ! plz see : function txt0() { line:6 https://codepen.io/djmisterjon/pen/BaarKLL if you look console, it should show 0,1,2 ! but it seem buggy here. Are you able to show some versions on how to use that kind of stuff correctly ? I need a clean way because it a very complex system events managers.
  4. Note: This page was created for GSAP version 2. We have since released GSAP 3 with many improvements. While it is backward compatible with most GSAP 2 features, some parts may need to be updated to work properly. Please see the GSAP 3 release notes for details. Learn how to make a simple play / pause toggle button to control any GSAP animation (tweens or timelines). Same concepts apply to toggling the reversed() state of an animation too. Watch the video Explore the demo See the Pen Toggle Play Pause by GreenSock (@GreenSock) on CodePen. Core code tl.pause()
  5. 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
  6. 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!
  7. 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 nex
  8. 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(TweenMax.to("box3", 1, {autoAlpha:0.2, scale:0.8, ease: Back.easeOut} )) ---------- function down() {
  9. 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.
  10. 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
  11. 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
  12. Hey there, if I want a pause of 2 seconds between Tweens in a Timeline, I got used to write tl.to({}, 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.
  13. It seems like you could replace all of your setTimeout and setIntervals in your code using something simple like: var foo=0; TweenMax.to(foo, 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
  14. 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")
  15. 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 (pau
  16. 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: http://codepen.io/opendoors/pen/VKPPmB
  17. 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 pr
  18. 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 Twe
  19. 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()
  20. 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}) );
  21. I'm trying to pause nested timeline: prezStartTimeline.call (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],
  22. 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: http://codepen.io/anon/pen/NGRgKB 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
  23. 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 TweenMax.to ("#chassis", .1, {top:1, yoyo:true, repeat:-1}) var tyre = new TweenMax.to ("#tyre", .5, {rotation:360, transformOrigin:"50% 50%", repeat:-1, ease:Linear.
  24. 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 resume
  25. I can not pause an animation that is executed by tweenFromTo Please help
×