search

Pixofield / keyshapejs

KeyshapeJS JavaScript Animation Library
MIT License
45 stars 12 forks source link

Difference between keyshapejs and web animation? #2

Open jpzwarte opened 5 years ago

jpzwarte commented 5 years ago

I’m curious if keyshapejs has any unique functionality, or if it would be possible to use the web animation API? That way, you would not need a custom JS library?

See: https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API https://developer.mozilla.org/en-US/docs/Web/API/Element/animate

Pixofield commented 5 years ago

Functionally, there isn't a huge difference. Motion paths are not directly supported by Web Animations API, but they could be implemented with the CSS offset-path property.

The Keyshape app can't export JavaScript with Web Animations API. Also, the current versions of Edge and Safari don't support Web Animations API. For best browser compatibility, it's the best to use KeyshapeJS.

jpzwarte commented 5 years ago

Only the “old” Edge doesn’t support it yet, and there’s a polyfill available for that. See https://caniuse.com/#feat=web-animation

Might be interesting to support web animations in the near future, so you don’t have to load keyshapejs.

Pixofield commented 5 years ago

A new export plugin for SVG with Web Animations is a good idea. Thanks for suggesting it!

It most likely requires some changes to the Keyshape app, so it has to wait until the next Keyshape version.