Jump to content
Search Community

Simplest 3D Babylon Animation with gsap 3

MouseOverYou test
Moderator Tag

Recommended Posts


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 :D 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:

Link to comment
Share on other sites

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.




  • Like 5
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...