Package Info

"@svgdotjs/svg.js": "^3.0.16",
"svg.easing.js": "svgdotjs/svg.easing.js"

The Problem

Can someone please clarify how to correctly animate a rotation with an easing function using the svg.js v3 library?

The documentation in https://svgjs.dev/docs/3.0/animating/ gives no examples, and I have tried many different ways to get it to work, but all attempts result in the default behavior, '>' (aka the ease-out function). The plugins documentation is also not verbose (https://svgjs.dev/docs/3.0/plugins/), and provides no direction as to how utilize a plugin such as the svg.easing.js library. Installing that package does not change the result, either.

My Attempts

const mySvg = SVG(<svg>...</svg>)
const rotatable = mySvg.find('#rotatable');

rotatable.animate(3000, '<>').rotate(360);
rotatable.animate(3000, 'easeInOut').rotate(360);
rotatable.animate({ duration: 3000, ease: '<>').rotate(360);
rotatable.animate({ duration: 3000, ease: 'easeInOut').rotate(360);

// Defining an actual easing function for easeInOut
rotatable.animate({ duration: 3000, ease: function(pos) { return (-Math.cos(pos * Math.PI) / 2) + 0.5; }}).rotate(360);

// Providing the function as a string, since that's what `animate` seems to expect
rotatable.animate({ duration: 3000, ease: 'function(pos) { return (-Math.cos(pos * Math.PI) / 2) + 0.5; }'}).rotate(360);

None of the above work as desired. I have used these on a <g> and <path> element, and both result in the same behavior of just easing out (rather than easing in and out - or even just easing in).

Any help is much appreciated, as the use of this library has definitely been very helpful for all other aspects!

Even though the docs lag a clear example (sorry), you can find this:

The easing of the animation can be changed with the ease() method of the runner.

So you can call el.animate(...).ease('<>'), which should do the trick