I made this Newton’s Cradle loading animation.

You [sarcastically clapping]: Nice job. I bet you used a bulky javascript animation library though.

Me: Nope, no JavaScript!

You [raising an eyebrow]: No JavaScript, eh? Fancy CSS keyframing then.

Me: Wrong again! No CSS either.

You:

Excellent choice. I did it with SVG animation. It's a thing! And now that Edge is based on Chromium, it _may_ be viable for your project. Probably not though. You'll find full code at the end.

The Basics

First we need some clackers. Here's four of them.

html
html to make clackers
    
css
css to style clackers
    

Adding Motion

SVG provides the `animate` and `animationMotion` tags. With `animationMotion` you can tell an object to follow a path. Let's define that path for the circles to follow.

 DEMO GO HERE 

Let's get these clackers movin'. Drop those paths into the `path` attribute. We also need to specify which clackers to animate.

 DEMO GO HERE 

After carefully assessing this animation, I observed that it looks disgusting. I need these clackers to delight. Let's make this look real.

Realism

I'm pretty sure this looks bad because those clackers don't look like they're obeying the law of gravity. Let's apply some justice. We can leverage the `keyPoints` and `keyTimes` attributes of `animateMotion` to tell our clackers where to be (`keyPoints`) at what time (`keyTimes`). Each number in `keyPoints` specifies how far along the `path` to be at the corresponding key time.

Armed with this knowledge, here's what we'll do: generate twenty evenly spaced values for `keyTimes`. Like this:

SOME EVENLY SPACED KEY TIMES
Next, let's decide where the clacker should be at each of those times.

Cracking open the ol' physics book, I see the equation for gravity has one of those little floaty 2's. That means quadratic right? Let's roll with it. I'll use a python script to calculate how far along the path I want the clacker to be at each of my evenly spaced times.

python
python magic boi
  

So what do those points and times look like as `keyPoints` and `keyTimes`?

DEMO GO HERE

It's working. Slight problem. We need the clackers to be in opposition to each other. Each clacker needs to spend half of its time sitting there, just waiting to be clacked. Let's throw in twenty extra key times and make the key points 0 for all of those.

DEMO GO HERE

It's working. Let's offset the right hand clacker by half the duration of the animation now.

DEMO GO HERE

It's working. Here's the full code:

 FULL CODE GO HERE