Jump to content
GreenSock

phantomboogie

Masking dashed lines - Mask stroke position is off

By phantomboogie, in GSAP. Views: 2,686

Moderator Tag
Go to solution Solved by PointC,

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

Posted

Hi,

 

I'm trying to reveal a dashed line with drawsvg using a mask but the mask position seems to be off. 

I can increase the stroke-width for lines that don't overlap but when they do overlap in the codepen example, I need a more precise line. 

 

Anybody encounter this and know whats up? 

Thanks! 

See the Pen wWMQjW by phantomboogie (@phantomboogie) on CodePen

Link to comment
Share on other sites
  • Solution
  • Solution
Posted

That's happening because of the transform of the path inside the mask. The mask hasn't moved, but the path inside it has. Simply remove that transform and you'll be all good to go.

 

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

 

Happy tweening.

:)

  • Like 2
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.
×
Login Create Account