Kukis13

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

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). https://codepen.io/kukis13/pen/ExomxMq 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

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?