BABYLON and GSAP. makes sense? examples?

Questions
1

Hi,

I just came across GSAP (https://greensock.com/) and the animation tool looks simpler and more powerful than the babylon animation tools (ive seen three.js examples for transformations & material values, so it should also work on babylon). and mastering it could lead to me learning how to do cooler UI´s for 3D apps.

  1. does someone use babylon with GSAP? what do you think in terms of advantages and disadvantages?

  2. Probably the best would be to tried it myself :smiley: . but i dont know how to start? I made a simple playground where I include the gsap library, and do something on click on the sphere.how to add a simple animation there? i havent found any (new) babylon example out there.
    https://www.babylonjs-playground.com/#UQ41KC#2
    thanks!

2 Likes
2

I don’t personally but I agree this seems fun

2 Likes
3

in case someone is interested in trying out…download the playground and load gsap cdn script before the babylon scripts. and then gsap should work.

for example:
gsap.to(sphere.rotation, {y:12, x:5, duration:4, repeat:-1, yoyo:true})
gsap.to(sphere.position, {x:5, duration:4, repeat:-1, yoyo:true})
gsap.to(sphere.scaling, {y:0.5, duration:2, repeat:-1, yoyo:true})

looks cool!

1 Like
4

Note that if you ever want to sell what you are creating, you will need to pay them for a yearly business license:

https://greensock.com/club/

4 Likes
5

Excellent catch @adam

6

good to know!
this would be the exact explanation:
" You may use the code at no charge in commercial or non-commercial apps, web sites, games, components, and other software as long as end users are not charged a fee of any kind to use your product or gain access to any part of it. If your client pays you a one-time fee to create the site/product, that’s perfectly fine and qualifies under the “no charge” license. If end users are charged a usage/access/license fee, please sign up for a “Business Green” Club GreenSock membership which comes with a comprehensive commercial license. See Club GreenSock - GreenSock for details."

7

Adam is correct. I saw that license a few years ago.

A working alternative was found:

Have a look at this post.

Babylon~cinematics Demos and projects

In short, it reduces the need to this:

BABYLON.anm({from},{to},step =>,done:=>});

:eagle:

8

If You just need easing function You can use:

and use this file: https://github.com/ai/easings.net/blob/master/src/easings/easingsFunctions.ts

With this, I was able to recreate gsap functionalities by combining lerp and ease functions.

function lerp( from, to, percentage) {
return from+ percentage* ( tp - from)
}

1 Like
9

Also if you need a scrolling animation solutions there is my library scroll.js - Basic Example
Which is pretty easy to use, figured if we were necroing this post might as well mention this :sweat_smile:!