Scale to specific point

[krisxtina]

Hello, as you can see in my demo after opacity I scale section. But, my question is, how I can scale to specific point, I want scale to dot in question mark?

I want scale in it, after show another section. But how to determine these coordinates or what I have to do? Thank you

See the Pen oNqZLMR by Kisa777Zaika (@Kisa777Zaika) on CodePen

[GreenSock]

You'd have to calculate the proper transformOrigin, perhaps like this: 

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

[krisxtina]

25 minutes ago, GreenSock said:

You'd have to calculate the proper transformOrigin, perhaps like this: 

 

 

Thank you, but if I want to scale for getting full white background, in my actual project I need to scale: 300, is it good? Because my projects starts working slowly and badly

[GreenSock]

That's definitely a bad idea, but it has nothing to do with GSAP. It's about what you're asking the browser to render. Think about it this way: If your screen is 1000px wide (somewhat small by today's standards) and the image fills that area, and maybe it's 500px tall. That's 500,000 pixels. If you scale that to 300x, that means you're asking the browser to render 45,000,000,000 pixels. That's a LOT of pixels. 

 

There's not really a simple/easy fix that I can think of. You could only animate the text (rather than the whole image) and to further optimize it, hide the letters that go off screen (to minimize rendering load). That's still not super simple to do. 

 

Another option is to load multiple versions of the image, one that's zoomed-out, then others at various stages of zoomed-in state and transition between them, sorta like this demo: 

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

 

Good luck!

[krisxtina]

16 minutes ago, GreenSock said:

That's definitely a bad idea, but it has nothing to do with GSAP. It's about what you're asking the browser to render. Think about it this way: If your screen is 1000px wide (somewhat small by today's standards) and the image fills that area, and maybe it's 500px tall. That's 500,000 pixels. If you scale that to 300x, that means you're asking the browser to render 45,000,000,000 pixels. That's a LOT of pixels. 

 

There's not really a simple/easy fix that I can think of. You could only animate the text (rather than the whole image) and to further optimize it, hide the letters that go off screen (to minimize rendering load). That's still not super simple to do. 

 

Another option is to load multiple versions of the image, one that's zoomed-out, then others at various stages of zoomed-in state and transition between them, sorta like this demo: 

 

 

 

Good luck!

Thank you for information. In my case I don`t have such cool images. So, if I transform scale for this dot for full background, how I can do it for good perfomance?

[GreenSock]

This isn't something we generally do for people here, but I was curious about the challenge so here's the most clever solution I could come up with that only scales a dot (which I made with a simple <div> that has border-radius: 50%, placing it roughly on top of the actual dot in the "?"):

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

 

Does that help? 

[krisxtina]

9 hours ago, GreenSock said:

This isn't something we generally do for people here, but I was curious about the challenge so here's the most clever solution I could come up with that only scales a dot (which I made with a simple <div> that has border-radius: 50%, placing it roughly on top of the actual dot in the "?"):

 

 

 

Does that help? 

Yes,  thank you a lot. I often do something, but I`m not sure I`m doing it correctly, that`s why I ask how I can do it, for better understanding.