Animating path segments

[Kukis13 1 Likes (Newbie)]

Hi,

 

I have SVG bezier path made of 4 nodes (so 3 path segments):

 

    <path
       style="fill:none;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
       d="M 2.0550541,3.1272563 C 13.879322,2.978336 25.703329,2.8294189 31.659879,5.8973073 c 5.956551,3.0678883 6.0459,9.3520587 1.846403,14.7576297 -4.199497,5.405571 -12.687595,9.932556 -21.175958,14.459683"
       id="mypath" />

I also have image included in the same SVG with the id myimage

I am able to animate it with the following code using MotionPathPlugin:

var t1 = gsap.timeline();
t1.to("#myimage", {
		duration: 5,
		motionPath: {
			path: "#mypath",
			align: "#mypath",
			alignOrigin: [0.5, 0.5],
			autoRotate: 90
		},
		ease: "none"
	});

However I can't find any way to animate only the first segment of above path (so basically I would like my image to stop at the end of my first segment of the path).

 

Yes, there are start and end params available in MotionPathPlugin but when each of path segment is of different length it is hard to know what exact values pass to them. And I need to be very precise.

 

How can I animate only specific segment of a SVG path?

[PointC 14,429 Likes (Superhero)]

Hi @Kukis13

 

Welcome to the forum.

 

It sounds like you might be looking for the helper function to calculate progress points for the anchors of a path.

https://greensock.com/docs/v3/HelperFunctions#anchorsToProgress

 

If you could provide a minimal demo, we can better assist you.

 

Happy tweening and welcome aboard.

[Cassie 5,413 Likes (Superhero)]

ooooh this is a cool helper function. 👀 

[Kukis13 1 Likes (Newbie)]

Hi,

thank you for your quick reply

 

Unfortunately, I've already tried this helper function before and it doesn't give me accurate (or at least desired) results.

I've prepared the codepen as you asked (using the helper function and start/stop params).

 

See the Pen ExomxMq by kukis13 (@kukis13) on CodePen

 

The orange star should stop exactly at the small pink star. I placed the small pink star exactly at the place of the first node of the path (in Inkscape).

I attach Inkscape SVG file as a proof.

 

What am I missing here? Thank you for your time.

bezier-path.svg

[Cassie 5,413 Likes (Superhero)]

Hey there!

Checking the nodes in affinity gives me this -

Maybe you're looking at the bezier handle, or maybe inkscape is showing different nodes? Uncertain.

[PointC 14,429 Likes (Superhero)]

@Cassie beat me to it, but I was just going to say the same thing. I pulled your path into AI and found these 6 points.

I'm not sure what the desired end result is with this project but something to consider would be separate paths with the end point of one and the start point of the next in the same spot. Then you can simply animate the full length of each path without needing to calculate progress points. Just a thought. YMMV.

 

Happy tweening.

 

[akapowl 5,225 Likes (Superhero)]

And you both beat me to it 😅 I added the motionpathhelper to it

 

See the Pen popPJMr by akapowl (@akapowl) on CodePen

 

Working with Inksape can be finnicky - for one you've got to be very careful, that no transforms get applied (can check on that in Inkscape's xml-editor) when moving things around - especially with grouped items and/or shapes that are not converted into paths (like stars made with the star-tool thingy).

 

Also the path-data you get from Inkscape's SVGs might not always resemble what would be ideal to work with. That's why I'd always suggest running SVGs made with Inkscape thorugh SVGOMG first before adding them to your page.

 

This here example is made with Inkscape, too (and additionaly run thoruhg SVGOMG). Appears to work just alright with your JS code.

 

See the Pen oNpWXya by akapowl (@akapowl) on CodePen

 

[PointC 14,429 Likes (Superhero)]

@akapowl may have the last post, but he strolls in with the most complete answer. FTW.

 

[akapowl 5,225 Likes (Superhero)]

5 minutes ago, PointC said:

FTW.

 

I'm on board with that one - Free the Whales!

 

[mikel 4,775 Likes (Superhero)]

Hey,

 

The GSAP ScrollTrigger could offer another kind of 'helper'.
It offers onUpdate the current progress = 'position of motionPath'. And that for any desired on the path.

 

See the Pen PoEmJyY??editors=1100 by mikeK (@mikeK) on CodePen

 

Happy helping ...

Mikel

 

[Kukis13 1 Likes (Newbie)]

Thank you all, especially @akapowl for all the hints. I wrongly assumed that Inkscape is the only source of truth. When being more careful with my SVGs and when using other software to edit SVG paths I am getting better results thanks to all your hints.

 

And the helper function shared here is very useful, would be nice to have it maybe in the core GSAP library or maybe as part of one of the plugins. Just my 2 cents

[GreenSock 18,597 Likes (Superhero)]

12 hours ago, Kukis13 said:

And the helper function shared here is very useful, would be nice to have it maybe in the core GSAP library or maybe as part of one of the plugins. Just my 2 cents

Helper functions are the types of things that are very niche and specific - they definitely don't belong in the core (or everyone would pay the kb price) and they generally don't belong in a plugin unless there's a big enough swath of our audience who would find it useful. When you add stuff in, it expands the API as well which can ultimately confuse people, so we just have to be careful.

 

Thanks for the suggestion, though.