Moving SVG object on guideline using javascript

Question

I'm trying to move SVG object on guideline I created, my code is based on this one, but I can't figure out why mine doesn't work and the codepen I shared does.

function positionTheElement() {
 var html = document.documentElement;
 var body = document.body;
 var scrollPercentage = (html.scrollTop + body.scrollTop) / (html.scrollHeight - html.clientHeight);
 var path = document.getElementById("trace");
 var pathLen = path.getTotalLength();
 var pt = path.getPointAtLength(scrollPercentage * pathLen );
 var element = document.getElementById("etoile");
 element.setAttribute("transform", "translate("+ pt.x  + "," + pt.y + ")");
};
window.addEventListener("scroll", positionTheElement);
positionTheElement();

How can I animate the SVG polygon on the path guideline correctly?

user_7897395 · Answer

You have 2 errors:

the star should have the center in the origin of the svg canvas (x=0; y=0).
the path trace has to be reversed. The way it's drawn (from the bottom up) would make the star begin it's movement from the bottom of the document to the top.

function positionTheElement() {
 var html = document.documentElement;
  
 var body = document.body;
 var scrollPercentage = (html.scrollTop + body.scrollTop) / (html.scrollHeight - html.clientHeight);
 var path = document.getElementById("trace");
 var pathLen = path.getTotalLength();
 var pt = path.getPointAtLength(scrollPercentage * pathLen );
 var element = document.getElementById("etoile");
 element.setAttribute("transform", "translate("+ pt.x  + "," + pt.y + ")");
};
window.addEventListener("scroll", positionTheElement);
positionTheElement();

Moving SVG object on guideline using javascript

1 Answers