anagnam

And to get things complicated (for me), I managed to convert the bug png file to an actual canvas bezier curves. please view the source in the link below: http://relumastudio.com/download/green-bug.html I understand that tweenmax can animate numbers. but with tons of bezier points to animate on just the 1 bug as shown on the link above... its imposible for me to animate say hundreds of thousands of bugs. I already tried wrapping it into a function that I can call in tweenmax but no luck. So any hint on how I can animate those canvas bezier points in tweenmax???

looking at your code above, I can see that its working but the bug is not following its path. so I put an autoRotate:true property but it didn't work. Also, when I delete the autoCSS:false property to replace a css property before the bezier property, its also not working. In the modified code below, I put the last working code from the previous bug demo including the delayedCall function and its all screwed up. Can you please check again why its not working? http://jsfiddle.net/anagnam/eDt6E/3/

Hey Carl, I tried following Lee's tutorial and your revised code but it doesn't seem to work. Using the bug demo that I have before, I'm trying to use the canvas instead of dom but I'm having a hard time. Can you please take a look at my code below where did I go wrong? http://jsfiddle.net/gy6Zc/8/ thanks

Ok. thanks very much for your input Jack.

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. http://jsfiddle.net/anagnam/mShLw/1/embedded/result/ 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?

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 http://eruciform.com/jquerycollision http://qiao.github.com/PathFinding.js/visual/ 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. regards,

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

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);

Thanks for your help once again, Michael. I really appreaciate it. I thought theres a built-in features that I need to know so can use for this project. Anyway...I hope that just like the 'yoyo' feature, gsap can come up with same feature I desire sometime in the near future. regards, Rey

thanks for the overflow hidden trick Michael, the unwanted scrollbar now dissapears. However, onRepeat functions doesnt seem to cut it (or maybe I just inserted it in the wrong place). Currently, there are 5 lists animating and only after all the lists reaches 500px and are out of the frame, only then it started to repeat (leaving an empty slots) and thats not what I wanted. What I want to achieve is that when the last child of the list item (first to move) reaches 500px, it will be immediately shown next and before the first child list item thereby creating the effect of continous chain of images that is looping.

Thanks for your suggestion Michael. After trial and error and checking out somewhat similar thread, I found Carl's suggestion and it does help the looping. So going back to my main question...how do I make it a seamless loop - that is - there's no gap between the list elements as they repeat. http://relumastudio.com/gsap/ In my demo link above, I want it to look like they are chained together forming an endless and seamless chain loop of list items. Any other ideas how i can make it work?

Hi Guys, referring to the sample code below: var list = $('.class'); TweenLite.to(list, 10, {css:{marginLeft:"500px"}}); As I executed the code above, the entire lists move to left and when the last element reaches 500px, it goes below the list elements until theyre all stacked up vertically. Is there a way I can stacked them up horizontally so to create a seamless loop? thanks for the help in advance. Rey