Quick Demo: Animating on an Oval Path

I was experimenting with animating a planet for the new NEJSCONF web site (early bird tickets now available) and stumbled upon this amazingly detailed Codepen of our Solar System. Fortunately, it did exactly what I wanted—so I set out to parse the CSS secrets (nay, Tricks) within. While the code didn’t make it in to the final site, I thought I’d publish a pared down version of the demo in case someone else might find the simplified CSS useful.

Demo

Download as .zip

This is the general idea, without any extra demo style junk:

And this video is a really good, simple explanation of how it works. Look at that plane rotate.

Here’s a more polished view, with demo styles and images. These extra styles are separated out on the demo page, to make it easier to understand what’s going on.

Requirements

This demo uses CSS variables because it makes it easier to read the code and see which pieces are related. I’d recommend removing those if you’re gonna put this into production.

Update: sorry for the framerate of those videos. I’m using Kap and I’ve bumped up the default FPS for next time.