Name: Spin Elements in 3d with GreenSock
Uploaded: 2019-03-28T22:47:55-05:00
Description: GreenSock supports all of the CSS3 3d properties, so you can freely rotate around X, Y, and Z axises with rotationX, rotationY, and rotationZ. Once that's set up, you can tweak the perspective of the element with transformPerspective.

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

GreenSock supports all of the CSS3 3d properties, so you can freely rotate around X, Y, and Z axises with rotationX, rotationY, and rotationZ. Once that's set up, you can tweak the perspective of the element with transformPerspective.

https://app.egghead.io/api/v1/lessons/greensock-spin-elements-in-3d-with-greensock/subtitles

Instructor: [00:00] To tween an element in 3D space, we'll use tweenMax to tween the box for one second, and we'll change the rotationY property. We'll have it add 180° each time we click. I'll click, and it'll spin 180° around the y-axis.

[00:22] The y-axis is up and down. The x-axis would be left and right, so it spins over the left and right axis, and then the z-axis would be a normal rotation like a clock. The z-axis goes from front to back. I'll put this back at rotationY.

[00:41] Then you could also change the perspective of these changes. If I say tweenMax set box, and I'll set the transform perspective to something like 200. Now, when I click on it, the perspective changes. You can see the corners come out a little bit more to add that perspective.

[01:03] You can really exaggerate this by bringing this number down. If I click again, we'll see that really change the perspective or make it much by subtle by upping the number, where you still see the perspective just a tiny, tiny bit there.

Spin Elements in 3d with GreenSock

Share this video with your friends

Course

Create Amazing Animations with GreenSock