search

lmgonzalves / segment

A JavaScript library to draw and animate SVG path strokes
http://lmgonzalves.github.io/segment
MIT License
1.74k stars 98 forks source link

Use requestAnimtionFrame #2

Closed mikkelkai closed 8 years ago

mikkelkai commented 8 years ago

Use requestAnimtionFrame for better performance in modern browsers and add polyfill for older.

lmgonzalves commented 8 years ago

Hi @mikkelkai, this is great! But this improvement is breaking some animations that I had done. I'm trying to find out why it is not working properly. Maybe I'll prepare a demo to show you the issue. Your pull request is very welcome anyway :) Looking forward to merge this!

mikkelkai commented 8 years ago

That's unfortunate, but i would be happy to help you fix it :)

lmgonzalves commented 8 years ago

I've created 2 demos to show you how an animation work with and without the pull request. Seems to be a Firefox issue. It's working properly in Chrome (not tested in others browsers).

Demo original: http://jsfiddle.net/lmgonzalves/e2vbuaz6/1/ Demo with the pull request included: http://jsfiddle.net/lmgonzalves/ptzz2x4k/2/

Note the unwanted delay in the second demo (only Firefox).

mikkelkai commented 8 years ago

The error seems to happen because of how firefox handles the callback (works fine in safari too). Demo with setInterval instead of callback: https://jsfiddle.net/s8qoeg6y/ I can't look at it anymore right now, but i'll likely look in to i later today :)

lmgonzalves commented 8 years ago

Good fix man! But I need to get it working using callback too. I really appreciate your efforts to help :+1:

mikkelkai commented 8 years ago

It seems that firefox was stopping the current animationFrame function when calling cancelAnimationFrame from it. Anyway the bug should be fixed now :)

lmgonzalves commented 8 years ago

@mikkelkai I've experimenting a very strange behavior with requestAnimationFrame. You can see the details in this StackOverflow question, and also you can check the demos:

Can you help me with this? I really have no idea what's going on, so any help is welcome :)

lmgonzalves commented 8 years ago

Solved! Here is the answer :)

mikkelkai commented 8 years ago

Nice, sorry i didn't get around to look at it