Jump to content
GreenSock

BebDev

Calculate TransformOrigin Dynamically

Recommended Posts

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

Link to comment
Share on other sites

@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!

 

 

Link to comment
Share on other sites

@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

Link to comment
Share on other sites

Here you go, this thread should help!

 

 

  • Like 1
Link to comment
Share on other sites

@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

 

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

 

Thanks again for your help.

Link to comment
Share on other sites

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!

  • Like 2
Link to comment
Share on other sites

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

  • Like 4
Link to comment
Share on other sites

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

  • Like 3
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.
×