Library independence. about anime

[SaulDoesCode]

perhaps a helper function could be exposed to be run with in an external opt-in loop as you suggest.
Inside the requestAnimationFrame is abstracted into an engine object. It would not be hard to make the actual content that needs to be looped into a single function and either run it in the default engine.play(); but expose it via maybe anime.update() using getter that would automagically swap to the external loop. Only problem is that all the animations run in a single requestAnimationFrame one would have to abstract some more to make the exposed looper function run only the desired animation otherwise it might get complicated.
This is the internal requestAnimationFrame loop.

  var engine = (function() {
    var play = function() { raf = requestAnimationFrame(step); };
    var step = function(t) {
      if (animations.length) {
        for (var i = 0; i < animations.length; i++) animations[i].tick(t);
        play();
      } else {
        cancelAnimationFrame(raf);
        raf = 0;
      }
    }
    return play;
  })();

  // one could add very over simplified function to simply take over engine internally
 Object.defineProperty(animation, 'update',{
        get : function() {
                engine.stop(); // engine.stop would have to be implemented but isn't too hard
                return function(t) {
                     if (animations.length) for (var i = 0; i < animations.length; i++) animations[i].tick(t);
                 }
          }
});
// then use it in your own looping system as 
anime.update(yourTick);

I'm going to play around with the concept and see what is possible. I maintain a fork of anime here

[ngokevin]

You can tell anime to not make an RAF.

Set autoplay: false and use .tick(t) https://github.com/ngokevin/aframe-animation-component/blob/master/index.js#L78

[ngokevin]

Working on A-Frame, a WebVR framework. Just looking for a way to hook into the existing game loop (without introducing anime into the core library), and a way for anime to not create any requestAnimationFrames. Like tween's global TWEEN.tick method.

Thanks for the library though! It exploded. If I get around to it, I can see if I can help out.

[rohan-deshpande]

Understand that this is closed, but this would be an excellent feature, I'm currently using anime in my threejs powered game engine but I am about to consolidate all raf calls into the game loop and, if I understand correctly, this is impossible with anime. A real shame because I wouldn't like to drop anime if I didn't have to. Once I do the consolidation I'll have a look under the hood and see what I can do.

[ngokevin]

Actually, looks like that tick() I had was a no-op :/

[juliangarnier]

Maybe myAnimation.seek(); can do the trick?
But it's limited, and will not works with loop animations:

var myAnimation = anime({
  targets: 'div',
  rotate: 180,
  autoplay: false
});

var raf = 0;
var speed = .5;
var loop = function() {
  myAnimation.seek(raf * speed);
  raf = requestAnimationFrame(loop);
}

requestAnimationFrame(loop);

An other option is to use anime as your main RAF:

var gameLoop = anime({
  update: function() {
    // Do stuff
  },
  duration: Infinity
});