Jump to content
Search Community

perspective 3d Animation Problems and "restart" behaviour

sensenel test
Moderator Tag

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

Hi folks, 
unfortunately i ran into some weird matrix3d behaviour and i realy hope somebody can help me out ^^ 

i tried to minimize my problems in this pen to some real basic level.

Please first hover with your mouse over those color boxes, because this transition is exactly what im trying to achieve when a certain button has been clicked  - after clicking my "do-it" button now you'll see the whole mess i'm in right now ... 

Basicly my first question before this pen was just: how to shortcut this final z-axis movement of every layer? - because within a timeline the parameter for movement on the x - as on y - axis is just e.g. "... {y: 123} ... " etc - so having this whole matrix3d syntax around seems very unusual?
As i was looking for a solution i found this https://greensock.com/css3
At the point where it is about 3d transforms with that grid - exactly that is what iam looking for; unfortunately i wasnt able to catch some code via dev-tools in my browser 

OK, another thing i noticed in my project where this detail belongs to: if i click the "do-it" again after i reversed it, the whole animation not just play's once, it plays twice? And it adds one more iteration to the count of repeatings every time i reverse and play it again until i reload the whole thing ... 
I tried already things like kill(), killAll() or clear() ... but it seems i missed something else? 

Thank you for any help! :-)

See the Pen xXKVEB by SENSENEL (@SENSENEL) on CodePen

Link to comment
Share on other sites

Thanks for the demo.

I have no idea how to read those complex transform strings so I always use the short-hand properties like rotationX, rotationY, z, x, y, etc.

TweenLite.set("#boxWrapper", {rotationY:-45, rotation:20})
tl.to(box3, 0.5, {z:50})
  .to(box2, 0.5, {z:150}, 0);

 

by giving the #boxWrapper a css property of transform-style:preserve-3d; you can rotate it however you want and then just adjust the z of the inner boxes.

 

I'm not sure I understood the entirety of you question but hopefully the demo below helps

 

See the Pen OxLpNY by GreenSock (@GreenSock) on CodePen

 

  • Like 2
  • Thanks 2
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...