Jump to content

Search the Community

Showing results for tags 'oncomplete'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

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

Product Groups

  • Club GreenSock
  • TransformManager

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


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests

Found 72 results

  1. Hi guys, Just scratching my head at this. As you can see in my codepen with your console open, all the on[EVENT]s fire, except onRepeat. I'm in need of having an event fire at the end of the repeatDelay on the timeline, but as it stands, I can't find one. Does anyone have any idea how I can find out (and call a function) at the exact moment the text starts to disappear again? Many thanks! EDIT: Just a note, removing the yoyo and repeatDelay, still means that the onRepeat event doesn't fire... am I missing something obvious here?
  2. var tl = new TimelineLite(), feed = $('.feed'); tl.to(feed, 0.35, { alpha: 0, ease: Power3.easeInOut, onComplete: function(){ feed.empty().html(response); }}); Can anyone tell me why this would fire immediately?
  3. Hi guys, Trying to get a conditional 'repeat' happening with a stagger animation. I want to be able to set a boolean variable (cloudsOn) and if this is true, certain tweens will replay. If it is off, the tweens will not replay. I've managed to get this working in other more custom javascript ways (thanks to help on this forum), but wanted to see if there was a simple way using a stagger loop and onComplete to get this happening. I will post a CodePen but this may be enough to check if it is a simple fix. Thanks. // five .cloud elements in my SVG var cloud = document.querySelectorAll('.cloud'); var tlClouds = new TimelineMax(); var cloudsOn = true; var cloudCheck = function(tween){ if (cloudsOn){ console.log(tween); // Successfully logs the individual tweens of the stagger, targeting individual .clouds. tween.seek(0); } }; tlClouds .staggerTo(cloud, 2, { cycle:{ x: [-400, -200, 0, 300] }, onComplete: cloudCheck, onCompleteParams: ['{self}'] }, 0.2) ;
  4. I'm trying to get my flicker animation to start after the opacity part of the tl tween. Problem is I can't just append it to the end, because I've got more tl tweens running while the flicker animation is happening. As you can see in the tween, it doesn't look like my function is firing at all. Any ideas? Codepen updated: http://codepen.io/kathryncrawford/pen/YyoyLz
  5. b.briel

    onComplete '-=0.5'

    Hello! I am using a lot of `onComplete` callbacks as it's really useful to launch something when the animation is completed. Unfortunately sometimes when using a `easeOut`, the callback will be fired at the end of the animation - which is definitely what `onComplete` should do - but then the user has to wait for the whole animation to be completed. Sometimes it will add a 'fake' delay between the end of the animation (as the user perceive it) and the `onComplete` callback. A basic example would be to add a 'fake' scrolling at the end of the animation. TweenLite.to(this.page, 1, {autoAlpha: 0, ease: Expo.easeOut, onComplete: done}); `done` will be called a the end of the animation, when `this.page`'s opacity is at 0. Sometimes, I just do this: TweenLite.to(this.page, 1, {autoAlpha: 0, ease: Expo.easeOut}); TweenMax.delayedCall(0.9, done); So the callback is actually called 0.1 seconds before the animation stops; the user will not perceive any delays. But technically, the animation is not yet completed... What do you think about using `onComplete` like this: ? TweenLite.to(this.page, 1, {autoAlpha: 0, ease: Expo.easeOut, onComplete: {done, '-=0.1'}}); So we could add/remove time just like we do with multiple tweens inside a timeline. Let me know what you think! Thanks for building GSAP
  6. I am using TweenMax to create some small banner ads. The client wants some timed things, no problem. But I'm wondering why in the following code, I have to declare "var pointer" more than once. Why is the initial declaration (is it not a global variable here?) not available to the endseq function? That is, if I remove the var pointer line (in blue) from the endseq function, the code breaks. Stupid question, I know, but JS is not my cup of tea. <script> window.onload = function(){ var pointer = document.getElementById("arrow"); var text = document.getElementById("message"); TweenMax.to(pointer, .8, {x:-30, repeat:6, yoyo:true}); TweenMax.to(text, .8, {repeat:6, border:"2px solid white", yoyo:true, color:"white", onComplete:endseq}); } function endseq(){ var pointer = document.getElementById("arrow"); TweenMax.to(pointer, 1.9, {rotation:360}); TweenMax.to(pointer, .8, {x:-5, repeat:0}); } </script>
  7. ..I would expect it would return the new value and not the pretween value. Please reffer to the codepen example. I am either missing something vey simple or very complex and surely nothing in beTween. Thanks lads
  8. Hello, I'm finally starting to get somewhere with DrawSVGPlugin and I really like it! However, I have 2 questions. I posted my project in the CodePen URL and would like to know this: 1. How do I autofade a fill in and set the stroke to 0? Right now, I have the lines being drawn and then at the end of the animation, it sets the fills back in. But when they come in, they just appear, they don't fade in (as how I want them to). .set(".aux-sym-1-shadow, .aux-sym-2-shadow, .aux-a-line, .aux-u-line, .aux-x-line", {fill:"#75674a"}); 2. How can I call the onComplete trigger at the end of the animation? Thanks!
  9. Hello, in my script im using a draggable for navigation. In the throwProps-callback the draggable is disabled. Now i want to enable it in an oncomplete callback of my timeline, but itis doing nothing. I can log the draggable instance but calling the method isnt affecting anything. The draggable stays disabled. After every section in my timeline my timeline callback is called. Then I want to enable my dragger to grant navigation. OnThrowPropsComplete I want to disable the dragger and navigation to dont disturb the timeline. Draggable instanciation: draggerInstance = Draggable.create($dragger, { type: "y", bounds: "#drag-container > div", overshootTolerance: 0, throwProps: true, onThrowComplete: function() { hideSwiperButtons(); wasDragged = true; var itemNo = getDraggerItemNo(this.y); tl.seek(sceneLabels[itemNo]); $dragger.removeClass("active"); $menuItems.removeClass("active"); $menuItems.eq(itemNo).addClass("active"); TweenMax.to($menuContainer, 0.5, { opacity: 0, delay: 0.01, ease: Expo.easeOut, onComplete: function() { $menuContainer.removeClass("active"); currentTween = tl.tweenTo(sceneLabels[itemNo + 1]); currentScreen = itemNo + 1; } }); this.disable(); //Disable dragger here to prevent navigation while tweening }, snap: { y: function(endValue) { return getDraggerItemNo(endValue) * gridHeight; } }, maxDuration: 1, onDragStart: function() { $dragger.addClass("active"); $menuContainer.addClass("active"); TweenMax.to($menuContainer, 0.5, { opacity: 1, ease: Expo.easeOut }); }, onDrag: function() { var itemNo = getDraggerItemNo(this.y); $menuItems.removeClass("active"); $menuItems.eq(itemNo).addClass("active") } }); TimeLine onComplete callback function onCompleteTimeline() { //draggerInstance is accessable from here draggerInstance[0].enable(); //not working tl.pause(); }
  10. 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?
  11. Hi i hope this is a simple one, and the question is how we can use onComplete method to tweak previous define animation property. i tried onCompleteParams but i didn't get that clearly. so if anyone can explain it bit more clearly it would be great .... eg: TweenMax.to($item, 1, { height: '0 %' , display:'block', onComplete: function() { // i want to tweak display:'block' property to display:'none' TweenMax.to($line, .5, { drawSVG: "0%", immediateRender: false }); } });
  12. TweenMax.staggerTo(".box", 1, {rotation:360, y:100}, 0.5, onCompleteAll:test); function test(){ alert("example") } Why doesn't work????? Green sock documentation: "Note that if you define an onComplete (or any callback for that matter) in the vars parameter, it will be called for each tween rather than the whole sequence. This can be very useful, but if you want to call a function after the entire sequence of tweens has completed, use the onCompleteAll parameter (the 5th parameter)."
  13. HI, I'm really new to all this, I just looked at the 'Getting Started' video. My question is: is this the right way to get that result (the blue line shrink from left to right in an infinite loop) or there is another/better way to achive this result? At first i tried this code: TweenMax.to(".light", 0.8, {left:0, delay:1.7, ease:Power0.easeOut}); TweenMax.to(".dark", 0.8, {left:0, delay:3.7, ease:Power4.easeOut}); TweenMax.to(".dark", 0.6, {width:0, left:500, delay:4.2, ease:Power0.easeOut}); TweenMax.to(".dark", 0, {left:-500, width:500, delay:5, onComplete:complete, repeat:-1}); function complete() { TweenMax.to(".dark", 0.8, {left:0, delay:2, ease:Power4.easeOut}); TweenMax.to(".dark", 0.8, {width:0, left:500, delay:2.5, ease:Power0.easeOut}); TweenMax.to(".dark", 0, {left:-500, width:500, delay:4}); }; But doesn't seems to works, it only works withouth: repeat:-1 at the end of the line, and repeat only once. I'm sure I'm missing something... Thanks a lot
  14. Hi, I'm trying to create a simple (generic) animation. I have a working POC but would like to know if there are any improvements that could be done that I'm not aware of (only started using greensock yesterday - awesome library!) At the moment I'm using two staggerX since I couldn't get a 'wait' period without it. Also I needed to use an onComplete handler since xxx.repeat(n).fromTo produced unexpected behaviour. Thanks
  15. Hello. I am in need of serious help with this problem I'm facing. First off let me tell you what I want to achieve with my code. On click of a button at the top-center of my screen, 4 fishes are to be tweened with bezier movements to simulate 'swimming' through water. They have other functions but this is the part that I need to get working. function tweenFish():void { var numY:Array = new Array; for (var count:Number = 1; count < 5; count++) { numY.push(count+8); } numY.reverse(); trace(tweenArr, round); for (var numX:Number = 0; numX < 4; numX++) { var randomStart:Number = (Math.floor(Math.random() * (460 - 140 + 1)) + 140); _difficulty[numX].y = randomStart; _difficulty[numX].x = -50; if (round == 1) { tweenArr[numX] = TweenMax.to(_difficulty[numX], (numY[numX]/round), {bezier:{curviness:2, autoRotate:true, values:[{x:50, y:randomStart+5}, {x:150, y:randomStart-5}, {x:250, y:randomStart+5}, {x:350, y:randomStart-5}, {x:450, y:randomStart+5}, {x:550, y:randomStart-5}, {x:770, y:randomStart+5}]}, ease:Cubic.easeInOut}); } } tMax.add(tweenArr); } This is the function I use to setup the tweens for the fishes. Each fish (set in an array called _difficulty) is given a set x value (offscreen) and a random y value so that each run they will 'swim' across the stage. This works perfectly. In fact, all of it runs perfectly...until I try to run it again. This is my initialization which basically stops the round if the fishes make it off the stage without being clicked (intended functionality). var tMax:TimelineMax = new TimelineMax({onComplete:endRound}); And this is the function it calls. function endRound():void { GoFishing.removeEventListener(MouseEvent.CLICK, fish); while (tweenArr.length > 0) { tweenArr.length = 0; } // tMax.clear(); POSSIBLE CODE? gotoAndStop("endGameResults"); scoreBox.text = "Your score is: " + points; gameResultsBG.width = 1; gameResultsBG.height = 1; TweenLite.to(gameResultsBG, 1.5, {scaleX:1.1, scaleY:1.1}); TweenLite.to(gameOverText, 3, {autoAlpha:1}); TweenLite.to(playAgain, 2, {visible:true}); timerX.stop(); timerX.removeEventListener(TimerEvent.TIMER, clock); playAgain.addEventListener(MouseEvent.CLICK, function(e:MouseEvent):void { MovieClip(root).gotoAndStop(1); GoFishing.addEventListener(MouseEvent.CLICK, fish); round = 0; } ); } Don't mind the commented line at the top. Anyway, this function leads to frame 2 where it's an end-game screen and it allows you to retry. 'playAgain' would take you to frame 1 and play the tween again when the button at the top is clicked, or so I thought. This is where the fishes are frozen off screen (I expanded the window and saw), and they do not move when the function is called, BUT the timer for the timeline STILL RUNS. Know why? The timeline takes 10 seconds to run each time at first. On the second run, 10 seconds pass and it leads me to the end-game screen. So clearly the timeline is running as I would expect it to, but the fishes aren't being moved. Is there something wrong with my code here? Do I need a different approach? Also I just thought of this: Would disabling these fishes, or switching to another frame at any point mess up the tween functionality? Thank you for your help.
  16. 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
  17. First of all, I would like to thank you for the amazing work you're doing with GSAP... it really is an awesome tool and and I really love to work with it Well, I'm combining GSAP and chart.js library to do some animated charts for an online CV and yesterday I ran into a strange issue. I'm usually bringing empty charts (with values of 0) in the screen using timelinemax and then updating the charts value with a callback function (in this case the function updatedoughnuts()) to have a nice animation effect on my charts. var tween6 = new TimelineMax(); tween6.staggerTo(".doughnut", 2, {marginLeft:"0px", ease:Power4.easeOut}); tween6.call(updatedoughnuts); tween6.to(legend, 1, {opacity:1, alpha:1, ease:Quart.easeOut}, 2); function updatedoughnuts() { mydoughnutgraph1.segments[0].value = 120; mydoughnutgraph1.segments[1].value = 30; mydoughnutgraph1.update(); mydoughnutgraph2.segments[0].value = 80; mydoughnutgraph2.segments[1].value = 70; mydoughnutgraph2.update(); alert("the function has been called"); }; The weird thing is that the function is called (I have the alert box) but my doughnut graphs are not updated. But even stranger is that if I remove the callback inside the timeline and call the function outside of it, then it works like a charm (see the codepen that reproduce the error): var tween6 = new TimelineMax(); tween6.staggerTo(".doughnut", 2, {marginLeft:"0px", ease:Power4.easeOut}); tween6.to(legend, 1, {opacity:1, alpha:1, ease:Quart.easeOut}, 2); updatedoughnuts(); I really don't understand this behaviour... I tried different callback with onComplete in the staggerTo or using a delayedCall but I always get the same behaviour. I also used the same method with other types of chart and I had no problem to update the charts values with a callback... Or maybe I just miss somth completly obvious I really hope you guys can help me on this one. Thanks in advance
  18. Hey everyone so I know that tweenMax has a onComplete function but I was wondering is there anyway that I can setup a tweenMax or tweenLite function to only run 30 intervals of my stages frames per second then once finished call on the onComplete function? I have a movie clip object that is added to the stage every 0.8 seconds and what i wanted to do was when my character picks up a powerup I wanted to have the movie clip object added to the stage every 0.1 seconds but only for a couple intervals or like say 5 seconds then I wanted to put it back to its original time. Is there anything that the tween engine offers to call on a onComplete function for this?
  19. 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.
  20. I'm new to green sock, but very well versed in Flash and ActionScript. I cannot for the life of my get an onComplete to work. Here is my code, maybe I have it in the wrong place?: function RedWineBounce04(event:TweenEvent):void { TweenMax.to(mcRedWines, tweenSpeedBounce, {bezier:{type:"quadratic", values:[{x:X_02_RedWines, y:Y_02_RedWines}, {x:(X_02_RedWines+BounceDistance), y:(Y_02_RedWines-BounceDisplacement)}, {x:(X_02_RedWines+125), y:Y_02_RedWines}], ease:Linear.easeNone, onComplete:MadeIt}}); X_02_RedWines = X_02_RedWines + 125; function MadeIt(event:TweenEvent):void { trace("Made It"); } }
  21. Hi! Is it possible that the onComplete and totalDuration methods of TimelineMax doesn't work at all? version 12.1.5 I have nested TimelineMax instances all has totalDuration = 0, the nested onComplete callback functions doesn't get called. The main TimelineMax onComplete function is triggered immediately though. Or I missed something in the last few months.. Thank you. Gergely.
  22. 1DMF

    onComplete not firing?

    Hi, my onComplete doesn't appear to be firing, please can someone advise why. TweenLite.fromTo(obj,1, {height:minHeight+curHeight},{height:minHeight, onCompleteParams:[obj], onComplete:function(obj){obj.toggleClass('active')}}); Thanks 1DMF
  23. Greetings, we have a site with animated buttons. The buttons are supposed to slide in and not become interactive until the reach their target resting spot. However, they demonstrably become active right away. This is in IE11 on Windows 8. The interactive flag is a property of the pixi object we are animating. We tried a number of different ways to specify the above but none worked to solve the issue of the onComplete firing immediately under these conditions; not even using the latest 1.11.8 TweenMax.js Browsers other than IE 11 appear to work fine. And no, we did not put parens after onComplete, as that appeared to be a common mistake according to forums. We also tried both From and To tweens, that did not change anything . Here is the code. ... var tLadv2 = zq.sAn['tLadv2'] = new TimelineMax({onComplete: makeAdvButtonInteractive, onCompleteParams: [2]}); tLadv2.from(zq.sSp['advBtn2'], 0.36*tEslideR, {x:(gsf*(advBgX+7+115-1000)), ease:Power1.easeOut}); tL1.add(tLadv2, (6*tEdelay)); var tLadv1 = zq.sAn['tLadv1'] = new TimelineMax({onComplete: makeAdvButtonInteractive, onCompleteParams: [1]}); tLadv1.from(zq.sSp['advBtn1'], 0.2*tEslideR, {x:(gsf*(advBgX+7-1000)), ease:Power1.easeOut}); tL1.add(tLadv1, (7.2*tEdelay)); function makeAdvButtonInteractive(advBtnId) { zq.sGr['advF'+advBtnId+'Mask'].interactive = true; } Any advice would be appreciated. Thanks ahead!!
  24. Hi all, I'm a noob here and have really been enjoying creating awesome experiences with GreenSock! However, I'm trying to get past an issue that you might be able to help me with. After a tween of a container width, I'm trying to add an inline div to the newly created space. The new div does not immediately get added to the space. On the next add action (that creates additional container width), the previously created div appears. Am I hooking the wrong method? Thanks! TweenLite.to($('.list-item-container'), 1, { width: $('.list-item-container').width() + 253, delay: 0.25, onComplete: function () { var _item = document.createElement('div'); $(_item).addClass('list-item'); $('.list-item-container').append(_item); } });
  25. I am trying to write a function that plays an animation when a link is clicked and then opens the link... so that I can play transitional animations between pages... This is my code, but I can't get the page to load after the animation: var tweenBtn = document.getElementById("one"); tweenBtn.onclick = function(event) { event.preventDefault(); tl.reverse(2.2); window.location.href = "POWERservices.html"; }; Is there a way I can add onComplete to my timeline that has just played in reverse? Or is there a better way of doing this?