Jump to content

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

How to change stroke width using draw svg

Recommended Posts

I would like to ask for your help on how to make a stroke width go from big too small. I’ve tried using drawSVG and defining the strokeWidth. I also tried something like this:

gsap.fromTo("#svg", {duration: 1, scale: 2.0, strokeWidth:10});

gsap.to("#svg", {duration: 1, scale: 1.4, strokeWidth:4});

But, it didn’t work. 

Link to comment
Share on other sites

Looks like you're targeting the whole SVG. You'd want to target the actual path or line that needs to be animated.


gsap.to(yourTargetElement, {duration: 1, scale: 1.4, strokeWidth:4});


Make sense?


Happy tweening.



  • Like 2
Link to comment
Share on other sites

PS targeting the whole SVG could work if you set those attributes on the root SVG, but I'm guessing they're on the path or line.

  • Like 1
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.