Easy CSS-like animations for BabylonJS

As a professional HTML programmer (LOL) it always seems too hard to me when I need to create some animation with BabylonJS even when animation as simple as possible.
So I created the tiny library that make animations in BabylonJS close to well known CSS transitions.

Code example:

EasyPropAnimation.run(camera, {
  position: new Vector3(5, 7, 5),
  target: new Vector3(1.1, 0.16, 3.68),
  transition: 'all 1s ease-in-out',

Also you can use time in ms and different transitions for different props, and use simple arrays instead of vector’s instance:

EasyPropAnimation.run(camera, {
  position: [-1, 4, 3],
  target: [1.2, 1.47, 5.8],
  transition: 'position 500ms ease-in-out, target 5s ease-in',

Or animate single value from a vector:

EasyPropAnimation.run(camera, {
  'position.y': 10,
  transition: 'all 300ms ease-in-out',

Here is the library:


Very cool! :smiley: This topic should probably go in the #demos section instead of #questions through?

I would even put this in tutorials and tips. And in fact, I would even add it to the plugins. Of course my opinion only.

Yep, my mistake, thank you for pointing it out. I’ve move the post to the #demos.

1 Like

There is probably a reason to mention third-party developer solutions in the documentation. This could motivate developers to share their work, and the readers of the documentation will have a broader view of the topic.
Perhaps it could be formatted as links to the playground, in rich link format:

But, by other hand it probably too hard to support this links. Maybe it can be an auto imported feature that looks to github solutions by topics.

That’s an interesting idea, let me ping @PirateJC about it :smiley:

I think it wouldn’t be too hard to support, we could have some kind of process where the third-party devs can submit their work and it would automatically add it to the relevant page. Maybe some kind of form or github issues process :thinking:

There are a little update in this library.
Now we can animate with bezier transition:

transition: 'all 1s cubic-bezier(0.42, 0, 0.58, 1)',

And animate the scene properties, for example:

scene.imageProcessingConfiguration.exposure = 0;

function onSceneReady() {
  EasyPropAnimation.run(scene, {
    'imageProcessingConfiguration.exposure': 1,
    transition: 'all 1s ease-in-out',