Threejs cylinder tween and GSDevTools

[ronnys 1 Likes (Newbie)]

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"});

[GreenSock 8,117 Likes (Superhero)]

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: 

 

[ronnys 1 Likes (Newbie)]

Thank you. I can find no errors in the log. I did load the following script: https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js 

Please find a codepen here:

See the Pen LoxLBa by user735621 (@user735621) on CodePen

  

Thx.

[Dipscom 2,815 Likes (Superhero)]

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?

 

Regards,

[ronnys 1 Likes (Newbie)]

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

[Dipscom 2,815 Likes (Superhero)]

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.

 

 

[ronnys 1 Likes (Newbie)]

Great, now it's working, thank you!

[Dipscom 2,815 Likes (Superhero)]

Anytime.