3 ms·

Number one is being careful about NEVER triggering a repaint while an animation is happening. That means only animating css transform properties and opacity, a

Number one is being careful about NEVER triggering a repaint while an animation is happening. That means only animating css transform properties and opacity, and deferring anything that updates the contents of an element until after an animation is finished. Number two is that, even though it's running a physics simulation for each animation, we kept the physics code really simple. The simulation code generally takes less time than the drawing itself. It also doesn't rely on jquery animate, which has a lot of extra cruft to run on older browsers and support legacy code. Writing the rendering in pure javascript helps a ton. And I think the last thing is that, when the animations respond with the velocity of your interaction it makes everything feel really smooth. Even if an animation runs at 60fps, if the way it responds to your touch feels bad, the animation won't look good.

jeremya 12y ago
Great work! Everything looks really smooth on Chrome on Android. Is there a list of targeted mobile browsers on the site or at github? I could not find it.
- coderzach 12y ago
  That's a great idea, and super important. I'm going to start working on that right now. Right now it's iOS and Android, and works on most versions I've been able to test on. It works on windows tablet, but I haven't been able to get my hands on a windows phone. Also, it works on all modern desktop browsers, IE 10+, with IE 9 support coming soon.
  - scoot 12y ago
    Windows phone: sort-of...ish: The home page title I can flick around, and it reacts to velocity and direction, but if I try and drag it, it lets go before I get very far and goes back to its default state. Similarly the pull-down menu on the home page - I can pull it down, but it goes at its own speed - I can't drag it or give it velocity. On the demos page - I can't scroll the page, so can only get to chat heads. This one, like the home page title, I can flick around with velocity and direction, but can't keep hold of it. And the background image moves too. Windows Phone 8.0.10328.78, Nokia Lumia 520 (480x800) (PS. In iOS, personally I'd find it easier if the demos opened in the same page so the back button works.)
    - coderzach 12y ago
      Thanks for the heads up, wrt windows phone, it's definitely high on my list to get windows phone support. The reason I open the demos in a new page is that it prevents interactions from triggering the back-swipe gesture in iOS 7 safari.
tfb 12y ago
> It also doesn't rely on jquery animate, which has a lot of extra cruft to run on older browsers and support legacy code. Writing the rendering in pure javascript helps a ton. Quick question for anyone passing by: Do the latest versions of jQuery still have this issue? I know 2.x dropped legacy support, so it would be interesting to see how much efficiency with things like animations has increased.
- tothepixel 12y ago
  As far as I've seen Jquery is still using an interval to animation, and not RequestAnimationFrame. This is because of glitchiness that occurs when you switch tabs during animations. http://bugs.jquery.com/ticket/9381 http://bugs.jquery.com/ticket/9381
goldfeld 12y ago
Do you think the benefits would hold true for animating SVG elements?
- coderzach 12y ago
  Yeah, they totally do.

jeremya 12y ago

Great work! Everything looks really smooth on Chrome on Android. Is there a list of targeted mobile browsers on the site or at github? I could not find it.

coderzach 12y ago
That's a great idea, and super important. I'm going to start working on that right now. Right now it's iOS and Android, and works on most versions I've been able to test on. It works on windows tablet, but I haven't been able to get my hands on a windows phone. Also, it works on all modern desktop browsers, IE 10+, with IE 9 support coming soon.
- scoot 12y ago
  Windows phone: sort-of...ish: The home page title I can flick around, and it reacts to velocity and direction, but if I try and drag it, it lets go before I get very far and goes back to its default state. Similarly the pull-down menu on the home page - I can pull it down, but it goes at its own speed - I can't drag it or give it velocity. On the demos page - I can't scroll the page, so can only get to chat heads. This one, like the home page title, I can flick around with velocity and direction, but can't keep hold of it. And the background image moves too. Windows Phone 8.0.10328.78, Nokia Lumia 520 (480x800) (PS. In iOS, personally I'd find it easier if the demos opened in the same page so the back button works.)
  - coderzach 12y ago
    Thanks for the heads up, wrt windows phone, it's definitely high on my list to get windows phone support. The reason I open the demos in a new page is that it prevents interactions from triggering the back-swipe gesture in iOS 7 safari.

tfb 12y ago

> It also doesn't rely on jquery animate, which has a lot of extra cruft to run on older browsers and support legacy code. Writing the rendering in pure javascript helps a ton. Quick question for anyone passing by: Do the latest versions of jQuery still have this issue? I know 2.x dropped legacy support, so it would be interesting to see how much efficiency with things like animations has increased.

tothepixel 12y ago
As far as I've seen Jquery is still using an interval to animation, and not RequestAnimationFrame. This is because of glitchiness that occurs when you switch tabs during animations. http://bugs.jquery.com/ticket/9381 http://bugs.jquery.com/ticket/9381

goldfeld 12y ago

Do you think the benefits would hold true for animating SVG elements?

coderzach 12y ago
Yeah, they totally do.