Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Threejs cylinder tween and GSDevTools

Recommended Posts

Hi, I have set up two cylinders with threejs and have added these two Geometries to TimelineMax, up to here everthing is working fine. When adding GSDevTools.create() the default GSDevTool play control is shown, but my threejs scene and TimelineMax animation is no longer displayed. Any help appreciated. Thx


const disk = new THREE.Mesh(
                  new THREE.CylinderGeometry(2, 2, 2, 10),
                  new THREE.MeshNormalMaterial({ color: 22222280 })
                disk.position.set(-70, 20, 0);
const disk1 = new THREE.Mesh(
                  new THREE.CylinderGeometry( 2, 2, 2, 10),
                  new THREE.MeshNormalMaterial()
                disk1.position.set(70, 10, 0);
var tl = new TimelineMax({id: "slider"})
                 tl.to(disk.position, 3, {x: 5, y: 10, z: 3, id:"disk"}, 0)
                 .to(disk1.position, 3, {x: 10, y: 15, z: 4, id:"disk1"}, 10);
GSDevTools.create({animation: "slider"});
Link to comment
Share on other sites

Hm, sorry to hear about the trouble. It's really difficult to troubleshoot blind - can you provide a reduced test case, perhaps in codepen? Are you getting any errors in the console? Did you load the GSDevTools file? 


To learn how to create a codepen demo, see: 


Link to comment
Share on other sites

Hi Ronnys,


I have tested your example pen and have found it does work with GSDevTools. I did have to include the GSDevTools to your pen as there was none there.


Can you confirm that you have included the GSDevTools script in your original test case?



  • Like 1
Link to comment
Share on other sites

Hi Dipscom,


thank you, among others I have included following link: https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js

Please also see the screenshot. Are there any other scripts I should consider?


Thx, regards


Link to comment
Share on other sites

Yes Ronnys you need to add a separate script for the GSDevTools.


In CodePen you use the following special url: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/GSDevTools.min.js?r=100


For your local projects, you will find the GSDevTools in your GSAP downloadble folder. Look into the 'src' folder and depending on how you are building your site/application, it will be in the 'bonus-files-for-npm-users' or it will be in 'utils' subfolder or the 'minified' and 'uncompressed' folders.



  • Like 2
Link to comment
Share on other sites

Great, now it's working, thank you!

Link to comment
Share on other sites


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.