Noob - Replicate example (NYSM2 movie website)

[TeddyBrown 0 Likes (Newbie)]

Hello everyone, 

I am new to this place and I'm quite new to the GSAP world. 

 

I'm very excited about working with this library and watching the examples I was really impressed with this one.

 

I have seen that there is a huge use of three.js library and I was wondering about how three.js and GSAP works togheter.

 

For example, the camera movements are just made with three.js or there is a way to replicate that animation only with GSAP or both?

 

I'm just looking for some hints! 

 

Thank you in advance!

 

P.S. If I'm in the wrong section or off-topic, please forgive me!

[Jonathan 5,176 Likes (Superhero)]

Hello TeddyBrown and Welcome to the GreenSock Forum!

 

When it comes down to it GSAP can basically tween any javascript object or property. That is why it can be used to animate CSS, SVG, Canvas, or WebGL which is what three.js is.

 

So if any object or property in three.js is numerical, then GSAP can interpolate the start and end values. Whether that is animating the camera movement, animating meshes, primitive shapes, vertex points, etc.

 

Here is an example of someones tutorial of using TweenMax to animate a three.js camera

 

http://nightlycoding.com/index.php/2013/01/3d-camera-control-with-threejs-and-tweenmax/

 

Maybe others can share their experience with GSAP and Three.js

 

Resource:

GSAP Docs: http://greensock.com/docs/#/HTML5/