Setup GreenSock as a Module with Parcel

Animate and Center an Element to a Click Event with GreenSock

Rotate an Element Based on Previous Values with GreenSock

Create Animation Steps with GreenSock's Timeline

Pause or Resume an Animation by Checking isActive with GreenSock

Manually Control the Animation with progress in GreenSock

Animate From a Variable Point with from and fromTo in GreenSock

Control an Array of Elements with the Same Animation in GreenSock

Stop Animations with killTweensOf and killAll in GreenSock

Animate Between CSS Classes with GreenSock

Spin Elements in 3d with GreenSock

Control the Shared 3d Perspective of Multiple Elements with GreenSock

Loop a Tween Forever Using Yoyo and Repeat with GreenSock

Create Amazing Animations 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.

Rotate an Element Based on Previous Values with GreenSock

Share this video with your friends

Course

Create Amazing Animations with GreenSock