Jump to content
Search Community

Animating svg mask

Gumbo 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


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

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