Do something after every 180 degrees

Question

I have a div with some text which I would like to rotate 360 degrees for x amount of times but I would also like to modify the text every 180 degrees. how can I achieve this in Jquery or Javascript?

So far, I am stuck on this as I don't know of a way to monitor the rotation.

$('.pie_chart').css({'transform' : 'rotate(2000deg)'});

I looked at this post thinking that I could utilize the solution but it didn't work for me, or I might be just using it wrong: CSS rotation cross browser with jquery.animate()

Answer 1

This is very imprecise but it gets the idea across and should be enough to get you on the right track

function AnimateRotate(angle) {
    // caching the object for performance reasons
    var $elem = $('#square');
    var texts = ['text', 'another thing', 'one more thing', 'finally']
    var maxRotations = Math.floor(angle / 180);
    var rotations = 0;
    var lastRotation = 0;

    // we use a pseudo object for the animation
    // (starts from `0` to `angle`), you can name it as you want
    $({deg: 0}).animate({deg: angle}, {
        duration: 2000,
        step: function(now) {
            // in the step-callback (that is fired each step of the animation),
            // you can use the `now` paramter which contains the current
            // animation-position (`0` up to `angle`)
            $elem.css({
                transform: 'rotate(' + now + 'deg)'
            });


           // Here we must allow ourselves some margin for error
           // We are making 4 rotations in 2 seconds, so in theory
           // The box will be at the 180 degrees every half a second
           // but in actuality it never is at exactly 180 degree except at the star and end
           // Trial and error has shown that +6 degrees is more or less accurate, 
           // you could do some math to get a better precision

           // We don't want to update the text at 0 degrees                 
            if(now % 180 <= 6 && rotations > 0) {
                // Shift off the first text and use that for the new text
                $("#text").html(texts.shift());
                rotations++;
            } else if(now % 180 >= 177) {
                $("#text").html(texts.shift());
                rotations++;
            }

            }
        })
    };

AnimateRotate(720);