Jump to content

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

Search the Community

Showing results for tags 'onupdate'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


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

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge


There are no results to display.

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Personal Website



Company Website



Found 14 results

  1. Hi, I'm wondering if it would be possible to randomise number AND pass it to the animation on update: $('.dot').each(function(e){ var floatingThis = new TimelineMax({repeat:-1, yoyo: true, onUpdate: update}); var timing = Math.floor(Math.random() * 10) + 8, posY = Math.floor(Math.random() * 90) + 0, posX = Math.floor(Math.random() * 100) + 0; function update(){ timing = Math.floor(Math.random() * 10) + 1, posY = Math.floor(Math.random() * 90) + -90, posX = Math.floor(Math.random() * 6) + 1; // console.log(timing, posY, posX); // floatingThis .to($(this), 1, {x: posX + 'vw', y: posY + 'vh'}); // floatingThis.play(); } console.log(timing, posY, posX); floatingThis .to($(this), 1, {x: posX + 'vw', y: posY + 'vh', ease: Power0.easeNone}); }); I'm pretty sure it is , I think I saw something on the web and probably an answer here on the forum, but I can't find it anymore. I'd like my dots to float randomly (at least on the y axis, on the x axis as well bu not that far) on the page, not sure if it can be done using onUpdate tho. Another question/issue, vh and vw are not working at all, I'm randomising number between 90 and 0, so let say that it's 80, my dot should go out of the screen, but it's not the case, all my dots are staying almost on the same line without going further. So either I can't use vh and vh and than the animation shouldn't work at all or it should respect vh and vw value (that's my understanding). Thank you
  2. Hi guys, first of all a big thank you. This is my first post, I just signed up and I guess its in order to thank you for creating such a stable library. It is an essential part of a project I have been working on last couple of years....and it is the only lib that hasn't been touched, or i might say "retouched" :-). Just to mention, even jquery 3 got a rework, face lifting... So, my only question, after all this years is : Can internal clock be somehow exposed? Does the clock tick if no animations are going, or only when something is active? If a lot is happening, are all tweens, timelines and everything ticking to same clock? Can onUpdate() for all functions (to, from, stagger....) be accessed or extended somehow? All these questions are for more or less same reason...I need to do something inside my app on every GSAP tick (update transformation data of elements, bounding boxes of selected elements and similar). I guess i dont even need to execute some code...just to know has it ticked... I could go and make a to() function run in loop, indefinitely and update a var, or execute code on every onUpdate(), in background... if there is no other way and all tick to same clock. Thanks in advance
  3. Hi, I'm fairly good user of the lib, which i find awesome. thanks I'm having this case right now where i tween a plain numeric value, which i round with the roundProps plugin, and to which i react whenever there's an update with the onUpdate() hook. As the tween runs, the onUpdate() function is fired for every single step on the way, ignoring the fact that the value is rounded in post treatment by the plugin, firing unnecessary onUpdates on the way. Is there a way to prevent that ? Quite simple example : let wrapper = { index: 0, length : 0 }; TweenMax.killAll(); TweenMax.to(wrapper, 2, { length: 10 , roundProps: 'length' , onUpdate: value => { console.log(wrapper.length) } }) Thanks for the help, J.
  4. Lets say I have a complex TimelineLite instance, which is maybe tweening some DOM elements' CSS properties but also is tweening some pure JS properties which are used in drawing on canvas. Any time one of those canvas related properties updates, I want to call a function that redraws the canvas, but if some of those tweens are overlapping, I want to be sure that I am not redrawing the canvas more than once per tick. Is there a baked in way to achieve this? Or is my best bet to have the drawing method be a pre-throttled method? Cons to that would be that the throttling is then set at a hard ms time, rather than at the current requestAnimationFrame rate.
  5. TweenMax.staggerFromTo(counterElement.find('g path'), details.speed, {drawSVG:"0", ease:Sine.easeOut}, {drawSVG:details.percentage+"%", onUpdate: function(){console.log(this)} }); The animation works correctly. The onUpdate is working either. Now I want to get the current percentage of the drawSVG in the onUpdate. I looked in the this result object, but can't find any variable with current percentage. How to achieve this?
  6. I've come come across a strange behaviour that I would like to understand. It might be bug, but I'm not sure. When setting immediateRender to true I would have guessed that onUpdate would also fire once during that initial render, but it seems to depend on the type of tween involved. .to fires the onUpdate while .from and .fromTo doesn't. Example: var obj1 = {a: 0}; var obj2 = {a: 0}; var obj3 = {a: 0}; // logs "update1" TweenLite.to(obj1, 1, {a: 1, onUpdate: function() { console.log("update1"); }, immediateRender: true, paused: true}); // logs nothing TweenLite.from(obj2, 1, {a: 1, onUpdate: function() { console.log("update2"); }, immediateRender: true, paused: true}); // logs nothing TweenLite.fromTo(obj3, 1, {a: 0}, {a: 1, onUpdate: function() { console.log("update3"); }, immediateRender: true, paused: true});
  7. Wondering if someone can help shed some light on something I am trying to do with GSAP which I just suspect I am going the wrong way about solving. Essentially there is a dial that spins for a random amount of 360° rotations and it finally settles on one of 10 segments (each 36° in size). What I am hoping to achieve is the segments to animate as the dial goes past them each time (so in sync with the speed of dial). I have very crudely recreated in CodePen, the 3 issues i think I have are: • I can't get the value returned from updateProps to always be a 0-360° value - it gets higher and higher the more it spins? • if the dial spins really fast my current way of calling the function segmentGlow() sometimes misses out if the numbers are jumping up in big steps • i really want the segments to animate each time the dial passes, but I’m not sure if calling the timeline in the function again works I’m hoping I’m missing out on something and there is a much easier way of solving this…. any pointers/help greatly appreciated
  8. disclaimer: Long time user of GreenSock (back to the days of gs in Flash), and this is a new account. Is it possible to get the actual hex value rendered on each tick of an animation to pass along as params via onUpdate? An example of grand prize winning answer: var prop = {bgColor: "#00ffff"} TweenMax.to(prop, 0.5, {bgColor: "#000", onUpdate: renderHex, onUpdateParams: ["{self}"]}) function renderHex(tween) { console.log(tween.target.bgColor); //show me "#0000ff", "#00000f", ect ect until the transformation is complete // currently returns NaN with expected response } As always, any direction is greatly appreciated and any conversion of expectations (convert hex to something that can be tracked) is welcomed!
  9. pr1ntr

    onUpdate Easing

    Hi, I am trying to custom transform an svg polygon by feeding it the points arrays and have it add the difference on every frame between from to: http://pastie.org/private/owhlbo2kxu1rdiy48gjcaa So I want to be able to use the easing if one is provided (ie., in the call Cubic.easeOut) What is the best way to transform the values based on the ease?
  10. Bug or feature? When I tl.seek() a paused timeline the animation is "updating" yet the onUpdate function is never called. See plunk.
  11. Hello, I'm making a small 2D game and using (naturally) GSAP for the animation engine. So I'm Tweening a bullet by x,y and onUpdate I'm running collision detection to see if the bullet collides with any objects. However as the objects on the DOM increase onUpdate seems to be "skipping" some frames thus "lagging". Is there a better way to run somewhat complex code with TweenMax/Min? Maybe by listening on ticker? Or is onUpdate using requestAnimationFrame already? Thanks in advance!
  12. Hi, I am having trouble getting onUpdate event to fire in a TimelineMax that I have nested inside of another TimelineMax. Basically i have a "master" timeline, and a bunch of different "section" timelines. The master timeline has its own onUpdate , but I would like the onUpdate for each of the different sections to call a different function. for example... var master = new TimelineMax( {paused:true, onUpdate:masterUpdate}); var sec1 = new TimelineMax({paused:true, onUpdate:sec1Update}); var sec2 = new TimelineMax({paused:true, onUpdate:sec2Update}); master.add([sec1, sec2], "+=2", "stagger"); master.play(); The problem I am having is that sec1Update, and sec2Update are not getting called when their respective timelines are being played. Any help would be greatly appreciated. Thanks Greg
  13. Hello, I've got this code: leanLeftTween = TweenMax.to(trapecista, 1, { rotation: -10, ease:Linear.easeNone } ); leanRightTween = TweenMax.to(trapecista, 1, { rotation: +10, ease:Linear.easeNone } ); leanBackLTween = TweenLite.to(trapecista, 1, { rotation: 0, ease:Linear.easeNone } ); leanBackRTween = TweenLite.to(trapecista, 1, { rotation: 0, ease:Linear.easeNone } ); var tremble:TimelineMax = new TimelineMax( { repeat: -1 } ); tremble.append(leanLeftTween); tremble.append(leanBackLTween); tremble.append(leanRightTween); tremble.append(leanBackRTween); TweenLite.delayedCall(1,updateRotation); } private function updateRotation():void { leanLeftTween.updateTo( { rotation: -30 } ); leanRightTween.updateTo( { rotation: 30 } ); } The rotation values are changed, but the animation seems to jump. I just want to increase/decrease the amplitude of the rotation tween on user interaction (using delayedCall is just to simplify code). Any help?
  14. Hello I'm trying to tween a value of an object like this: var _obj = {v:0}; TweenMax.to(_obj, 1, {v:100, ease: Linear.easeNone, onUpdate:onTweenUpdate}) } function onTweenUpdate () { console.log(_obj.v) } This works fine but what it actually needs are rounded values. I thought "roundProps" would come in handy but the following change causes an error in TweenMax.js: TweenMax.to(_obj, 1, {v:100, roundProps:"v", ease: Linear.easeNone, onUpdate:onTweenUpdate}) Is this code wrong or does "roundProps" not work that way? What I actually would like to do with it is tweening the "currentAnimationFrame" of an EaselJS BitmapAnimation. I used the "onTweenUpdate" function from the example above together with Math.round() as a workaround. But it would be much nicer to tween the currentAnimationFrame directly. Any ideas anyone? Cheers Henry