Grouping all animations into one single RAF about anime HOT 8 CLOSED

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

from anime.

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();

from anime.

@juliangarnier
How about this
http://jsfiddle.net/devmario/9d8orpg5/12/

from anime.

@devmario It's an interesting idea, but I cant think of any real use cases of this.
Looks cool though.

from anime.

Creating multiple RAFs is bad for performance. I was using it for 3D/VR, but had to switch back to Tween.js because I wasn't able to control when the animations ticked.

from anime.

Anime only creates one single RAF, and stop ticking when there is nothing to animate.
I also use the update() callback whenever I need a RAF call, like this:

var loop = anime({
  update: function() { do stuff.. },
  duration: Infinity
});

loop.play();
loop.pause();

That way I'm not creating extra RAF, and I can control when something is running or not easily.

Regarding performance, V2 will considerably improve speed on complex animations, around 1.5x faster. (You can try it here: https://github.com/juliangarnier/anime/tree/v2.0)

from anime.

Awesome! It won't work for my cases though. For 3D/VR scenes, there's already an existing RAF (the render loop), and for those cases, we want to control the animation to update only once per frame. Something like:

render: function (time) {
  // ...
  if (notPaused) {
    anime.tick(time);
  }
  // ...
}

If I pause the scene, I'd want the animation to automatically pause as a result of not "ticking" it.

from anime.

Thanks, that looks perfect! Will give it a try.

from anime.