Jump to content
Search Community

circle Mask animation

DD77 test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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 5
Link to comment
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.
×
×
  • Create New...