Trouble w/ an animated SVG Mask

[JoseCordova]

Can someone help me understand why my animated svg mask isn't working? I'm using it as a means to reveal a dotted line. I feel like it should be working, but obviously I'm missing something. Help would be very much appreciated.

See the Pen WNQZVzJ?editors=1111 by meatjasenmp (@meatjasenmp) on CodePen

[PointC]

Wrap your masked path in a <g> tag and mask the group.

 

       <g mask="url(#scene-1-bottom-left-to-right-mask)">
         <path  id="scene-1-bottom-left-to-right" d="M2692,2545.51l-5314.76,743" transform="translate(2673.51 2994.97)" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="100" stroke-dasharray="12.51 12.51" />
       </g>

Just FYI - I cranked the mask and path stroke-width up to 100 so I could see the path. Your viewBox is 9696 x 8277 so a 1.5 unit stroke is almost invisible.

 

My advice is always mask a group rather than individual elements. It will give you far fewer headaches.

 

Happy tweening.

 

[JoseCordova]

I could've sworn I'd tried grouping it! Thanks buddy, your help is much appreciated.

[JoseCordova]

I feel like I'm still missing something, because I'm running into the same issue, using your approach - on a different mask.

[PointC]

Did you try upping the stroke width as a test? That viewBox is huge.

[JoseCordova]

I did.

[PointC]

Are we talking about the demo from above? That looks like it's working now. 

[JoseCordova]

There are additional lines that I need to mask, but you're right about the viewbox. I'm reducing the size now and seeing if that is a part of my issue. I'll circle back if I still can't resolve it. Again, thanks for your help.

[JoseCordova]

Same thing: 

See the Pen LYpevoP by meatjasenmp (@meatjasenmp) on CodePen

 

I must be missing something obvious.

[PointC]

Seems okay the way you have the groups.

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

[JoseCordova]

The left one is fine, it's this mask '#scene-1-line-bottom-to-top-mask' that's not working. It's driving me crazy.

[JoseCordova]

Hi, for anyone else that stumbles onto this problem: https://stackoverflow.com/a/40441652

 

maskUnits="userSpaceOnUse" is the trick. Thanks again Craig.

[PointC]

Good job. 👍

 

Yeah sorry, I didn't mean to abandon you in this thread - I had to jump on a conference call. Masks can be weird like that. We also talked about it in our big SVG Gotchas thread.

I'm glad you got it working. Let us know if you have any additional GSAP related problems or questions and thanks for being a Club member.

 

Happy tweening.