Jump to content
Search Community

Clipping mask problem in animation

Sean_has_started_coding test

By Sean_has_started_coding
in GSAP

Moderator Tag
 Share
Go to solution Solved by PointC,

Recommended Posts

Sean_has_started_coding test

Sean_has_started_coding

Posted
Posted

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.

Thanks.

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

Link to comment
Share on other sites
Rodrigo test

Rodrigo

Posted
Posted

Hi,

 

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
PointC test

PointC

Posted
  • Solution
Posted

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
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...