Jump to content
GreenSock

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

DrawSVGPlugin: Animate stroke around SVG path

Go to solution Solved by PointC,

Recommended Posts

Hi,

 

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

 

bardee-icon-animated-2.gif

 

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

Link to comment
Share on other sites

  • Solution

Hi @Duo :)

 

I think this demo should help.

 

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

 

Happy tweening.

:)

 

  • Like 4
Link to comment
Share on other sites

Hi @PointC,

 

You are a superstar!

 

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

  • Like 1
Link to comment
Share on other sites

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

 

Screen-Shot-2021-11-24-at-2.32.26-pm.jpg

Link to comment
Share on other sites

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.

:)

 

  • Like 4
Link to comment
Share on other sites

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

  • Like 2
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.
×