Sean_has_started_coding Posted May 26, 2023 Posted May 26, 2023 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.
Rodrigo Posted May 26, 2023 Posted May 26, 2023 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!
Sean_has_started_coding Posted May 26, 2023 Author Posted May 26, 2023 Thanks for the reply Rodrigo, I have just found a solution to the issue. Have a great weekend.
Solution PointC Posted May 26, 2023 Solution Posted May 26, 2023 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. 3
Sean_has_started_coding Posted May 26, 2023 Author Posted May 26, 2023 That's brilliant, thanks as ever Craig. That makes perfect sense. Will tweak the code tomorrow based on your comments. Have a great weekend.
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now