Search the Community
Showing results for tags 'callback'.
Found 41 results
-
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(); }
-
Hi, I'm having some troubles because the order of execution of callbacks and events seems different when I have nested timelines. I have reproduced a simple scenario: I have a timeline with a tween, then a call to a function that pauses the timeline, then another tween. Both tweens are "fromTo" with immediateRender = false. I have added also complete callback on the first tween and start callback on the second one in order to log them. The result is: - first tween completed - timeline paused The second tween is not starting and its start callback is not executed, as I would expect. Then, I take an identical timeline, and I nest it inside another one. In this case the result is: - first tween completed - run the callback that pauses the timeline - first frame of the second tween executed and its start callback executed - timeline actually paused So only nesting the same timeline, the behavior is different. Consider also that this happens also putting the pause action inside the complete callback of the first tween. The second tween starts in any case before the pause takes effect on the timeline. You can see it clearly in the codepen. Is there something wrong in my setup? Is there a way for having the same execution order in any nested or not nested scenario, except putting tweens and callbacks in slightly different positions? Thanks in advance
-
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)."
-
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
-
Hey, I've been using the scrollTo plugin extensively throughout my web app and up until now its been running great. I just came across a use case that requires an event to fire when the user manually scroll's while the scrollTo plugin is auto scrolling. Does scrollTo have a callback that fires when the scroll is killed by a manual scroll? I've tried onComplete but that only fires if the whole auto scroll finishes before any manual scroll event. Thanks Josh
-
Hello! I posted once before about a similar problem, and I was able to workaround that problem easily, but this one is a tad different. In the codepen sample I provided, there are 6 color blocks. Each one is animated in its own timeline, and each timeline is then nested in a master timeline. In this master timeline, I set up a pause at the end of each nested timeline, so that playing the timeline only plays one scene (or, in this example, one animation) at a time, then pauses and waits for the user to press "continue". It is also paused at the start, so you must press "continue" to see the first block. In the linear sequence, all is well: run the codepen and press continue at the end of each block's animation and the blocks animate in when and as expected. The following steps, however, cause a problem: 1. Run the codepen 2. Press continue to display the red block 3. Keep pressing continue and finish the sequence so that all blocks are on-screen 4. Press the button labeled "Orange" and see the orange block animate in as expected 5. Press the button labeled "Blue" and see the green block animate in As you can imagine, the blue block should have been the one to animate in. In addition, I am firing events on each block animation's start and finish, and the events fired for step 5 are two start events for the "green" block and 1 finish even ("green-done") for the green block. The "blue" event never fires. I'm at a loss. Anyone have any idea why this isn't working, or what I'm doing wrong? Effectively, having these "jump-to-scene" buttons is crucial for a project, so any help would be very valuable. Thanks, Frank
-
I have a dial I wish to retrieve the rotation value from after a submit button is clicked. A user can rotate the dial and upon clicking the button the dial should animate to the update position and the percentage value use the calculateAngle. I've tried retrieving all manner of properties from the Spinner object itself and the tweenlite object but I can't get a dynamic value, always returns the end rotation value but I want it to poll the rotation in the same way that the percentage value updates when you directly interact with the dial. The reason I want the value to animate is I wish to re-use the animated value to animate a pie chart type fill which will be overlaid on top of the dial.
-
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.
-
Hi, Can anyone help: I'm using the scrollTo plugin and I need a callback that will fire if the Tween is interrupted by the user manually scrolling. Does functionality like this exist or is it possible to create it? Thanks, Will
-
From my code the red cube div suppose to animate its height to 0 first before adding the new div class. but right now the problem is that both of them seem to trigger at the same time. I have tried using callback function but still doesnt work. How do you ensure the animation is complete before adding the class? Here is my code: http://codepen.io/vincentccw/pen/yeqzD
-
I am trying to get the id/class from the animated div in the callback-function. What information does the callback-event contain? Is is the tween or is it possible to get information about the animated object the tween is using (in my case a div)? Thanks in advanced!
-
I'm I doing something wrong here ? If paused is true, the callback fire, but not if I use paused and play. At first I didn't set second play parameter to false, but even with .play(0.5,false) callback doesn't fire. Thanks for help. function test(){ console.log('done'); } var animContPress = TweenMax.to($("#contpress"), 1, {left:'0',ease:Power2.easeInOut,onComplete:test,paused:true, suppressEvents:false}); animContPress.play(0.5,false);
-
I want to run a function after the end of my animation but the callback function doesn't seem to be working? these are my code: $("body,html").animate({scrollTop: $(".slide2").offset().top}, {duration:2000, easing:"Back.easeInOut"}) .delay(2000).animate({scrollTop: $(".slide3").offset().top}, {duration:2000, easing:"Back.easeInOut"}) .delay(2000).animate({scrollTop: $(".slide4").offset().top}, {duration:2000, easing:"Power4.easeInOut"}) .delay(2000).animate({scrollTop: $("#mainContainer").offset().top}, {duration:2000, ease:"Power2.easeInOut", onComplete:completeHandler }); function completeHandler(){ $(".slide1").unmousewheel(); alert(callback); console.log("callback"); }
-
Hello there again! I use TweenMax.set() to set properties like opacity and transform(x,y,rotate,scale(x,y)) for IE6-8, and it works like charm, everything is perfect! But I have one issues, which I don't know how to solve. The life cycle of my page: Set DOM values via MVC engine Wait until $(window).load() and then fadeIn() page Problem is TweenMax.set() executes on slow computers after load is complete and then user needs to wait like 2-3 seconds until element by element is positioned for him. Basically it look like mess. What I would want is to know when TweenMax actually sets the values and after that I show content to the user. Is it possible, has anyone ever had this problem? Sincerely, Masq
-
Hi. I declare var cacTimeline; as global variable. I then use it like this in function1 for example : function1 () { cacTimeline = new TimelineMax(); cacTimeline.to($linePath,0.5,{height:300}); ...... } I then want to reverse it in function2 and have a onReverseComplete or some callback at the end. But for the sake of my app , I have to append this callback in function2 , not in the object declaration. function2 () { cacTimeline.addCallback(callback_function_name,0); cacTimeline.reverse(); } Fires the callback_function_name twice. One at the start of the tween , one at the end of the sequence. function2 () { cacTimeline.addCallback(callback_function_name,cacTimeline.totalDuration()); cacTimeline.reverse(); } callback_function_name never fires. Can anyone help me. I'm new to this , maybe there is a better solution for this.
-
I'm writing an app thatdoes a zoom in and out around a point. To do this I registered a callback function that does a matrix transform. Everything is working great except for the fact that the cllback is called an inconsistent number of times. For a 1 second duration at 24 frames per second the function is called between 23-25 times. Is this a bug or should I be doing something different? I would think the number of times the callback is called would be equal to duration * frameRate. Below is the call I am using: TweenLite.to(target, this.duration, {ease:Elastic.easeOut , onUpdate:MotionUtil.zoomOut, onUpdateParams:[ target, scaleIncrement, _origin, _originalScale ], onComplete:onComplete }); Thanks in advance for any help you can offer.
