We Keep Coding

How to move object along SVG path on scroll and speed up specific sections

I have a project in which I have a long SVG path. The SVG path is centered on the page and has a stroke "none" so that it is invisible. Then I have an image of a rocket. The idea is that this rocket should follow the path on scroll. Meaning for each pixel scrolled, it moves one pixel into the direction of the line.
This so far works great. I got the idea for my code from this stackoverflow question.
My problem now is the specific path I created for this. The path has sections in which the path turns sideways or even up (for a looping). The rocket should still follow in these sections, which it does as you can see on the live example here. But when moving through the looping the rocket leaves the view, because it is still moving at the same speed like the scrolling, but just away from the users scroll direction.
Now I would like to speed up the rocket when it is moving upwards through the looping so it doesn't leave out of view. Let's look at my code.
The Project is made in sveltekit, but that is not important right now because for my problem only the JS should be relevant. So for that matter here is the HTML:
<div style="position:absolute; top:0; right:0; left:0; z-index:1000; pointer-events: none;" id="route">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 966 4692" id="svgRoute">
<path id="path" d="M652 0V239.5V317.5C538.333 325.5 312.9 402.4 320.5 646C328.1 889.6 474.667 970.5 547 980.5C573.667 983 632 988.7 652 991.5C677 995 806 993 798 1118.5C791.6 1218.9 628 1275.67 547 1291.5C372.5 1294.67 30.1999 1323.2 56.9999 1412C90.4999 1523 171.5 1565.5 293.5 1607C415.5 1648.5 707 1657 786.5 1931C850.1 2150.2 436.667 2111 222 2064C64.5001 2047.5 -163.9 2094.8 182.5 2416C528.9 2737.2 800.5 2670.5 893 2597C984.5 2452 1061.5 2189 637.5 2297C213.5 2405 390.167 2773.67 531.5 2944.5C665.833 3062 924 3334.1 882 3482.5C829.5 3668 442 3885.5 420 3990C398 4094.5 764.5 4537 774 4691" stroke-width="5" stroke="red" fill="none"/>
<image id="c" x="-20" y="-70" width="40" height="70" xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAAF4AAACqCAYAAAAk0fhhAAAFP0lEQVR4nO2dzWtcZRSH36tjGKdNOkOSFpqk+RAtqVGEtGahWLQQF0JMKBhQqKjVnVu7dK3gqiC4qGDAhQtpCC4kEOgsKooWQWuDYD9i81EH25RGrUlTx3/gnIvvzXWeKfk9y9+de8+dh7M4vPcrqdfrodlIkiTPk0qskP7f96HVtzESDyHxEBIPIfEQEg+RkGOVNzaOjR/LrcbM9JRb3tvQCCfqeAiJh5B4CImHkHiIQiOKxE4vn53+JLfakxN2PjM95Y4uSZL87wtr6ngIiYeQeAiJh5B4iFzXavKaXqpnvndrPLKv1cx79naa+WZxl5lPTrzq1ohd38niUB0PIfEQEg8h8RASDyHxENHjZNpdXnmNjW++9pZb/4Xxl8z8nbft1TBvzCwUS26NFyeOm3meY6Y6HkLiISQeQuIhJB4i10t/vV3tZp5levFY/u2Gmb9/8rSZe9NO/0CvW8P7H3mijoeQeAiJh5B4CImHaMgNTR4rK9fMfOixx6OP5U07zYo6HkLiISQeQuIhJB4CnWo8zv/4g7tt38PxE08zoo6HkHgIiYeQeAiJh5B4iIaMk+X2DjP/4suZ6GN598ffvLZs5qWW5uyt5jyrbYDEQ0g8hMRDSDxEQ6aa7p4uM+/YvcfMdxY23WO1ljbMvFqzb7su3vnHzO3KjUMdDyHxEBIPIfEQEg+BXvq7urBg5qWif1qd5fvN/OLyX2Y+tKsl/sQagDoeQuIhJB5C4iEkHiLXqWZ17U6ehzO5e/ummb/7rH1laj0pmvmvi7+7NRrxP9TxEBIPIfEQEg8h8RASD+GOk1m+t7ejtbK1s9kCV2prZj7QZ5/TqQ/tdx+EEMJPv9Riy5uuvNehh6COx5B4CImHkHgIiYeIXiTr6Xva3bZnb/+WTua/0NkR9/akv9ftG6CycGTUfq/m3Kz7PkoXdTyExENIPITEQ0g8RMFbkxl+cszcoVa7t96ElCdjky9H/X5u1v+snToeQuIhJB5C4iEkHiJ6raa1Yj9Ith3o7rK/N5IFdTyExENIPITEQ0g8hMRDoE/9tZXtm42KD6Ts05ayMScOHhox86WV67nVUMdDSDyExENIPITEQ7hTTblcNvNHB/zXiJ+tnonKb7Vwt3W3baxG7/PUc8/nVl8dDyHxEBIPIfEQEg8RvVazdMn/cEr17Ndm3ldfMvPjz9hvf2wZtCeqEEJ4sP8hM799+aKZb8zb7z746Cv/XQa3KvvNfMfUSXefWNTxEBIPIfEQEg8h8RDuI9/BeUw8C68fHDTzU684O4ymPMR2YMDOL1yy89nLZvzGp36Jj7+b9zdGcGT0mB6pbzYkHkLiISQeQuIhJB7CXSRLG4U80p5yi2F1wf6gSgghVA7E7ZPnxcX2nkOmkycG7XE5DXU8hMRDSDyExENIPEShXrcHkZRXJqKsXbAv5TWC61e/NfM5J09DHQ8h8RASDyHxEBIP4a7VeNNOGt4kdONP+zNxIdyNrrG54N+IFIN/TvFkcaWOh5B4CImHkHgIiYdAH6n/5vPdZj5y1P7AbgghrO7vNfPKz/Y+Xo0Q8ns8PgvqeAiJh5B4CImHkHgIiYdIsizwuAfzLxeaRQ53D5s/fq9vp1tj5Kj9OThvbDxx5Q8zry6ec2uMDw6Zf2R6/rz5ey2S3UNIPITEQ0g8hMRDNGSRzJ8SzpnjwIlgTzshhBA+KDkb4qaXw93DKXdsrfubckIdDyHxEBIPIfEQEg+R61qNW8RZw/HWaqqL9rSThfTpxcabhPJ0pY6HkHgIiYeQeAiJh5B4iH8BrZ8Mhx0ulsYAAAAASUVORK5CYII="/>
</svg>
</div>
The div is id "route" and will be called as such multiple times throughout the JS. The <path> here is the line stretching through the whole page. The <image> is the rocket which I placed directly inside the SVG. The only relevant css is inside the style tag for the div.
Now for the JavaScript/jQuery
jQuery(document).ready(function(){
jQuery(document).scroll(function() {
positionCar();
});
// init the line car position
positionCar();
function positionCar() {
var scrollY = jQuery('#route').scrollTop() || window.pageYOffset;
var maxScrollY = jQuery('#route').prop('scrollHeight');
var path = document.getElementById("path");
// Calculate distance along the path the car should be for the current scroll amount
var pathLen = path.getTotalLength();
var dist = pathLen * scrollY / maxScrollY;
var pos = path.getPointAtLength(dist);
// Calculate position a little ahead of the car (or behind if we are at the end), so we can calculate car angle
var angle = calculateAngle(path, pathLen, dist, pos)
if (angle < 0) {
var pathLen = path.getTotalLength();
var dist = pathLen * scrollY / maxScrollY;
var pos = path.getPointAtLength(dist);
var angle = calculateAngle(path, pathLen, dist, pos)
}
// Position the car at "pos" totated by "angle" (if angle is upwards position further for more speed)
var car = document.getElementById("c");
car.setAttribute("transform", "translate(" + (pos.x) + "," + (pos.y) + ") rotate(" + (rad2deg(angle) + 90) + ")");
}
function calculateAngle(path, pathLen, dist, pos) {
if (dist + 1 <= pathLen) {
var posAhead = path.getPointAtLength(dist + 1);
return Math.atan2(posAhead.y - pos.y, posAhead.x - pos.x);
} else {
var posBehind = path.getPointAtLength(dist - 1);
return Math.atan2(pos.y - posBehind.y, pos.x - posBehind.x);
}
}
function rad2deg(rad) {
return 180 * rad / Math.PI;
}
});
So jQuery checks if document ready and binds a scroll handler which then calls the positionCar() function everytime a scroll happens to place the rocket accordingly. The function basically calculates the position off the car on the path line by scroll position and path length. Then it uses the calculateAngle function to check for the required angle ahead of the path.
The angle is used so the rocket follows the path an turns in the direction of the path. Then the rocket (here called car) is positioned at that position in that specific angle.
The if condition inside the positionCar() function for now does nothing different. It checks if the angle is below zero indicating the path going upwards (for example the looping). My idea now is to implement more speed inside this condition because it tells when the rocket is moving back up instead of down.
How would I accomplish this. I tried playing with the calculations but it just resulted in jumping around. By changing the dist variable I managed to get the rocket faster during upwards movement. This just resulted in the rocket jumping back as soon as the path moves back down. How would I need t implement faster rocket speed only during the upwards movement?
For playing around with it I created a REPL with the full code here: https://svelte.dev/repl/d2e449585ac14ec8aef1fd310fb14548?version=3.46.4

