Animate element over a curve with element.animate()

Question

I need to animate translations of elements over paths such as the one shown below:

Right now I am using a requestAnimationFrame callback that calculates the position on a De Casteljau curve and then sets the element position via an inline CSS translate3d() .
This works, although it performs worse and is very verbose when compared to CSS animations.

Web Animations seem like a good new option to animate elements when the destination is only known at runtime, but I cannot find anything to modify the animation between the start and end point.

Is it possible to do the above using element.animate() , or is it no more customisable than a CSS animation?

Answer 1

With Web Animation API you could use motion-path property:

More information and live example here:

http://danielcwilson.com/blog/2015/09/animations-part-5/

https://codepen.io/danwilson/post/css-motion-paths

https://webdesigner-webdeveloper.com/weblog/exploring-web-animations/