I'm trying to use TweenMax/TweenLite to control the drawing of my site.
TweenLite.ticker.addEventListener("tick", drawCanvas, this, false, 2);
This seems to be firing all of the time. I thought it only fired when the TweenMax was updated. Am I missing a setting?
What I want to do is have 3 canvas' in play. One for the main content, the nav and an overlay for content showcasing. I would like to limit the drawing to only when elements in these canvas areas are updated. Which would be triggered by a TweenMax animation event.
TweenLite.ticker.addEventListener("tick", drawMain, this, false, 2);
TweenLite.ticker.addEventListener("tick", drawNav, this, false, 2);
TweenLite.ticker.addEventListener("tick", drawOverlay, this, false, 2);
Or am suppose to do this?
TweenLite.to(this, .2, {colorProps:{fill:"rgb(202,202,202)"}, roll_alpha:0, overwrite:2, onUpdate:drawMain});
TweenLite.to(this, .2, {colorProps:{fill:"rgb(202,202,202)"}, roll_alpha:0, overwrite:2, onUpdate:drawNav});
TweenLite.to(this, .2, {colorProps:{fill:"rgb(202,202,202)"}, roll_alpha:0, overwrite:2, onUpdate:drawOverlay});
The above seems to get caught up, when there are multiple buttons firing. Like when someone mouses over 5 buttons at the same time. Firing something similar to the above in the over and out states of each button.
What is the best approach? Any ideas would be appreciated?