Jump to content
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? 
 

See the Pen VBNQXr?editors=1010 by davide77 (@davide77) on CodePen

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.

 

See the Pen OwGqbe by PointC (@PointC) on CodePen

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:

 

See the Pen xJNWez by PointC (@PointC) on CodePen

Hopefully that helps. Happy tweening.

:)

 

  • Like 3

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.