Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

DrawSVGPlugin, onComplete, Fills

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



I'm finally starting to get somewhere with DrawSVGPlugin and I really like it!  However, I have 2 questions.  I posted my project in the CodePen URL and would like to know this:


1. How do I autofade a fill in and set the stroke to 0?  Right now, I have the lines being drawn and then at the end of the animation, it sets the fills back in.  But when they come in, they just appear, they don't fade in (as how I want them to).  


.set(".aux-sym-1-shadow, .aux-sym-2-shadow, .aux-a-line, .aux-u-line, .aux-x-line", {fill:"#75674a"});


2. How can I call the onComplete trigger at the end of the animation?



See the Pen OVEPrm by hyperbola (@hyperbola) on CodePen

Link to comment
Share on other sites

Hi sjerrentrup :)


- Since you set fill="none" at first , you need fromTo :

.fromTo(svgElement , 1 , { fill:"rgba(117,103,74,0)" } , { fill:"#75674a" } ) 

- for onComplete , do like this : 

var tl = new TimelineLite({  onComplete : function  })// timeline onComplete
TweenLite.to(svgElement , 1 , { ..... , onComplete : function  }) // tweens onComplete

- for tween stroke-width to 0 :

TweenLite.to(svgElement , 1 , { strokeWidth : 0 }) 

pls check this out : 

See the Pen rVKaXb by MAW (@MAW) on CodePen

  • Like 2
Link to comment
Share on other sites

Ok, this is great!  I got it working like I want!  One last thing.  I just uploaded a new page.  I added, Play and Reverse buttons.  If you click for fullscreen, then allow the animation ro run.  When it's done, click "Reverse", and at then end of that animation, there's a small line at the bottom of the "X" leftover.  How can I get that to appear gone?


See the Pen OVEPrm by hyperbola (@hyperbola) on CodePen

Link to comment
Share on other sites

seems that come from your polygon points , sometimes adobe Ai exports svg polygon with line breaks in points string , pls be sure there isn't any line break in your points string .


you can fix yor svg by this tool : https://jakearchibald.github.io/svgomg/

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.