Jump to content


more tick property example

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

hi guys,


do we have a more real-life example of the "ticker property" aside from the generic example below?


//add listener
 TweenMax.ticker.addEventListener("tick", myFunction);
 function myFunction(event) {
     //executes on every tick after the core engine updates
 //to remove the listener later...
 TweenMax.ticker.removeEventListener("tick", myFunction);



Link to comment
Share on other sites

Is there something specific you're looking for? The function will simply get called each time the core ticker dispatches a "tick" event (which is what drives all animation in the entire platform). A common usage for a tick listener would be a canvas update routine where you're drawing stuff to a <canvas>. Or maybe some collision detection logic in a game loop. 

Link to comment
Share on other sites

Hi Jack,


currently, I wrapped my tweenmax animation to the setInterval () say every 1000ms. this way, the animation repeats say every 1secs.


And I can't use tweenmax repeat properties because I don't want to repeat the same animation again. So I used the Bezier Plugin class to repeat the animation at random bezier points everytime the animation repeats thereby creating a unique animation everytime the setInterval () is called.


Its working so far and my object is wandering around the container. check here http://jsfiddle.net/anagnam/6snL5/9/embedded/result/


So instead of using a setInterval(), I was hoping I could use the "ticker property" to trigger the repeat of my animation. Unfortunately, I can't find a good example for the ticket property that I can use for my project.


Ultimately, what I want to achieve is this:


I have an insect(it can be any, say a bug for example) that is roaming around and when it collides with an object, it will repel and change its animation path.


so I was thinking of using the "ticker property" to dispatch the repeat of my bezier animation.


I know it can be done but I dont know how :)

Link to comment
Share on other sites

First, great demo. I really like it. It shows off a lot of the platform's strengths. Great idea!


In order to repeat the tween I would use TweenLite.delayedCall() or an onComplete callback on the tween.


It appears you want to interrupt a SlowMo ease mid-tween so that you get the fast start of the tween and a nice segment of linear motion (nice idea!). Here is an example of each tween having a random duration and the tween gets interrupted 70% through via delayedCall:



Also if you want the bug to progressively speed up and then slow down (less abrupt) you can use an onComplete (which will allow the full SlowMo ease to play through)




Note in both cases I adjusted the SlowMo eases linearRatio and power params via the config() method: http://api.greensock.com/js/com/greensock/easing/SlowMo.html#config()


I understand this is a little off track from your initial question. 


But yes using the ticker's "tick" event would be a great way to repeatedly fire a function that checked to see if each bug has collided with an object.  


I don't know if you need help detecting the collision or just getting the ticker to work?


If the latter, you would just do this




TweenLite.ticker.addEventListener("tick", gameLoop);

function gameLoop() {

console.log("checking collision")
Link to comment
Share on other sites

Hi Carl,


Thanks for the reply :)


I really like the modifications you did. Im looking at ways (my noob ways) on how I could elliminate the setInterval() and finally you did it! the code is more slick and the animation is more believable using the delayedCalll().


Now the only thing I really need help is the collision detection between each bug and its sorroundings.


I'm currently scanning the api docs for a property that could help me in the colllision detection system but it seems, the ticker property is the closest that I could think of.


It would be great if there were built in properties for the Bezier Plugin that will detect the overlapping of points so as to mimic the collision detection.


currently, Im looking at these resources and thinker how I can integrate this to improve my bug demo






And if its not too much to ask, I would greatly appreciate if you could come up with a working sample code that I can start to fiddle with so as to cut my learning curve on the subject.



Link to comment
Share on other sites



Collision detection isn't part of the GreenSock animation API, As for your suggestion, it would be a fairly complex operation to generate a set of intersecting points of multiple Bezier paths, and even if we could it would still be a challenge to figure out if multiple objects were at that same point at the same time.


Unfortunately, we have to keep our support assistance focused on the core features of our tools.


I'm sure there has to be a number of jQuery plugins that can handle basic collision detection, just might take some time to research and experiment. Also you may find that some canvas libraries like KineticJS might have some collision detection built in. The GreenSock tools work great with the DOM or canvas.

Link to comment
Share on other sites

Its Ok Carl. I understand. and thanks for pointing me to KineticJS, I will explore those libraries as well.


Btw, I ran more than a 1000 bugs on the demo and the for some reason, the browser or the code cant handle it. also the animation is no longer smooth as we expected on fewer bugs. here take a look.




that demo is using 100 bugs only but if you increase the amount of bugs in the for loop to say more than a thousand, thats where the problem lies.


so where do you think the problem lies?

Link to comment
Share on other sites

The performance bottleneck is almost surely graphics rendering in the browser, not JavaScript execution. You could verify this by setting display:none or visibility:hidden on all the elements and do a performance snapshot. 


You're asking a LOT from the browser - it's got to position 1000 elements on the screen at new spots, calculate where they overlap and what their z-depths are, composite them together into pixels that you see on the screen, and do that all 60 times per second. That's a ton of work graphics-wise. Beziers aren't exactly super fast to calculate either, although the BezierPlugin is highly optimized. You could set timeResolution in the bezier to 0 and see if that helps at all (I doubt it'd be a significant change). 


For this type of animation (lots of sprites with many overlaps), I suspect you'd get better performance if you used a single <canvas> and drew the objects onto it instead of using 1000 DOM elements. 


Oh, and by the way, you could use a bitwise operator instead of Math.floor() because it's about 4x faster or more. 


var posX1 = Math.floor(getRanPos(1, 600));
var posX1 = getRanPos(1, 600) >> 0;
Link to comment
Share on other sites

Ok. thanks very much for your input Jack.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.