Jump to content
Search Community

Animate SVG mask

sheila 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

Hi @sheila :)

 

Welcome to the forum.

 

You can certainly animate a path as a mask. There is no 'r' attribute for a path though. That's the radius of the circle. You could morph it to a different shape, scale or rotate it no problem. Here's a fork of your demo with a scale animation.

 

 

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

Does that help?

 

Happy tweening.

:)

 

  • Like 5
Link to comment
Share on other sites

  • 1 year later...

Thanks for such a quick response Mikel.

 

I have a banner that is 300x250 and I have the following svg shape:

<polygon id ="circleMask" fill="#fff" points="0,0 300,0 300,250 76.5,250"/>

I want this shape to reveal a picture from right to left and then about 5 seconds later it goes back later unrevealing the image. How would I do that?

 

Thanks,

Paul

Link to comment
Share on other sites

1 minute ago, Gumbo said:

How would I do that?

Use the same approach that mikel just posted in the demo above and switch out the parts and animation for whatever you need! :) 

 

Are you running into a specific error? If so, please make a minimal demo to exemplify the demo and we're happy to help.

  • Like 1
Link to comment
Share on other sites

  • 4 weeks later...
  • 4 weeks later...
  • 1 year later...
4 hours ago, webmonster said:

Could be a silly question but can you make the same with a background video?

 

The animation will be the same if you're using an image or a video. You can use CSS to set the clip path of a regular element to a SVG clip path using the id.

 

.my-video {
  clip-path: url(#my-clip);
}
               
               

 

Give it a shot, and if you need any additional help, please make another topic including with your minimal demo

 

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...