Jump to content
Search Community

Clipping mask problem in animation

Sean_has_started_coding test
Moderator Tag

Go to solution Solved by PointC,

Recommended Posts

Hello all


I've been pulling my hair out trying to fix a masking issue. Any help would be appreciated.

I have two masks in the animation, the first appears above the blue line, and the second appears under the blue line.

The first one, revealing the education icons work fine.

The second mask revealing the title text does not for some reason. The mask hides the text completely for some reason.
The masks are set up the same way. 
Thought I had a good take on clipping masks, only to be stumped by this.
Any guidance would be appreciated as ever.


See the Pen dygLbeZ by HappyGooner (@HappyGooner) on CodePen

Link to comment
Share on other sites



What particular part of your animations is not working? You have over 400 lines of HTML and almost 200 lines of JS. We don't have the time resources to comb through all that code in order to find what is not working and why, especially if you're not specific about it.


Happy Tweening!

Link to comment
Share on other sites

  • Solution

When you're clipping an H1 separate from the SVG, I'd recommend just using a container div for the H1 and setting overflow to hidden. Something like this:

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


Just a few other notes:

  • You could save a lot of JS if you apply a common class or select an array of groups to apply your autoAlpha set(). Currently you have 20 identical set() tweens in a row. I'm not sure setting the autoAlpha:1 is necessary as that would be its default state.
  • No need for <body> tags in the HTML panel of CodePen
  • You can load scripts via the little gear icon on the JS panel rather than pasting the script tags in the HTML panel


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