CODEWITHSUNDEEP
animationfabricjslagrequestanimationframe
daneczech
daneczech

Reputation: 655

Fabric JS animation lag after a little while

I have a little issue with FabricJS.

I have animated a triangle, but the problem is that after a little while, it starts to seriously lag. I am a beginner, so I am not saying my code is the best way to do it, but I can't actually get rid of this lag. Any suggestion to fix this issue would be awesome.

Here is the fiddle: http://bit.ly/1kHlInC

Thanks

Upvotes: 3

Views: 811

Answers (1)

STW
STW

Reputation: 46366

I haven't worked with Fabric before, so I can't speak to the more detailed question on requestAnimationFrame(). However, for your lag issue, your onComplete() callbacks are spawning an exponential number of animation calls--every loop of the triangle is calling excessive number of animation steps.

The issue is that when you need to animate in a diagonal manner you combine two animate() calls, such as animate('left') and animate('top'). Both of these calls have an onComplete() callback calling the same next-step, however you only need to call this once.

Here's an updated fiddle which has been reorganized just enough to solve the issue by removing the extra callbacks.

http://jsfiddle.net/Uwaa8/2/

Upvotes: 2

Related Questions