Grouping all animations into one single RAF

Right now every anime instance will create a new RAF. I started doing some performance test with a single RAF, and the results are really good (up to 20/30% faster when a lot of animation are running simultaneously). You can test it here https://github.com/juliangarnier/anime/tree/single-RAF.

My only concern is the use of performance.now(), not sure if it’s still too early to use http://caniuse.com/#feat=high-resolution-time.

Some tests: Old: http://codepen.io/juliangarnier/full/545d66779d81ee68062bc8db018f6ee1/

New with a single RAF: http://codepen.io/juliangarnier/full/f56c939864ea6b1b6efa8726e7ea8119/

Feedbacks are welcome.

[juliangarnier]

I think it’s actually possible to do what you described. Anime expose the .tick() function of an animation, and you can do things like this :

var myAnimation = anime({
  targets: '.particule',
  translateX: 100,
  autoplay: false
});


function render(time) {
  myAnimation.tick(time);
  requestAnimationFrame(render)
}

render();

[devmario]

If you use single RAF, I have an idea For example

var factory = new animeFactory();
var aim = new anime();
factory.add(anim);
factory.tick(timeElepse/* avail negative */);

We can create slow-motion animation and invert animation, as applied to all animation on browser.

This is my cpp animation manager. https://github.com/devmario/CppTweener/blob/master/tween.h https://github.com/devmario/CppTweener/blob/master/tween.cpp