First thing I need to learn to make work: how to animate a sprite of a running person so it runs on the spot. Downloaded free sprite of man running from vecteezy.com
Okay animating my first sprite sheet took almost 30 minutes but it's done. A bit janky at parts but it does create the illusion of a running person, albeit on the spot. Even resizes to fit the viewport for smaller devices!
Next, to create two lanes, and animate the guy moving left to right.
This one's just bad. I don't have the CSS animation skills to pull off something even close to what I imagined in my head, so I'm going to explain in words just wtf is going on here:
- I wanted to animate two lanes, one stacked on top of each other, where the background moves infinitely toward the left, making it look like the man is running to the right at a certain speed.
- I wanted the speed of running of both men to be the same at the start.
- But I wanted to show that the first man, because he runs consistently without pausing, will start to pick up pace to a terminal velocity. Huge momentum. Meanwhile, the bottom lane guy will always slow down for a while before picking back up again.
Alas, I failed tragicomically!
The story I wanted to tell was the cost of context switching, and how, in order for us to really accelerate our growth in one area, we'd need to say "no" and eliminate our commitments in other areas.
Drawing from my life right now, I have this Everydays project where I want to make one web project everyday. Even if I fail, I know I'm learning. But I also have a weekly newsletter commitment. I don't see myself being very happy if some days each week I have to set aside time for BOTH coding the web project and writing a newsletter. I'd have an infinite back-and-forth in my head about which one is a higher priority (neither! they must both be done!) and knowing myself, that would just lead to me doing subpar work out of resentment.
Yeah, I wanted to illustrate that.