Circle Fullscreen Image

[TerraHQ]

Hi All
I was wondering if you can help me out, I want that my dot div expands, and the image stays there.

My codepen is quite simple, but I can't quite make it work, because at the moment I'm scaling the image too. can someone help me?

See the Pen XWwYWzq by andresclua (@andresclua) on CodePen

[geedix]

Hi, one way to get the effect of the circle expanding to reveal a static image is to use a mask in an SVG, like the example at the bottom of this page: https://gsap.com/community/forums/topic/18847-circle-mask-animation/
I looked at another old forum page -- https://gsap.com/community/forums/topic/32322-clip-path-to-gsap-animation/ -- and made a fork of your pen using a variable for clip-path.

See the Pen GRaGjym by geedix (@geedix) on CodePen

 

[TerraHQ]

hi @geedix, your image is not fullscreen as mine, how could you accommplish that?

[geedix]

Hi @TerraHQ, I don't think you want your image scaling up in the animation like it was originally, so you need to set it the size you want in your CSS, for example: 

See the Pen qBGKQpJ by geedix (@geedix) on CodePen

You will probably want a bigger source image to get the quality up for big screens.