Rotate an Element Based on Previous Values with GreenSock

John Lindquist
InstructorJohn Lindquist
Share this video with your friends

Social Share Links

Send Tweet
Published 6 years ago
Updated 4 years ago

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.

egghead
egghead
~ an hour ago

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

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

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!

Markdown supported.
Become a member to join the discussionEnroll Today