Easy CSS-like animations for BabylonJS

Demos and projects
,
1

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:

7 Likes
2

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

3

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.

4

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

1 Like
5

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:

image
image1504×841 56.9 KB

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.

6

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:

7

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',
  });
}
2 Likes