Jump to content
GreenSock

swampthang

Another mask reveal question

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

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

Link to comment
Share on other sites

Great Job PointC!

Link to comment
Share on other sites

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

 
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
  • Recently Browsing   0 members

    • No registered users viewing this page.
×