Moving a ball along an SVG path

Hi,

I have a similar question to one of my previous threads:

I would like to have the black ball move inside the red outline as the user scrolls down the page, but not sure how to do this. I also have a version that is a solid red shape, but I guess if I can get the principle of how to do it, I can apply it to the solid one.

I’ve attached the shapes as a PNG (It won’t let me upload SVGs) if that helps.

I think I asked before, but are there any online tools that would allow me to do this?

Thanks!


You have two options for that problem…

  1. put the svg’s in a zip file and upload that.
  2. post the HTML code for each svg.

…take your pick

Thanks, have uploaded as a zip :slight_smile:
shapes.zip (1.9 KB)

The svg’s do not actually look like the png images
which you posted earlier. :unhappy:

Apologies! I have uploaded the correct versions :slight_smile:
shapes.zip (2.4 KB)

The following is only supported in Chrome at the moment but you could do this with css using the scroll-timeline.

It just means using the path in the svg as the offset-path in the css and then animating the offset path.

This basically means that you don’t need any calculations as you can use the svg path although I think you could have simplified the path as a solid line.

It’s much the same as that old letter M animation I did for you.

If you wanted full browser support then instead of the scroll-timeline in the css you could use JS and dynamically update the offset-distance in the css (use a variable) and base it on the scroll of the document.

I’ll leave that to someone else :slight_smile:

2 Likes

Thank you very much for this, I really appreciate it. Hopefully it will become cross-browser compatible someday!

I keep seeing GSAP used for animations, but that’s just another heavy library to include for one or two animations.

1 Like

You could consider using <animateMotion>. Here is a demonstration of the ball moving when scrolling starts: I think this will work on all modern browsers.

2 Likes

Using the simpler path kindly provide by @Archibald my demo could be much simplified. :slight_smile:

1 Like

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.