Zoom Out from a specific point of an object

[bootstrap007 6 Likes (Newbie)]

Hi,

 

As you can see in the CodePen demo the red color box is doing a zooming out animation. Is there a way to do that the yellow circle's size should be 100% of the screen when the page load and then it zoom out to the actual size of the red box ?  And also, the zoom out animation should start from the yellow circle.

 

 

Thanks in Advance.

 

See the Pen GRJgNxz by bootstrap007 (@bootstrap007) on CodePen

[ZachSaucier 7,162 Likes (Superhero)]

Hey bootstrap. Thanks for the demo.

 

I'm not understanding exactly the effect that you're wanting. 100% of the screen meaning inscribed inside of the viewport? or covering it completely so that you can't see red?

 

And what do you mean "the zoom out animation should start form the yellow circle"?

 

Maybe diagrams would be helpful in this case.

[bootstrap007 6 Likes (Newbie)]

Hi @ZachSaucier, 

 

Yes, exactly. Yellow circle covering the screen completely (full screen) so that red won't be visible when the page loads and from that point the zoom out animation starts. I have attached a sketch mockup for better understanding. Kindly refer demo.jpg

[ZachSaucier 7,162 Likes (Superhero)]

Cool, thanks for the diagram. It's very helpful.

 

What are you having trouble with?

[bootstrap007 6 Likes (Newbie)]

Hi,

 

Currently the zoom out animation is starting from the red box not from the yellow circle which is inside of the red box and also the yellow circle is not full screen when the page loads.

 

Please check the CodePen demo what i have tried so far:-

 

See the Pen GRJgNxz by bootstrap007 (@bootstrap007) on CodePen

[ZachSaucier 7,162 Likes (Superhero)]

Understood, but it's just a matter of getting your positioning and sizing correct. We don't have the capacity to build your project for you  

[bootstrap007 6 Likes (Newbie)]

haha... 😁