Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Grouping all animations into one single RAF

See original GitHub issue

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

My only concern is the use of, not sure if it’s still too early to use

Some tests: Old:

New with a single RAF:

Feedbacks are welcome.

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Reactions:4
  • Comments:8 (3 by maintainers)

github_iconTop GitHub Comments

juliangarniercommented, Jan 4, 2017

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) {

devmariocommented, Jun 30, 2016

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

var factory = new animeFactory();
var aim = new anime();
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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Group and animate a set of objects - Microsoft Support
Hold down the Ctrl key and click all the objects that you want to animate together. · Right-click the selected objects, and then...
Read more >
JavaScript rAF in a nutshell (requestAnimationFrame) - Medium
A very small intro to requestAnimationFrame function in JavaScript to achieve smooth animations. (source: requestAnimationFrame was one of ...
Read more >
Make groups of objects appear and disappear in sequence ...
First: if you need to assign multiple animations to a single shape, don't use the Animation tab for the second and later animations....
Read more >
A Guide to SVG Animations (SMIL) - CSS-Tricks
All animation elements also share another attribute: attributeName . The attributeName attribute is used to specify the name of the attribute ...
Read more >
Towards an animation smoothness metric -
We've probably all interacted with an interface which just added too ... or "rAF", tells the browser that you wish to perform an...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found