Jump to content
Search Community

Using a mask to remove text without affecting BG?!

Leeroy J 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

See the GIF for what i'm trying to achieve.

How can I do this with Greensock where you use a mask to remove text in sliding transition but not effect the background.

Not sure if this is possible but any advice or ideas would be appreciated.




Link to comment
Share on other sites

Is this SVG, canvas or just some DOM elements?


You should be able to set up a mask or clip-path for that text pretty easily and move it into position. Here are a few pens that may help.


See the Pen KzmXYK by PointC (@PointC) on CodePen

See the Pen ENRprd by PointC (@PointC) on CodePen

See the Pen Gqzoja by PointC (@PointC) on CodePen

Happy tweening.


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