Jump to content
Search Community

Tween a SVG path attribute

Node London test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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">
    <defs>
        <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"/>

        </clipPath>
    </defs>
</svg>
  • 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

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 = [
  document.getElementById('targetLine'),
  document.getElementById('targetLineShadow')
]
TweenMax.to(arr, .2, {
  strokeDashoffset: '-=12',
  repeat:-1, 
  ease:Linear.easeNone
})
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.
×
×
  • Create New...