Simplest 3D Babylon Animation with gsap 3

[MouseOverYou 2 Likes (Newbie)]

HI,

I am 3D Artist interested in 3D aplications for the web, so I started using Babylon js some months ago. It is cool, but the animation process its kind of lots of code. So i came across GSAP and I  wanted to give it a try. Sadly I am kind of a newbie on WebDevelopment and I dont know how to start  I couldnt find any (new) example with babylon. I made a playground on babylon with the latest gsap cdn, Can somebody help me making any kind of super simple animation? 

 

I made a babylon playground where I am appending the gsap library and getting the sphere on a click:
https://www.babylonjs-playground.com/#UQ41KC#2

[Carl 10,824 Likes (Superhero)]

I know nothing about babylon or the playground so not sure how to fix things in your playground. it seems gsap is undefined when your scripts run.

 

GSAP changes numeric properties of objects so it can work fine with Babylon.js or any js object that has numeric property values.

 

It appears Babylon objects have rotation objects, scaling objects, and position objects so to tween the x and y values of those it looks like:

 

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

 

i forked someone's codepen demo of a babylon cube and added that code to it:

 

See the Pen ExaNJpB?editors=0010 by snorkltv (@snorkltv) on CodePen

 

Your biggest issue seems to be getting gsap to load and be globally accessible before your scripts run. perhaps someone else can help with that.

 

 

 

[MouseOverYou 2 Likes (Newbie)]

thanks for the answer! so once I am sure gsap is loaded I can load babylon right?...and then i can use gsap.to(blablabla..)
 

[MouseOverYou 2 Likes (Newbie)]

well yes I run a babylon example locally and added gsap cdn  before the babylon cdn, stuff and...works! thanks! ill be experimenting