Search code examples
javascriptjqueryanimationsvgvelocity.js

Velocity.js run animations with duration in parallel


In Velocity.js the default way animations (on an Object) are run is one after another in a queue. You can run animations in parallel by using different named queues or the option {queue: false}.

This works fine like this: https://codepen.io/JonasGruenwald/pen/pdpmVv

But once you add a duration option like {duration: 300}, the animations will run one after another again: https://codepen.io/JonasGruenwald/pen/XzZMYw - both with named queues and the {queue: false} option.

Is there a way to run animations with (different) durations on the same object in parallel in Velocity.js? Or is there some sort of workaround for this I can use? I'm trying to write a script to translate animations from a key frame based system to velocity so I'm looking for a way to animate different properties of an object independent from each other at the same time.


Solution

  • Answered by A. Wolff in a comment, I had made an error passing two objects with options instead of one, it works correctly using {duration: 300, queue: "a" } instead of {duration: 300}, { queue: "a" }