Jump to content
GreenSock

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

Animate SVG mask

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

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.

×