Zach’s ugly mug (his face) Zach Leatherman

Quick Demo: Animating on an Oval Path

May 17, 2017 On Twitter (archived)

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.


< Newer
Laissez-faire Font Smoothing and Anti-aliasing
Older >
Wait, WebP is actually worth it.

Zach Leatherman IndieWeb Avatar for https://zachleat.com/is a builder for the web at IndieWeb Avatar for https://fontawesome.com/Font Awesome and the creator/maintainer of IndieWeb Avatar for https://www.11ty.devEleventy (11ty), an award-winning open source site generator. At one point he became entirely too fixated on web fonts. He has given 83 talks in nine different countries at events like Beyond Tellerrand, Smashing Conference, Jamstack Conf, CSSConf, and The White House. Formerly part of CloudCannon, Netlify, Filament Group, NEJS CONF, and NebraskaJS. Learn more about Zach »

2 Comments
  1. Šime Vidas Disqus

    17 May 2017
    You seem to be using Firefox’s animation inspector :-D https://www.youtube.com/wat...
    1. zachleat Disqus

      17 May 2017
      Heh, nope! That was Chrome 😎
Shamelessly plug your related post

These are webmentions via the IndieWeb and webmention.io.

Sharing on social media?

This is what will show up when you share this post on Social Media:

How did you do this? I automated my Open Graph images. (Peer behind the curtain at the test page)