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.
Instructor: [00:00] 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.
[00:48] 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 TweenMax.to 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.
[01:18] 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.