Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.


    Rotate an Element Based on Previous Values with GreenSock


    Rotating an element with GreenSock is as simple as changing the rotation property using TweenMax. But there's also a hugely convenient trick using the += or -+ syntax as a string that allows you to adjust based on the previous value of the rotation.



    Become a Member to view code

    You must be a Pro Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    orLog In




    Instructor: Create a div with an id of box. Then in our index.js we can import from GSAP, and bring in TweenMax. We can use TweenMax to set some things on the box. Let's select the box and pass in object, we'll set the background-color to green, the width to 50 pixels, the height to 50 pixels, and go ahead and hit save. You'll see we get a green box over here. We'll scoot it over, we'll say x is 50 pixels, and y is 50 pixels, hit save and you can see that scoot that over.

    Now to rotate the box we're going to set up a listener on the document. Just say document.addEventListener("click"), and in this event handler we can use TweenMax again to tween, so we'll use that same box, and we'll say .5 seconds as the duration, and then the thing we want to change is the rotation. So let's just start with a rotation of 30 and see what happens. Hit save, and come over here and click.

    You can see it rotates 30 degrees. If I click again, nothing happens. The syntax I can use is if I wrap this in quotes and say +=, now when I hit save and I begin clicking, you'll see it will continue to rotate 30 degrees every time I click.