Jump to content
Search Community

Animating path segments

Kukis13 test
Moderator Tag

Recommended Posts

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?

Link to comment
Share on other sites

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

Link to comment
Share on other sites

@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.

BZioOse.jpg

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.

:)

 

  • Like 5
Link to comment
Share on other sites

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

 

  • Like 4
Link to comment
Share on other sites

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 :)

  • Like 1
Link to comment
Share on other sites

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. 

  • 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.
×
×
  • Create New...