Jump to content
Search Community

Noob - Replicate example (NYSM2 movie website)

TeddyBrown test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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!

Link to comment
Share on other sites

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




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



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

  • Like 2
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...