Change Tween origin after TweenMax.set()

[Donatello666]

Hi,

 

i have this problem:

 

on pageload i am positioning  a few containers on specific coordinates (x, y). Now i want to show them up by fading in and by moving from e.g. y: -10. But, because I positioned the elements with TweenMax.set(), the origin is 0,0 (top left corner). Can I set the origin for tweening to the position i gave them per TWeenMax.set() ?

 

THX

[Jonathan]

Hello Michelangelo666, and welcome to the GreenSock Forum!

 

Can you please setup a reduced codepen example. Since it is difficult to understand what you are trying to describe without seeing your code and your code in action.

 

 

 

This way we can properly help you!

[Donatello666]

i made a codepen-demo.

See the Pen BZKeZE by Michelangelo666 (@Michelangelo666) on CodePen

can´t believe it. It works like i want it to, but not in my project.

 

in short: the tranformOrigin / transformerPerspective seems to be ever 0,0 (in the upper left corner ) of the parent. cant change it.

 

I`ll make a short clip to show my problem live in action, because it is too much code to extract it to a codepen-demo.

[Donatello666]

Here is a short movie-clip where you can see my problem.

 

I'm tweening the panel with "TweenMax.from( panel, 3, { rotationX: -60 } )". As soon as i dragged it to another position or set the position with TweenMax.set( panel, { x: ..., y: ... } ),   it is stretched or what i think, the origin for tweening is still top left...

 

demo-1.mp4

[Jonathan]

Hello @Michelangelo666

 

I'm a little confused. You say that the transform-origin and transform: perspective() is always 0, 0 but i don't see anywhere in your codepen you setting the transformOrigin or transformPerspective.

• Default for CSS transform-origin is 50% 50% 0. (transformOrigin)
• Default for CSS transform: perspective() is none. (transformPerspective)

So it seems that in your project you have some type of conflict that is being applied. Try and inspect your project and see what might be causing this since if GSAP was adding transform-origin it would show up in the inspector on the element. Since i see transform: translate3d() being applied and no transform-origin or transformPerspective. If GSAP was using transform matrix() or matrix3d() it woudl include transform-origin and transform-perspective internally within the matrix values. But only transform: translate3d() is being used and no transformOrigin or transformPerspective is being applied in your codepen.

 

Also keep in mind that transformOrigin or transformPerspective are not inherited so they must be applied directly to the element.

 

It seems you have a lot of other stuff happening in your project so that is where the issue is happening with some other conflict that is not GSAP. At least that is not reflected in your codepen. And there is no way for us to know what your MP4 video CSS and JS code looks like under the hood.

 

[Donatello666]

Hi Jonathan,

 

1. Sorry for my bad englisch

2. big THX for you reply

 

It is the transform perspective. I globally set "CSSPlugin.defaultTransformPerspective = 800;". the ohter stuff is ok, ther is no conflict. I've updated my Codpen. So what i want is, that the panels perspective is like if it is in the top left corner of the red container, no matter at which position it is. If you drag the panel to the very right, its perspective is strange (?) 

 

whats wrong with my way of thinking... ?!

 

See the Pen BZKeZE by Michelangelo666 (@Michelangelo666) on CodePen

[Jonathan]

The perspective is going to weird because you are using a value of 300. Keep in mind that with perspective, the lower the value the more extreme or stronger the perspective will be. Try a value of transformPerspective like 1000 or 2000. You can also adjust the persepective-origin if you need to tweak  the vanishing point more away from the default of center.

 

Also if you want to always force transform-origin to be 0, 0.. then just set a CSS rule that will force what you like. or set it via GSAP.

 

TweenMax.set(".panel", {transformOrigin:"50% 50%"});

 

 

[Donatello666]

HI Jonathan,

 

i tried to set the transformOrigin, even onClick ( updated codepen ). It still doesn't work.If the panel is not on its origin position, the perspective's origin seems to be 0,0.

 

Codepen:

See the Pen BZKeZE by Michelangelo666 (@Michelangelo666) on CodePen

click the button to start the animation, then drag the panel to the right and start the animation again, the perspective is not like at its origin position.

I really don't know what i'm doing wrong...

 

... tried this, with no success:

TweenMax.set(".panel", {transformOrigin:"50% 50%"});

[Donatello666]

GOT IT! ->

 

By setting the position via "top" and "left" and not "x" and "y" solved my problem.