Hello great almighty GSAP forum, here I am with another question I'm having.
Goal
create some sort of traveling trail emitter that follows the object and being manipulated by scroll event. Also everything is responsive, relative to the SVG size.Progress/ attempts
Got most parts working, however there're a few visual things I just can't figure out.
I've tried manipulating x,yPercent, transformOrigin, svgOrigin on the <image> tag inside the <svg>
Help needed
I'd like to know how to make the image's transform origin to the tip or tail of the arrow
how to properly adjust the emit position so it sync with the arrow tail.. Actual travelling route doesn't have to follow the predefined path strictly, it's more important getting the emitter right.
I don't know how autoRotate works under the hood, by the look of the relationship between particle and the arrow position, seems like a "invisible bounding box" is created, and the arrow rotate inside the box, and the box takes on the bezier curve data.
Question outside of this topic
Why isn't <image> tag visible on Safari, let alone IE??
The emitted particle shows on Safari but seems the percentage position is way off? Seems like line 48-51 behave differently on Safari.
Added on 19th of April
To answer my own question for peoples reference. <image> tag needs an inline width and height attribute in browsers other than Chrome, somehow other browser can't take the CSS and apply it to <image> tag within svg;
Thanks a lot!