Jump to content
GreenSock

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

rotateX on 3D-cube is off after a while

Go to solution Solved by Carl,

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

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

Link to comment
Share on other sites

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

  • Like 3
Link to comment
Share on other sites

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?

  • Like 1
Link to comment
Share on other sites

  • Solution
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});
  • Like 3
Link to comment
Share on other sites

btw cool demo;)

  • Like 1
Link to comment
Share on other sites

 

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! :D 

  • Like 1
Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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!

  • Like 1
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.
×