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.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!