Jump to content


Question about css rotation.

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

I'm trying to rotate a div along a timeline in increments of -5 degrees every time. It's working for the most part but it seems once it gets to about -190 the rotation goes to a bunch of random numbers. It is no longer doing increments of -5. My code is looking like this so far:

buildLifecycleDots = function() {
  var addDot = '<div class="lifecycle-dot"><span class="small-circle" /><span class="large-circle" /></div>';

  for (var i = 0; i < 72; i++) {
   rotation = rotation + 5;
   var addedDot = $(addDot).css({
 WebkitTransform: 'rotate(' + rotation + 'deg)'

   t1.to($('.lifecycle-dot').eq(i), .01, {css:{opacity: 1}});

   if (i < 12) {
  TweenMax.to($('.lifecycle-dot').eq(i).find('.small-circle'), .01, {css:{backgroundColor: '#F83732'}}),
  TweenMax.to($('.lifecycle-dot').eq(i).find('.small-circle'), .01, {css:{scale: 1.8}}),
  TweenMax.to($('.lifecycle-dot').eq(i-1).find('.small-circle'), .01, {css:{scale: 1}, delay: .4})
   } else if ( i >= 12) {
  TweenMax.to($('#content-lifecycle-background'), .65, {css:{rotation: (rotation - 60) * -1}}),
  TweenMax.to($('.lifecycle-dot').eq(i).find('.small-circle'), .01, {css:{backgroundColor: '#F83732', scale: 1.8}}),
  TweenMax.to($('.lifecycle-dot').eq(i-1).find('.small-circle'), .01, {css:{scale: 1}}),
  TweenMax.to($('.lifecycle-dot').eq(i).find('.large-circle'), .01, {css:{opacity: 1}}),
  TweenMax.to($('.lifecycle-dot').eq(i-1).find('.large-circle'), .01, {css:{opacity: 0}})



Which I'm hoping to clean up a little bit. I couldn't find another way to have the -rotation start on the 12th rendition of the timeline but still be part of the main timeline with everything else.

I also couldn't find a better way to have the small and large circles do their animation one at a time but go back to their original state on the next timeline other that using the .eq(i-1). That seems to work ok but it's a little buggy.


At any rate, back to my main question, when I console log the (rotation - 60) * -1 it seems to give me the values I want from 0 to -295 but once it gets to -190 it doesn't look like it's following the same increment. Is there an issue with using the rotation like this?

Link to comment
Share on other sites

I guess no one knows what could be causing this issue? Hah.

Link to comment
Share on other sites

Can you post a sample set of files that clearly demonstrates the issue? Just zip the files and post them here (click the "More Reply Options").

Link to comment
Share on other sites

Here is a sample of the animation I'm working on. As you can see it works fine at first but once the rotation gets to about -190 it starts bouncing all over the place.

If I console log the (rotation - 60) * -1 code I'm using for the rotation it seems to be giving me the exact values I want.


Thanks for your help.


And sorry for the slow timing of the animation. Normally it's hooked up to the mousescroll so it animates much faster.


Link to comment
Share on other sites

Son of a.... ok. I just noticed there is a shortRotation call that seems to fix the problem.

Link to comment
Share on other sites

I actually did find the root of the problem and it has to do with the fact that the matrix values are always reporting rotational data inside the 180 to -180 range and there are some rounding issues with very small numbers and matrix math that can make things seem like they're a little off which made the tweens interpret the starting rotational values as between 180 and -180 even if you had a previous tween exceed that range (and even that only happened sometimes). I implemented a fix, though, that should work around that. If you download the latest version of CSSPlugin, you should see the issue is resolved, but the shortRotation solution you found works too. Glad you found that.


Sorry about any confusion there.

Link to comment
Share on other sites

Sorry about any confusion with my question. I wasn't quite sure how to explain what was happening hah.

With the shortRotation, my animation is working exactly how I want it now. If you would like to check out what I'm working on and give me your opinion, you can find it here.


I don't have any of the links to the sub pages hooked up but I've been working on all the animations for this homepage. It would have been such a pain to do without this plugin hah.

  • Like 1
Link to comment
Share on other sites

Looks amazing! And the performance seems quite solid too. Nice work. Please do let us know when you launch so that we can promote it a bit and add it to the showcase.


I definitely like the rotation animation in its context. Works great.

Link to comment
Share on other sites


The only thing I'm still a little unsure about the rotation animation is the larger red circle that shows up for a bit. I like how it looks moving forwards but I don't like it moving backwards. For now, I need a break from the homepage and am going to start adding animations on some of the subpages hah.

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.