DD77

circle Mask animation

Recommended Posts

How can I reverse the animation on clic? at the moment is just starting it. 
Also, how can I have the circle SVG mask to start in the center of the screen. 
Looks like is offset.
Is it possible? any idea? 
 

Share this post


Link to post
Share on other sites

I'm not sure what you're trying to do, but here's a quick example of a SVG with an image and a circle clip-path. It's all centered and the toggle will play/reverse the timeline.

 

Hopefully that helps. Happy tweening.

 

  • Like 4

Share this post


Link to post
Share on other sites

@PointC thanks is exactly what I need. Just one fix, as I don't understand why it doesn't go full screen. Any Idea why?

Share this post


Link to post
Share on other sites

You'll see in the CSS that I'm limiting the width/height to 80%. But even if we change that to 100% it won't fill the screen at all sizes because of the aspect ratio of the image. You could set the SVG preserveAspectRatio="none", but that would distort the image and look pretty funky.

 

Another option would be to center the SVG and crop the edges depending on screen size. Just use a little JS to make your calculations.

 

Another option would be to use CSS masks, but they give me a headache so I avoid them.

 

Another option would be to not place the image inside the SVG. Set the image as the background of the body (or div) and cover it with an SVG that stretches to 100% width/height. To make it work properly,  skip the viewBox attribute. Then drop in a 100%/100% rectangle which effectively covers the body (or div). Use a circular mask to cover that rectangle and reveal the background image. Maybe something like this:

 

Hopefully that helps. Happy tweening.

:)

 

  • Like 2

Share this post


Link to post
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.