Search the Community
Showing results for tags 'onstart'.
Found 8 results
-
Hello Team , Why does onStart callBack is triggered for the first element passed in array. tl.set([...chars], { opacity: 0 }) tl.to([...chars],{ opacity: 1, ease: Linear.easeNone, willChange: "transform, opacity", immediateRender: false, onStart: placeHand, stagger:duration / chars.length, duration : (duration/chars.length) }); in version 2 it gets called for every element that has been included in the array, if in v3 it triggers only for the first element then what will be the fix, i want to call the onStart callback for every element in the array. -
I have solved my own problem and updated the codepen by animating the cloned tile by adding the code below. Thanks for everyone's help. let cloneAnimation = clone.querySelector('.tile .inner-content'); gsap.to(cloneAnimation, { duration: 2.0, opacity: 0 })
-
I was hoping somebody might be able to help with a little GSAP issue I'm having ? Essentially, on our site we have a 'Menu and Search' button, that when clicked, will animate in the various parts of the full-screen, takeover menu. As well as this, we also have a separate function which deals with toggling a few classes, etc. This function has been assigned to the onStart callback, and also the onReverseCompleted callback, however it appears that on rare occasions (and I can't seem to create a consistent test case for this) that the onStart is running twice, and therefore breaks our animation. Does anybody have any ideas as to why this may be? I've mocked up a sample CodePen with a general gist of our code, except in a more simple context. Any help would be much appreciated. Thanks!
-
I am working on a HTML application which runs in an embedded device. There is a GSAP animation using TweenLite. For performance improvement I would like to do some tweaks in the frame per second of the animation. For a smooth animation, I need a fps(40) and as soon as the animation is complete, I would like to change the fps to fps(0). TweenLite.to($(element), 0, { scale: 0.95, opacity: 0, onStart: function () { TweenLite.ticker.fps(40); }, onComplete: function () { $(element).css("transform", "none"); done(); TweenLite.ticker.fps(0); } }); But the animation is always taking fps(0). onStart TweenLite.ticker.fps(40); is not working. In stead of onStart, I also tried it as below. TweenLite.ticker.fps(40); TweenLite.to($(element), 0, { scale: 0.95, opacity: 0, onComplete: function () { $(element).css("transform", "none"); done(); TweenLite.ticker.fps(0); } }); Anyone have some idea regarding this? Thanks in advance!
-
Hi GreenSockers, Can someone tell me where I'm going wrong here? I've added a codepen url to the post. Basically I'm getting a couple of errors on click on the links in my example, I want to use display:none; & display:block; to show/hide because I want "active" elements to take the space of the ones that have been hidden. It currently works exactly how I want, though I'm concerned about the errors I get in the console upon activating these elements: Uncaught TypeError: this.vars[r].apply is not a function Uncaught TypeError: this.vars.onStart.apply is not a function Thanks, Joe
-
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
-
I have created a SoundManager object which loads my sounds and has functions for playing them. Most of the time, they are various click-sounds attached to buttons, but in some cases, there are longer sounds associated with a TimelineLite animation. I am trying to trigger them with this: var tlboxBtn = new TimelineMax({onStart: $EV_SoundManager.playSFX, onStartParams: ["glitch020"], paused : true }); // other animation items added to the TimeLine... then... element.grpanimation = tlboxBtn; element.grpanimation.play(); The first thing in the "playSFX" function of $EV_SoundManager is a log to the console displaying the name of the soundfile to play. This is working for all calls triggered from button clicks, but not when this timeline runs. No sound and no log statement. I could just create an anonymous function, call that from the TimelineMax, and have it trigger the function in the $EV_SoundManager object, but that seems like a step too many. Is there a better way to do this? Any help is appreciated. --Kevin
-
Hi there! In the AS version there was something called onInit, I think I might need something similar. Creating a game where there's a speech bubble, it's a div that can vary in width/height, depending on the amount of content, this div is reused throughout the game. When an animation is run, onStart fires a function for replacing the content of the bubble, I give the contents of the bubble as onStartParams. The problem is, this speech bubble should always be centered (both vertically and horizontally), but this won't work the first time the animation runs, I suspect this is because the onStart runs after the tween inits. Any way to give the onStart and onStartParams before the tween inits?
