Animate on scrollTrigger

[Yunus]

Hello, 

 

I am trying to animate the arrow and the circle but only the stroke does animate but is not filling the svg at the same time, I am note sure what I am doing wrong if someone could please check and see what I am missing.

 

 

See the Pen abwmWXY?editors=1010 by ibrahimyunus (@ibrahimyunus) on CodePen

 

Thanks

See the Pen ZEypKoe?editors=1010 by ibrahimyunus (@ibrahimyunus) on CodePen

[GreenSock]

Welcome the the forums, @Yunus. 

 

DrawSVG is only for animating the stroke but you actually have entire shapes that are filled. You'd need to edit your SVG artwork so that those are simply stroked paths (not outlined/filled ones). The only other way you can accomplish something like that is to animate a mask but that's a lot more complicated in most cases.

 

@PointC has some outstanding tutorials on his web site that I'd recommend, like https://www.motiontricks.com/svg-calligraphy-handwriting-animation/

 

More articles: https://www.motiontricks.com/svg-tutorials/

 

Happy tweening!