Another mask reveal question

[swampthang 112 Likes (Specialist)]

Starting by setting up a dashed line animation on a rectangle behind a mask. Then trying to use drawSVG to draw in the mask and make it look like the dashed lines are drawing in and continuing to animate. I don't see a draw in of the mask, just looks like rectangle being masked is peeking out from under the mask on the edges and then suddenly appearing. 

 

I'm screwing something up here. Been fighting this simple task all afternoon. 

See the Pen BzXKyG?editors=1010 by swampthang (@swampthang) on CodePen

[PointC 8,599 Likes (Superhero)]

Hi swampthang 

 

Is this what you want it to do?

 

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

 

Happy tweening.

[Jonathan 5,176 Likes (Superhero)]

Great Job PointC!

[swampthang 112 Likes (Specialist)]

Hey, PointC, yea, thanks! I see where the issue was that I was using styles instead of attributes. I had just thought about that. The Codepen I used for the post is a pithy version of the project I'm working on which requires I do all this dynamically. 

 

In case anyone is interested, here's the full-blown dynamic version that wraps a nested SVG and offsets according to desired padding. You can play with the vars at the top of the JS to see changes.

 

One thing I'm trying to figure out in this though, is I can't get the nested SVG to scale. The structure is basically...

<!--  THIS IS THE SVG CONTAINER THAT ESTABLISHES THE STAGE SIZE  -->
<svg class="stage-svg" x="0" y="0" height="400" width="800">


  <!-- THIS IS A GROUP THAT WRAPS THE NESTED SVG (it's been moved to the center of the screen already using GSAP) -->
  <g id="gp-2" class="svg-wrapper" ref="2" x="50" y="50" height="121" width="581" data-svg-origin="289.5 59.5" style="transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 109.5, 139.5, 0, 1); cursor: move; touch-action: none; -webkit-user-select: none; transform-origin: 0px 0px 0px;">


    <!--  THIS IS THE NESTED SVG TO BE WRAPPED WITH THE RECTANGLE THAT WON'T SCALE -->
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" role="img" width="581" height="121" viewBox="0 0 581 121" id="svg-2" class="svg inline" ref="2" x="0" y="0" viewbox="0 0 581 121">
    <!-- contents of the SVG here -->
    </svg>
  </g>
</svg>

The last 3 lines in the JS are where I'm trying to add the scale tween...

TweenMax.set(svg, {scale: 0, opacity: 1});
tl.to(svg,rotationSpeed,{scale: 1},0);
tl.seek(0).play();

See the Pen bZXNbY by swampthang (@swampthang) on CodePen