Dynamic transformOrigin?

[joeworkman]

I am using transformOrigin and would love to have the Z part of that be dynamic. I need to it either be 50% of the width or height, depending on what I am animating. Is there any way to do this without watching for browser resize events and update the animation based on the size of the element?

 

Here is an example that I am using. I would like that `-25px` part dynamic somehow. 

 

gsap.set(".qf-card", {
    transformOrigin: "50% 50% -25px"
});

 

See the Pen bGpyzRy by joeworkman (@joeworkman) on CodePen

[GreenSock]

Hm, I'm not quite sure I understand the question - when exactly would you want that value to change? Like...wouldn't you just be able to add a gsap.set() call wherever you're making your other "dynamic" changes? What would trigger a change? You mentioned the size of the element - how would that size change (what outside force is acting upon it)? 

[joeworkman]

I am thinking in more of a responsive setting where the animated element is not fixed width. When the browser gets resized, the animated element could have its size be different. This means that the transformOrigin property would need to be updated. 

 

Does that make sense?

[ZachSaucier]

You could use the onUpdate callback as your listener and update the Z there.

Or use GSAP's modifiers to do the same thing.

[joeworkman]

Thanks guys. I will plays around with your ideas today and post back the results.