DrawSVG Question

[dada78]

Hi guys,

I watched this: https://greensock.com/drawSVG and then tried to do a "to" animation using just:

tl.to("#border", 2, {drawSVG:"100%", ease:Expo.easeOut});

to tween a line from 0% to 100%. In the doc it says that if only one value is used, the plugin assumes that it's going to be tweened from 0%. However I can't get it to work unless I set the starting value to 0% specifically. What am I missing here?

 

Thanks!

See the Pen eba863d01bb1c0469ec6e4aa1224d0e2 by dada78 (@dada78) on CodePen

[Diaco]

Hi dada78 

 

pls try this : 

 

TweenLite.from("#border",2,{drawSVG:"0",ease:Expo.easeOut});

[dada78]

Thanks Diaco,

that works, however I was wondering why 

tl.to("#border", 2, {drawSVG:"100%", ease:Expo.easeOut});

isn't working, since in the video it was said that using just "100%" would be the same as saying: "0 100%" or "true", however none of these are working either in a "to" tween. I am I misinterpreting this somehow? Thanks!

[Carl]

Hi dada78,

 

Things are working correctly. The quote from the docs is

 

If you use a single value, 0 is assumed for the starting value, so "100%" is the same as "0 100%" and "true".

 

 

However, its really important to understand the previous section as well:

 

Remember, the drawSVG value doesn't describe the values between which you want to animate - it describes the end state to which you're animating (or the beginning if you're using a from() tween). So TweenLite.to("#path", 1, {drawSVG:"20% 80%"}) animates it from wherever the stroke is currently to a state where the stroke exists between the 20% and 80% positions along the path. It does NOT animate it from 20% to 80% over the course of the tween.

 

 

I think you were expecting the drawSVG value to define the starting state of the animation, it only defines what segment of the path to render when a to() tween is finished. 

 

Does that help?

[Diaco]

it's clear , because you are in that situation right now ( 100% drawing ) . like you want to tween 100 to 100 .

 

so you need to start from 0 ( or elsewhere ) to 100 , to have a tween

[dada78]

Yep, Carl is right. That's what I was expecting: That the starting value would be representative of the "0%" and the end value would be the "100%".

[dada78]

I have been testing out the plugin, by exporting SVGs in different dimensions and then animating the stroke.

Generally I am exporting SVGs with the viewbox only so I can size the width and height via CSS. Here I am using 2 SVGs using 2 different viewbox sizes, given the SVGs a width and height of 270px x 124px.

 

When I animate the stroke for both SVGs using an absolute pixel value, it appears that the viewbox size gets honored rather than the assigned pixel width and height. Would you therefor recommend always saving out SVGs at their default size that they would finally get deployed in?

 

Thanks!

 

CODEPEN here:

See the Pen fb9c3d736666762504bdb49873cd6955 by dada78 (@dada78) on CodePen

[OSUblake]

Why not use percentages? It will work out the same regardless of the size.

 

If you need to use a pixel value, you could get the total length and then convert it to whatever.

var len1 = document.querySelector("#border-270").getTotalLength();
var len2 = document.querySelector("#border-749").getTotalLength();