Jump to content


Animating 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


The attached is someone else's codepen but I was wondering if the mask itself can be animated up or down etc? Also, could you replace the text with a path and animated that?

Like this path: 

<path class="cls-1" d="M455.7,98.51c-37.55,18-103.7,11.12-103.7,11.12V500H645.74V102.63s-35.52-22.87-85.79-24C530.85,77.89,487.62,83.22,455.7,98.51Z" transform="translate(-352 -78.52)"/>


Thanks in anticipation.


See the Pen QvvEYQ by dudleystorey (@dudleystorey) on CodePen

Link to comment
Share on other sites

Yes, you can animate a SVG mask. You can also switch the text in the mask to a path if you like.


My advice would be to start trying things and see what works and what doesn't. The best way to learn is to start messing with code and see what breaks. ;)


Happy tweening.



  • Like 3
Link to comment
Share on other sites

Hi PointC,


I've managed to switch to path but I don't know how to animate the mask. Can you help me?




Link to comment
Share on other sites

If you can post a demo with what you've done so far, I'll take a peek.


  • Like 1
Link to comment
Share on other sites

Whatever I've done is not working that's why I need help. Can you not make the mask in the codepen above animate?

Link to comment
Share on other sites

Load GSAP into that pen and add this line:


TweenMax.to("text", 0.5, {y:10, yoyo:true, repeat:-1});

That will move the mask text up and down.


Happy tweening.


  • Like 4
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.