Kukis13
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by Kukis13
-
-
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.
-
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
andend
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?
Animating path segments
in GSAP
Posted
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