Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Michael71

Animating the transformOrigin property

Recommended Posts

Hello,

 

I'm trying to create an effect that several boxes that overlap are rotated and then each one expands from the other in a 3D way. The only way I found that does that is by modifying the transformOrigin property.

But unfortunately that property does not animate and simply goes into position.

 

Is there a better way to achieve this? (the codepen sample should illustrate the animation that I'm describing)

 

Thanks.

 

Here's the codepen again: 

See the Pen EaKPdP by netgfx (@netgfx) on CodePen

Link to comment
Share on other sites

Hello Micheal71,

 

I am away from my computer right now.. but have you tried using GSAP z (translateZ) instead of transformOrigin z-offset?

 

I noticed you are using both perspective on the parent and on your tile boxes. As a rule of thumb perspective only applies to the children the element is placed on. So your .box-container div has perspective which applies to its children, not the element itself, which wont do anything, since your .box divs have no children.

 

I would either use the perspective on your .box-container div. Or use transformPerspective ( transform: perspective(600px) ) on each of your .box divs, since transformPerspective applies perspective to the element its applied to.

 

The z property gets applied correctly in the browser, when perspective is used correctly. You don't want to mix perspective or you can have odd rendering behavior , especially in webkit based browsers like Chrome and Safari. The z property requires use of perspective or transformPerspective, to it turn on in the browser. Then you can adjust the transformOrigin and rotation to get it to your liking.

:

TweenLite.set(trans3DWrapper, {perspective:400});
// do not need perspective on each .box since trans3DWrapper has 
// perspective which applies perspective to it's children .box divs
TweenLite.set(".box", { transformStyle:"preserve-3d"});
  
// convert your transformOrigin z-offset to z property (translateZ)
TweenMax.to(".box", 0.5, { rotationY: -110, onComplete:function(){
   TweenMax.to(box1, 1,{rotationX: 10, transformOrigin:"50% 0%", z:-50});
   TweenMax.to(box2, 1,{rotationX: 10, transformOrigin:"50% 0%", z:0});
   TweenMax.to(box3, 1,{rotationX: 10, transformOrigin:"50% 0%", z:50});
   TweenMax.to(box4, 1,{rotationX: 10, transformOrigin:"50% 0%", z:100});
   TweenMax.to(box5, 1,{rotationX: 10, transformOrigin:"50% 0%", z:140});
}});

:

You might have to play with the rotation and transform-origin but if you want to animate z-depth use the translate z-axis (translateZ)

 

Resources:

perspective: https://developer.mozilla.org/en-US/docs/Web/CSS/perspective

transform perspective: https://developer.mozilla.org/en-US/docs/Web/CSS/transform

transform function: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function

 

Hope this helps! :)

  • Like 3
Link to comment
Share on other sites

I'm not an expert on perspective/perspective-origin etc, so I can't really explain how any of this works to you, but trial and error got me to this

See the Pen XJddYg by jamiejefferson (@jamiejefferson) on CodePen

which appears to be pretty close to the effect I think you're after.

  • Like 5
Link to comment
Share on other sites

Yes that is exactly what I was after, dammit I need to use timeline more... 

So the trick here was to animate the z and have "transformOrigin" defined at the start as well as "perspectiveOrigin"

 

Thanks for that!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×