Web Animations API

Questions
1

Hello,
I’m looking for some examples of integration between threejs and the Web Animations API (here is more information about https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API )
Has someone already experimented with this API within threejs? I found a lot of examples of the integration between threejs and GSAP or tweenjs, but nothing with the Web Animations API. I was just looking for a simple implementation of a cube rotation for example. Thanks the community in advance for any information.

2

I guess one problem is the fact that the API is still experimental and thus not optimal supported in browsers, see: https://caniuse.com/#feat=web-animation

Right now, I would recommend GSAP 3 for animation related tasks.

1 Like
3

Thanks for the feedback. You’re right, the Web Animations API is indeed experimental and not so well supported yet. I just learned about it and was curious about any possible integrations with threejs. In fact, GSAP 3 is a very good solution for animation related tasks. Looking forward to seeing the future of this API.

4

i don’t think it will ever be able to animate threejs and i still doubt that web animation will reach critical mass. like so many specs before that have struggled to survive because people don’t use them, this one seems to be one of them. being able to animate more than just divs is precisely the point.

if you’re a react user, you can use anything in the eco system to animate threejs. react-spring for instance: https://codesandbox.io/s/r3f-react-spring-basic-demo-8ckyf in plain threejs i would use gsap as well.

5

Hi,
it’s great to see people interested in this topic and thanks for the react example. Yes, I’m also using react and your example is very helpful to me.
it’s certainly not a simple mission for a new spec to become popular, especially if there’s a lot of other libraries that do the animation job very well like gsap. I thought, first of all, that the Web Animations API was a very interesting solution mainly because I don’t like the css way of dealing with animation and also, I try to keep the control of the interface elements in the JS code when possible.