Jump to content
Search Community

Animating the transformOrigin property

Michael71 test
Moderator Tag

Go to solution Solved by jamiejefferson,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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

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.
×
×
  • Create New...