Jump to content
Search Community

Colour tween not completing

boonier test
Moderator Tag

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 

 

I'm new to Greensock! I've tried implement a TweenLite colour tween into my existing canvas based sketch, and the tween works for the rollover and out, but the out tween doesn't return to the colour specified.

 

I've a feeling that I'm trying to shoehorn GS into a pattern that is not compatible with GS. Is it still relevant to use update() and draw() with window.requestAnimationFrame?

 

Codepen below:

 

See the Pen zPPBje?editors=0010 by boonier (@boonier) on CodePen

 

Many thanks

Si

 

Link to comment
Share on other sites

I tried console logging onComplete callback, and only few tweens(around 20-30) complete the tween. I don't know if there is any limit on maximum number of tweens but at the moment you are creating around thousand tweens every second. Out of which only 20-30 are able to complete. I don't know solution to it but if it is possible for you to create events every time there is mouse event, that will be a lot more efficient.

Link to comment
Share on other sites

Hi

 

Thanks for getting back. Yep that's what I thought: the draw loop is repeatedly creating new tweens. I'm going to refactor what I've done, but I need to detect the collision with the mouse another way to reduce the data. 

 

Are the fundamentals of how I've implemented TweenLite looking ok to you though?

 

Cheers

 

 

Link to comment
Share on other sites

That seems ok to me, I think looking more into how to raise events/callbacks on canvas will help you. For example if you raise event/callback when mouse enters certain grid and leaves, you can use a tween that will update the color value externally without getting called unnecessarily.

 

@OSUblake has great experience with such things, but not sure when he will be online.

  • Like 2
Link to comment
Share on other sites

Just looking through your code real quick, the only thing that really stands out at the moment is your resize function. You're creating new blocks, but not updating or destroying the old ones. There could be other stuff, but I'll look at it later.

 

In the meantime, here's a good thread about working with canvas and GSAP.

 

  • Like 2
Link to comment
Share on other sites

Hi @boonier

 

You still have some problems with your resize function, or rather with your paintCtx function. Every time you call it, you're starting another draw loop with requestAnimationFrame. After several resizes, you're demo is going to grind to a halt. It might be easier to use GSAP's ticker instead.

 

And if you haven't already, check out that thread I linked to. There's some good tips on there, like translating 1/2 pixel when a drawing a line that has an odd width, or how to resize your canvas using devicePixelRatio.

 

I made a couple changes to your pen. Nothing that deals with the animation. Just some of the stuff mentioned above.

 

See the Pen BmrRZx?editors=0010 by osublake (@osublake) on CodePen

 

 

I like what you got going on here!

 

I think I might post back later with my own version. One thing that could be improved upon is the hit detection. If you move your mouse around, you'll notice that it skips a lot of blocks, especially when moving very fast. The reason for that is because you're not able to detect and track every single point the mouse has moved in between animation frames.

 

There is a way to figure that out if you know how to draw a line. By drawing a line, I'm not talking about with canvas, but how to draw a line on a grid, like with Bresenham's line algorithm. By plotting a line between the last mouse point and the current mouse point, you can figure out which grid squares the mouse has passed through.

 

Bresenham.svg

 

 

  • Like 5
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.
×
×
  • Create New...