Animate SVG mask

[sheila 3 Likes (Newbie)]

I see a lot of ways to animate a SVG mask or clipPath that is a shape (circle or rectangle) but I cannot seem to find a way to animate a path (and have it play nice on IE, FF, Safari, Chrome. Can this be done?

I modified an existing pen as an example. 

See the Pen dKgwKN by Sheilab67 (@Sheilab67) on CodePen

[PointC 14,425 Likes (Superhero)]

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.

 

[sheila 3 Likes (Newbie)]

Oops. Forgot to change the js. Sorry about that. 
Thanks for the quick response. You guys are awesome!

[sheila 3 Likes (Newbie)]

I noticed this did not work in IE. Do you happen to know a work-a-round that does?

[Sahil 2,655 Likes (Superhero)]

You were using really old version of TweenMax. Current version is 2.0.1

 

See the Pen YvJgeK by Sahil89 (@Sahil89) on CodePen

 

[mikel 4,775 Likes (Superhero)]

Hi @PointC,

 

Your pen inspired me:

 

See the Pen eKQRKM by mikeK (@mikeK) on CodePen

 

Randomized animation due to different timings.

 

Kind regards

Mikel

[Gumbo 2 Likes (Newbie)]

Hi,

 

I'm trying to unmask an image instead of some text. What would I need to do to change the text to an image here?

 

Thanks very much,

Paul

[mikel 4,775 Likes (Superhero)]

Hey,

 

See the Pen Pyejvv by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

[Gumbo 2 Likes (Newbie)]

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

[ZachSaucier 7,152 Likes (Superhero)]

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.

[Gumbo 2 Likes (Newbie)]

Hi all, thanks for all your help. I managed to sort it

[kichostone 0 Likes (Newbie)]

Hi, Can you also mask an image with svg strokes?

Thanks!

[ZachSaucier 7,152 Likes (Superhero)]

Hey @kichostone. It might be best to create a new thread about your question and also provide a minimal demo of your situation. This thread provides more information on how to do so:

 

[kichostone 0 Likes (Newbie)]

Thanks!

[jimijbob 1 Likes (Newbie)]

Hello!

 

Trying to use this mask to scale from the centre out and reveal the whole square. How do I achieve that?

 

See the Pen Jjdermj by jimijbob (@jimijbob) on CodePen

 

I'm a complete novice so any help would be amazing!

 

Many thanks

James

[ZachSaucier 7,152 Likes (Superhero)]

@jimijbob That demo uses a really old version of GSAP. We highly recommend using GSAP 3. But you can scale it from the blob's center like so:

See the Pen ZEGmjZQ by GreenSock (@GreenSock) on CodePen

 

If you want that blog to be centered in terms of the square, just move it in the SVG.

[Shrug ¯\_(ツ)_/¯ 947 Likes (Leader)]

Also @mikel and @PointC gave responses in your other thread for any other users wishing to follow along.

 

 

[webmonster 0 Likes (Newbie)]

On 1/27/2020 at 10:52 PM, mikel said:

Hey,

 

 

 

 

Happy tweening ...

Mikel

Hi Mikel, 

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

 

Thank you!

[OSUblake 18,491 Likes (Superhero)]

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.