How to normalize the compass input?

I want to rotate the compass image according to the degrees I receive. The input degrees are between 0 and 359 so when I rotate -1 degree from 0 , the image rotates one complete round and sets on 359:
function setCompass(degrees){
$("#compass").stop().transition({rotate: -1*degrees +'deg'});
}
I tried to solve the problem by going back to -1 instead of 359 so I changed the code to the following:
function setCompass(degrees){
if (degrees>180){degrees=degrees-360}
$("#compass").stop().transition({rotate: -1*degrees +'deg'});
}
It solved the lag on 0 and 360 but the problem was shifted to 180. Now when I rotate the device from 180 to 181, it rotates a complete negative round to go back to -179 ! Please suggest me how to modify the calculations so I get smooth changes on every degree?

You could use some modulo formula to find out whether to turn clockwise or anti-clockwise. Persist the current angle with jQuery's data method (so you could have more than one such compass if you wanted to), and allow the angle that you pass as CSS value to be outside the 0-359 range.
Here is how it could work:
function setCompass(degrees){
var curr = $("#compass").data("rotation") || 0;
var next = curr + ((degrees - curr)%360 + 180*3) % 360 - 180;
$("#compass").data("rotation", next).stop().transition({rotate: -next + 'deg'});
}
// Demo with randomly generated angles between 0 and 359
setInterval(function() {
setCompass(Math.floor(Math.random()*360));
}, 1000);
<img id="compass" src="https://i.stack.imgur.com/zdHVn.png" width="100px" height="100px">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.transit/0.9.12/jquery.transit.min.js"></script>

