Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
1×
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.

Autoplay

    Control the Shared 3d Perspective of Multiple Elements with GreenSock

    John LindquistJohn Lindquist
    greensockGreenSock

    By default, elements use their own perspective, so if you rotate multiple elements on the page the perspective will seem a bit off for each of them. The solution is to set the perspective on the container element, then each child element will follow the parents' perspective.

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Discuss

    Discuss

    Transcript

    Transcript

    Instructor: Working with 3D, it's also super important to be aware of perspective. If I take the parent element and tweenMax setDocumentBody, which is the parent element of my divs, and I'll set the perspective to something like 100.

    Hit save here. When I click, you'll see a fairly large perspective on that. I can bring that down and click. You'll see a huge perspective on that, meaning that the vanishing point in way in the back. Now, the vanishing point is relative to the parent container and not this element itself.

    To demonstrate that, let's create a bunch of elements, so arrayFromLength. We'll do about 30 and map this to documentCreateElement, div. Now, we have 30 divs to work with, and we can just forEach on these.

    Each of these can be a box. With these boxes, we essentially want to do this stuff and delete that, hit save here. Now, all these boxes are lined up and smashed together. We'll restyle a couple things, we'll get rid of this, and instead say flex wrap is wrap. We'll add a border of five pixels solid black.

    Now, when I click on each of these, you can see some crazy perspective being applied. I'm going to add overflow hidden and get rid of that scroll bar, too. That's flashing and annoying me. I'll click, and you can see that crazy perspective being applied to each of these.

    If I bring that back up to something more reasonable, like 200 and click, you'll see less perspective, but it is perspective based on the parent container, rather than the individual element. Also, if you ever see something get stuck like this, and you're using the plus-equals, a trick you can use is say tweenMax is tweening. I'll check the box.

    Then you can just say if it's not tweening, then apply that tween. That will just prevent that tween from triggering if it's not done yet. If I click a bunch of times, it'll never get stuck there. It'll complete before it goes again.

    If I didn't have that, like I did before, and I clicked a couple times, you'll see it get stuck in weird spots. We'll add that back in, so it doesn't. Then to tweak this, just to really show off the perspective, I'm going to document add event listener mouse move.

    Grab the event, and now, I'm just going to take this, where I set the perspective, and set it to event.x. Then instead of tweening these, I'm just going to set the box rotation to something like 30°. You can see, they're all rotated a little bit, but if I move my mouse over here, you'll see the perspective jump up real huge.

    As I move my mouse to the right, it settles down back to what you would think 30° looks like. Again, this is all 30°, it's just the matter of perspective. If I drag and make the browser wider, it's even more pronounced.

    Go all the way to the right, and back to the left, where that perspective starts to get towards zero. You can see where that vanishing point is, because they're all trying to reach that vanishing point for the perspective.