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?