Calculate TransformOrigin Dynamically

[BebDev]

Hi guys,

 

I'm currently trying to scale an element until its width/height matches the screen width/height. I managed to do that for the width, but the problem is that I can't set the transformOrigin value to be correctly calculated on all screen resolutions.

 

Any help would be appreciated!

 

Regards

See the Pen vYrLRex by abanobakram (@abanobakram) on CodePen

[Cassie]

Sounds like a good time to use GSAP's FLIP plugin to 'flip' between two different positions 😎

https://greensock.com/docs/v3/Plugins/Flip/

[BebDev]

@Cassie Thanks so much. May I ask does this work with scrollTrigger? I mean I want the scale to happen on scroll. Does FLIP works with that?

 

Thanks again!

 

 

[BebDev]

@Cassie I managed to set the width/height to the same as the browser window, but any idea how to make this to work on scroll using scrollTrigger?

 

Regards

[Cassie]

Here you go, this thread should help!

 

 

[BebDev]

@Cassie Thanks so much. This was so much helpful. Sorry for being a headache. I'm just one step away. As you can see in this pen, I managed to get everything to work fine, but I have one question. Can I make that to happen as a part of another timeline?

 

So, what I want to happen on scroll is:

1- The image should rotate 360deg

2- Scale to window width/height

3- Change opacity to 0

 

Pin

 

Thanks again for your help.

[Rodrigo]

Hi,

 

I think is best to just calculate the scale values needed to stretch the image or a container with the image as a background than using Flip with a scrubbing ScrollTrigger instance. While a Flip instance returns a GSAP timeline, because the way GSAP works, it records the start and end values on the first render and then iterates between them, so while this will work in a ScrollTrigger instance with scrub, as soon as you resize the window you'll start having problems.

 

An alternative is to use a call method in a timeline controlled by ScrollTrigger:

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

 

Also as you can see, using scale in Flip, does create a jump in the image when the class is toggled most likely because of the CSS setup, so as I mentioned before, I would do the simple math to get the scale values and use a container with the image as a background, scale the container and use a scrubbing ScrollTrigger instance.

 

Let us know if you have more questions.

 

Happy Tweening!

[GreenSock]

It's definitely a non-trivial scenario with the entirely dynamic nature of things and how you want to accommodate viewport resizing that'd totally change things, but here's another approach:

See the Pen jOKWRER?editors=0010 by GreenSock (@GreenSock) on CodePen

[BebDev]

Thanks so much guys for the help. I followed @GreenSock method, everything is working great now.