Question regarding transform perspective

[trsh]

Seems, that transform perspective respects the original position of element, not transformed one. How can (can I?) I battle this without actually changing left,top position?

 

What I want is that element is transformed to x=500, and than rotated to it's own set origin (like it would be in x=0 - not transformed).

 

Janis

See the Pen NRPgvk by anon (@anon) on CodePen

[Jonathan]

Hello trsh,

 

It's weird because your codepen title is

 

Inconsistent SkewY buy you are not using the transform skewY property. Are you trying to fake skewY?

 

So I am having a little trouble following your question. Since when I look at your example the square is just in a static position. I think to demonstrate it, you will need to uses a to() tween since I see nothing happening with you using set()

 

Any additional clarification demonstrated in your example can be helpful, thanks!

[trsh]

Hello trsh,

 

It's weird because your codependent title is

 

Inconsistent SkewY buy you are not using the transform skewY property. Are you trying to fake skewY?

 

So I am having a little trouble following your question. Since when I look at your example the square is just in a static position. I think to demonstrate it, you will need to uses a to() tween since I see nothing happening with you using set()

 

Any additional clarification demonstrated in your example can be helpful, thanks!

 

1) I did not know codepen has titles. Ignore it. It's a Fork. Sorry for that,

 

2) I updated samples:

 

This is what I want ->  visually after rotate.

But as animating left = bad FPS (we develop for webos2 - tv gear), better option is x, but this is then the result after rotate -> 

See the Pen dpPzNA by anon (@anon) on CodePen

.

 

p.s it's maybe more a CSS question/problem trough. But please don't kick me to StackOverflow, as the dudes are brutal there .

p.s.s. pleas don't suggest onComplete add left, my real life example is much complicated and I really need to use transforms only.

[Carl]

If I understand correctly, you can just move the transformOrigin over to the right more

 

var box = $("#box");
  TweenLite.to(box, 3, { x:500, y:0,   onComplete(){
  TweenLite.set(box, { transformPerspective:1000, transformOrigin:"575px top", rotationX: 40 });
  } 
});

http://codepen.io/GreenSock/pen/dpPzzL

 

However, I would probably just put your box in a parent div like #boxHolder and move boxHolder to the right (x) and do the rotationX on #box.

[trsh]

 

If I understand correctly, you can just move the transformOrigin over to the right more

 

var box = $("#box");
  TweenLite.to(box, 3, { x:500, y:0,   onComplete(){
  TweenLite.set(box, { transformPerspective:1000, transformOrigin:"575px top", rotationX: 40 });
  } 
});

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

 

However, I would probably just put your box in a parent div like #boxHolder and move boxHolder to the right (x) and do the rotationX on #box.

 

 

1) Parent box would be much change in my real project :/ 

2) The solution with 575px origin is great, but in my real project the value wont/can't be static. So this leads me to another questions:

 

a) Can I get, some-have nicely, the tx & ty transform with GSAP.

Does GSAP support dynamic values, like transformOrigin: function() { return tx + half_of_box; }

[Jonathan]

Hello trsh,

 

Regarding your question

 

a) Can I get, some-have nicely, the tx & ty transform with GSAP.

 

For dynamic values of a property inside a tween.. have you looked into using the GSAP ModifiersPlugin?

 

How to use the GSAP ModifiersPlugin:

 

http://greensock.com/docs/#/HTML5/GSAP/Plugins/ModifiersPlugin/

 

The ModifiersPlugin was introduced in GSAP version 1.19.0

 

 

Examples of use:

 

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

 

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

 

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

 

 

Hopefully that should get you in the right direction!

 

Happy Tweening!

[Carl]

Jonathan, nice idea about using ModifiersPlugin to change the transformOrigin during a tween. That could look something like this:

 

http://codepen.io/GreenSock/pen/zKxbOv?editors=0110

 

trsh, the target of your tween has a _gsTransform object that gives you access to transform values like x, y, rotation, etc. So you can use myTween.target._gsTransform.x to get the x value at any time.

 

See the pen above to see how I use it to grab the x value or this great demo from Rodrigo: http://codepen.io/rhernando/pen/FxHhm/?editors=0010

[trsh]

Jonathan, Carl. Nice. Thanks guys!