DrawSVGPlugin: Animate stroke around SVG path

[Duo]

Hi,

 

I'm trying to replicate this animated GIF using GSAP to increase performance and reduce a huge GIF load.

 

 

I've tried using the DrawSVG plugin but I'm not having any luck. I was wondering if I might need to use MotionPathPlugin but I'm not sure how I go about setting the stroke value and then animating it like this along the SVG path.

 

Any help would be greatly appreciated.

 

Thanks

[PointC]

Hi @Duo 

 

I think this demo should help.

 

See the Pen BaKGyaa by PointC (@PointC) on CodePen

 

Happy tweening.

 

[Duo]

Hi @PointC,

 

You are a superstar!

 

Thanks so much for providing this outstanding example and in such a timely manner. Greatly appreciated.

[Duo]

Hi @PointC,

 

I know I marked this as solved and it pretty much is. There is just a small issue of it like glitching at the bottom of the animation. You can view it here:

https://bardee.com/

 

You can see right at the end of the animation it like glitches it's position.

 

This is the code I've used to do the animation:

 

gsap.set('[data-component="bardee-icon"] svg path', { drawSVG: false })

    gsap.from("#target", { duration: 2, drawSVG: "0% 75%", ease: "none"})
    gsap.from("#target", {
      duration: 2,
      drawSVG: "100% 175%",
      ease: "none",
      repeat: -1
    });

I used from instead of to so that I could reverse the animation.

 

Again, any help would be greatly appreciated.

 

Thanks

 

[PointC]

hmmm... yeah I see that. You have competing from() tweens but I think I'd use a fromTo() tween with negative percentages if you want it to go backwards. This seems to work without a glitch for me.

 

See the Pen 63344e9fd885b610e253436e23d718fb by PointC (@PointC) on CodePen

 

Happy tweening.

 

[Duo]

That has worked perfectly @PointC and less code too. Thanks so much again!