Setup time animation/transition

[beaver-creation]

Hey !

How can i setup the time of the path animation and the transtion of fill opacity ?

Thanks for reply :)

[ojoseph]

I have the same concern! Is there anyway to control the speed of the animation?

[ojoseph]

@beaver-creation Actually if you open the script you can change the value of the animation speed and the transition by editing the following values // apply new transitions path.style.transition = path.style.WebkitTransition = "stroke-dashoffset 1s ease-in-out";

[ 1s ] Is how much time it takes to animate,

[ ease-in-out ] Is the type of transition you want you use; you can rely on the documentation below in order to know what kind of animation you can use:

[ojoseph]

@beaver-creation I am not sure for the opacity but the following code should be a hint.

// edit props path.style.fillOpacity = 1; path.style.strokeOpacity = 0;

[beaver-creation]

Thanks Ojoseph !

But finally i use this script Vivus SVG.

[ojoseph]

@beaver-creation i used it too but i was not able to trigger the fill animation. Think you have a hint?

[beaver-creation]

@ojoseph No idea :/ I just use it with the line, not the fill. I think its write in the doc :+1:

[ojoseph]

@beaver-creation Thanks, I've checked the documentation and it seems paths cannot be filled.

[callmenick]

That suggested library looks pretty detailed. You're right about editing the props in the script though, that'll do it. To trigger the fill on that lib, you'll probably have to edit the script. If you notice, they have a myCallback param that you can pass. There, you can target all paths and transition the stroke-opacity from 1 to 0, and likewise transition the fill from 0 to 1.