rotateX on 3D-cube is off after a while

[LilaQ]

Hey guys,

 

I'm currently trying to make a 3d-watch, digital style.

 

I'm having two problems:

 

1)

rotateX: "+=90" and rotate "-=90" both rotate in the same direction

 

2)

I want to rotate the cubes 90 degrees, so the side with the correct second / hour / minute is shown. But after a while, the rotation is completely off and the cubes are shown 90-degree-ish, which gets worse the longer you let the script run

 

I managed to make a CodePen of the project, please have a look at it yourselves.

 

Thanks in advance for your help!

 

Best regards,

See the Pen YPqEGM by anon (@anon) on CodePen

[Diaco]

Hi LilaQ 

 

Dont forget that GSAP use RAF ( request animation frame ) .

 

there's a little issue with cdnjs and although your CodePen should be grabbing the /latest/ version... it is not. 

Try using this url to 1.15.0 ( this'll solve your first problem ) :

 

https://cdnjs.cloudflare.com/ajax/libs/gsap/1.15.0/TweenMax.min.js

 

and second issue ; i think that come from your logic , as you can see in the codepen , GSAP never lose the degree :

 

See the Pen xbVPLy by MAW (@MAW) on CodePen

[LilaQ]

Hi Diaco.AW

 

thanks! The first issue is solved

 

But the second one still exists, when I let the script run for 1-2 minutes, you can see that the box for the seconds is kinda crooked and did not rotate in full 90 degrees steps.

 

It may very well be that it is my code / logic that is the problem here, but I can not seem to find the culprit.

 

Edit:

It seems the Tween sometimes gets called while it's still tweening, thus adding 90 degrees to the current rotation value, which leads to the obscure final rotation value. But I'm confused why it would get called while tweening, the Timeout only runs once a second...

 

Any ideas?

[Carl]

It seems the Tween sometimes gets called while it's still tweening, thus adding 90 degrees to the current rotation value, which leads to the obscure final rotation value. But I'm confused why it would get called while tweening, the Timeout only runs once a second..

 

 

Yes, you're assumption is exactly right. setTimeout is not accurate enough for this. Minor drifts in timing are going to make your tweens run funny.. as you have seen.

 

2 more options:

 

1: use TweenLite.delayedCall(duration, function) instead to fire a function every second and have it perfectly synched with the entire tweening engine: Look here: http://codepen.io/GreenSock/pen/jEqaYwI left that running for 20 minutes and its perfectly locked in. no time drift

 

2: place an onComplete callback on your tween that basically runs whatever logic you need and re-creates a new tween

TweenLite.to(someCube, 1, {rotationX:"+=90", onComplete:runLogic});

[Carl]

btw cool demo;)

[LilaQ]

 

Yes, you're assumption is exactly right. setTimeout is not accurate enough for this. Minor drifts in timing are going to make your tweens run funny.. as you have seen.

 

2 more options:

 

1: use TweenLite.delayedCall(duration, function) instead to fire a function every second and have it perfectly synched with the entire tweening engine: Look here: 

See the Pen jEqaYw by GreenSock (@GreenSock) on CodePen

I left that running for 20 minutes and its perfectly locked in. no time drift

 

2: place an onComplete callback on your tween that basically runs whatever logic you need and re-creates a new tween

TweenLite.to(someCube, 1, {rotationX:"+=90", onComplete:runLogic});

 

A w e s o m e !

 

Thank you so very much! The business license was SO well spent money, you guys deserve every single cent of it!

 

 

btw cool demo;)

 

Thanks, means a lot to me!  

[LilaQ]

I cleaned and finished the script (had some synchronizing issues with the minute- & hour-change), works flawlessly now from what I observed.

 

I made a CodePen for anyone who is interested

 

See the Pen PwNOvb by anon (@anon) on CodePen

[Carl]

Hi LilaQ

 

Thanks for the kind words. Always glad to hear from happy customers. 

Be sure to check out our new DrawSVGPlugin, http://greensock.com/drawSVGit was made for our members.

 

The clock is looking real good now!

 

Carl

[LilaQ]

I stumbled across the SVG Plugin a few days ago and was absolutely astonished, that was exactly what I was looking for one day earlier. At this moment I am experimenting with it

 

Thanks a lot for the continuous development and optimizing!