Animation API

Into the Graphane methods we can use .animateTo() for every SVG elements. This method accepts as parameter an object with attributes as keys and the target values.

Optionally, we can include a transition duration in milliseconds as a second parameter. By default, the animation duration is 200 milliseconds. If you pass a time value 0, the change is executed immediately, and the animation is not displayed.

Keyframes

If we want to define several intermediate steps within an animation, we can pass an array of objects with each step we want the animation to perform.

Additionally, we can include an offset key with values between 0 and 1 to indicate when we want each step to be set.