Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
sheila

Animate SVG mask

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

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

  • Like 3

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

 

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

 

  • Like 4

Share this post


Link to post
Share on other sites

Hi @PointC,

 

Your pen inspired me:

 

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

 

Randomized animation due to different timings.

 

Kind regards

Mikel

  • Like 3

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Hey,

 

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

 

Happy tweening ...

Mikel

  • Like 2

Share this post


Link to post
Share on other sites

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

Share this post


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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Thanks!

Share this post


Link to post
Share on other sites

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:

 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

  • Like 2

Share this post


Link to post
Share on other sites

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

 

 

  • Like 3

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

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. 


  • Recently Browsing   0 members

    No registered users viewing this page.

×