SVG rotation with support for all Browsers

I have made a post on Friday already about how starting off to use an SVG animation to show the state of IO hardware.
I've read a bit now because im using CSS like so
svg {
transform: rotate(45deg);
transform-origin: 50% 50%;
}
where sadly the support for IE is by giving the attribute directly to the svg:
<rect x='65' y='65' width='150' height='80'
transform='rotate(45 140 105) rotate(-45)' />
Now I've used a rect as an example but I'm actually using a shape because I need to animate a needle for a Voltmeter.
I could use stroke maybe but it would look better with a real needle like thingy.
Now the problem I have with this is that after designing, there must be a function made in Javascript to get to the different states.
So I wanna rotate the needle for example 2 degrees for every value I get from the IO.
21 states are needed and it would be a hell of work to calculate all the positions for transform rotate when the attribute is set directly onto it.
Is there another way?
Thanks in advance.

Set an id attribute for your needle, so you can target it.
Find the center point to rotate about.
Set the minimum and maximum angle the needle can rotate to.
Set the minimum and maximum value you can receive.
Now, if your SVG content is part of the same document that runs the script, no matter if that is a HTML or SVG file:
var needle = document.getElementById('voltmeterNeedle'); // use your id
If you link the SVG content with a <object> or <iframe> tag from document that runs the script (<img> won't work):
var needle, svg = document.getElementById('embedingTag'); // use your id
svg.addEventListener('load', function () { // wait for load event
needle = svg.contentCocument.getElementById('voltmeterNeedle'); // use your id
});
...continuing for both:
var needleCenterX = 140, needleCenterY = 105;
var minAngle = -45, maxAngle = 45;
var minValue = 0, maxValue = 21;
function setNeedle (value) {
var valueRatio = (value - minValue) / (maxValue - minValue);
var angle = (maxAngle - minAngle) * valueRatio + minAngle;
var rotation = [angle, needleCenterX, needleCenterY].join(' ');
needle.setAttribute('transform', 'rotate(' + rotation + ')');
}

Raphael.js centered text on path

What I have:
Text along a path made out of circle. It uses Raphael.js and a function called textOnPath (found here: Raphael JS Text Along path ):
var pathTest = r.path(getCircletoPath(286, 322, radius)).attr({stroke:"#b9b9b9"});
textOnPath(message, pathTest, fontSize, fontSpacing, kerning, kerning, point, textFill, fontNormal, fontFamily);
JSFiddle: http://jsfiddle.net/zorza/62hDH/1/
What I need:
The text to be centered on top of the circle.
My approach:
Try to calculate where the text should start depending on the arc size and text width. I tried to calculate the text width by creating it's invisible clone with text() function and get it's BBox width.
It doesn't quite work and the results vary depending on the web browser, font used and number of letters and spaces:
var length = r.text(100,400,message)
.attr({"font-size":fontSize,'opacity': 0, 'font-family': fontFamily})
.getBBox()
.width;
var point = (Math.PI*radius - length*fontSpacing)/2;
JSFiddle: http://jsfiddle.net/zorza/k8vBy/3/
Could anyone point me in the right direction?

The easiest way, IMHO, is to create additional helper path that is raised by half of text size. http://jsfiddle.net/p84VQ/
Also, I find it a bit more convenient to define a circle and then get points at specified angle:
var Circle = function(cx, cy, r) {
return function (a) {
return {
x: cx + r*Math.sin(Math.PI*-a/180),
y: cy - r*Math.cos(Math.PI*-a/180)
}
}
};

Is path animation possible with SVG.js

There are many examples of SVG path animation, both natively
http://jsfiddle.net/FVqDq/
and with Raphael.js
http://jsfiddle.net/d7d3Z/1/
p.animate({path:"M140 100 L190 60"}, 2000, function() {
r.animate({path:"M190 60 L 210 90"}, 2000);
});
How is this possible with the svg.js library?

No, this is not yet possible with svg.js. I have been looking into it and it will be a rather large implementation. As I try to keep the library small it will never be part of the library itself, but I might write a plugin. Although at the moment I do not have much time on my hands so all help will be appreciated.
UPDATE:
This is now possible with SVG.js out of the box if you use paths with equal commands but different values.
But we also have a path morphing plugin for SVG.js which is probably the thing you are looking for.

There is a quick and dirty way to animate a line with svg.js:
http://jsfiddle.net/c4FSF/1/
draw
.line(0, 0, 0, 0)
.stroke({color: '#000', width: 2})
.animate(1000, SVG.easing.bounce) // Using svg.easing.js plugin(not required)
.during(function(t, morph) {
this.attr({x2:morph(0, 100), y2: morph(0, 100)})
})
Animating complex SVG paths as wout said will require a plugin.
Unfortunately I don't (yet) know enough about SVG, but I'm thinking of writing a plugin which would use the SMIL animation tag. Which is what is used in the first link of the question.

We can make path animation by finding the bounding box of your path and the do like this.
if your path having some clipping -rectangle means like that below
<g id="container_svg_SeriesGroup_0" transform="translate(128.8,435)" clip-path="url(#container_svg_SeriesGroup_0_ClipRect)"><path id="container_svg_John_0" fill="none" stroke-dasharray="5,5" stroke-width="3" stroke="url(#container_svg_John0Gradient)" stroke-linecap="butt" stroke-linejoin="round" d="M 0 -17.25 L 21.7 -112.12499999999999 M 21.7 -112.12499999999999 L 43.4 -51.75 M 43.4 -51.75 L 86.8 -25.875 M 86.8 -25.875 L 108.5 -155.25 "/><defs><clipPath id="container_svg_SeriesGroup_0_ClipRect"><rect id="container_svg_SeriesGroup_0_ClipRect" x="0" y="-155.25" width="118.5" height="148" fill="white" stroke-width="1" stroke="transparent" style="display: inline-block; width: 118.5px;"/></clipPath></defs></g>
var box = $("#"+ path.id")[0].getBBox();
create the rectangle based on the box and the set this rectangle as your clip-path in path.
then increase the width of the rectangle step by step in jquery.animate.
doAnimation: function () {
//cliprect is your clipped rectangle path.
$(clipRect).animate(
{ width: 1000},
{
duration: 2000,
step: function (now, fx) {
$(clipRect).attr("width", now);
}
});
},
jquery.animate step function is used to increase the width of your clip-rect step by step.

You can animate paths using the svg.path.js plugin.
See the first examples (using the .drawAnimated method).

Another option, which we've resorted to, is to use textPath and then use a character.
In our case we're using the • entity, but I'm thinking if you create your own typography in .svg, .woff etc, you can have flat shapes of any kind.
So you would use your character as in here:
http://jsfiddle.net/wbx8J/3/
/* create canvas */
var draw = SVG('canvas').size(400,400).viewbox(0, 0, 1000, 1000)
/* create text */
var text = draw.text(function(add) {
add.tspan('•').dy(27)
})
text.font({ size: 80, family: 'Verdana' })
/* add path to text */
text.path('M 100 400 C 200 300 300 200 400 300 C 500 400 600 500 700 400 C 800 300 900 300 900 300')
/* visualise track */
draw.use(text.track).attr({ fill: 'none'/*, 'stroke-width': 1, stroke: '#f09'*/ })
/* move text to the end of the path */
function up() {
text.textPath.animate(3000).attr('startOffset', '100%').after(down)
}
/* move text to the beginning of the path */
function down() {
text.textPath.animate(3000).attr('startOffset', '0%').after(up)
}
/* start animation */
up()