Jump to content

Node London

Tween a SVG path attribute

Recommended Posts

Hi there, 


I'd like to tween a property of an SVG clipPath, or possible just the position / rotation of the path.


For instance, can I tween the 'M 199.6' value in bold below?

Or can I tween the rotation / position of 'Layer_STROKES' ?


Thanks in advance as always.

<!-- ///////////////////////  SVG  ////////////////////////// -->

<svg  height="0" width="0">
        <clipPath id="svgPath">

        <path id="Layer_STROKES" stroke="#CCCCCC" stroke-width="1" stroke-linejoin="round" stroke-linecap="round" fill="none" d="
M 199.6 120
L 199.5 119.5 201.325 120
M 71.8 90.5
L 289.95 150 109.95 270 70.05 90.5"/>

  • Like 1
Link to comment
Share on other sites

  • 9 months later...

Ah, thanks. It seems so simple now that you explain it. Thank you. Also, can you do a demo that animates stroke-dashoffset in combination with a stroke-dasharray like 8,4? I was trying to animate a targeting path in a Risk-like game I'm developing, but I couldn't figure out how to do it with GSAP. Oddly, I figured out how to animate it using plain javascript, but I'd prefer to use GSAP. I didn't find any good examples of this that actually worked.


Here's how I animated the dashed, offset line in javascript:

function animateLine(val){
	if (my.attackOn){
		DOM.targetLine.style.strokeDashoffset = --val;
		setTimeout(animateLine, 50, val);
	} else {
		DOM.targetLine.style.visibility = 'hidden';
  • Like 1
Link to comment
Share on other sites

Hi Joe,


Since you are a Club member, I think DrawSVG is your best bet for that type of effect.



If you need some other type of animation perhaps a CodePen demo or illustration will help us better understand.


Let us know when we can take a peek at this new game. Looking forward to seeing it.


Link to comment
Share on other sites

Check it out, Carl. Here's what I'm talking about. It works with JavaScript, but I couldn't figure out how to do with with GSAP:


See the Pen zBzJkO by maelfyn (@maelfyn) on CodePen

Link to comment
Share on other sites

Thank you, Carl! This is so amazing! I think it wasn't working because I was trying to use it as an attr property. I updated the codepen. It looks so much smoother now! Here's what I went with:

var arr = [
TweenMax.to(arr, .2, {
  strokeDashoffset: '-=12',
Link to comment
Share on other sites

Awesome. Very nice!

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.