🦊 Motion is Life
#93 — Momentum over motivation, animating my website, and the power of taking walks.
Hey friends,
Today’s letter looks at the magic of motion from three different angles:
Momentum over Motivation: A little action can build a lot of creative momentum
Interface Animation: A little animation can make a website feel alive
Taking Walks: A little walk can heal the mind, body, and soul
Don’t Wait for Motivation, Act for Momentum
I spent most of Saturday cleaning and reorganizing my office. I had no intention of doing it—it kind of just happened.
I saw a book on the floor and picked it up. I figured I might as well pick up the other ones lying next to it, so I did. Then I decided to go through a box of stuff next to that. I threw away some things, boxed others for donation, and moved a third box into our shed. Then I did some adjustment on the shelf to give me another row for books. Before I knew it, I had organized the entire room. I’m so happy with the result!
I started with a tiny thing, then rode the momentum until my room was transformed. Such is the power of momentum.
I wrote about momentum in a newsletter a couple of weeks ago, and have since drawn a new comic for it and polished it up into a new essay on my blog, including a new comic.
Read the essay: Don’t wait for motivation, act for momentum.
Animating Salman.io
My website, salman.io, is a custom-built site that leverages the Hugo static framework. Although it’s a little more work to maintain than a plug-n-play solution, I really enjoy the flexibility and control. I write everything in Markdown, and simply add Markdown files into my site’s repository folder on my computer. I then do a single push to a Github (the repository where the code is stored in the cloud), which triggers a deploy, and my site updates. It’s a simple and reliable workflow that has served me well for many years.
Another major benefit of a custom-built site is that I can completely customize the UX. I get to channel my creativity into the medium of my site, not just the message. Recently, I spent some time adding a couple of subtle animations ✨ In today’s letter, I’ll share how I implemented two animations on my site, both of which were done entirely with CSS—no Javascript needed! If you host your own site and give these a try, feel free to reply with any questions you might have. I’m always happy to help with animations :)
The first effect I added was a subtle hover magnification on the social links:
To achieve this effect, I used a CSS transition with the `transform` property. In the snippet below, I’m targeting the images inside the links in the nav header.
We declare that the image is going to have a transition on its transform property. The duration is set to 200ms to keep it fast and light. CSS transitions allow you to set the animation curve , but the default is `ease`, which works for most cases.
.header .nav a img {
transition: transform 200ms;
}Then, we apply the “morph” that we want upon hover of the image:
.header .nav a img:hover {
transform: scale(1.1);
}A scale of 1.1 is the equivalent of making it 110% of its size. I could have had a much bigger scale, but I like to keep it subtle. The effect I was going for was to mirror the Dock animation in macOS (I keep the magnification scale very low there, too.)
Next up, I added a little hover effect to all links, so that the underline expands out from the center instead of just appearing:
If you want to try and implement the link underline animation on your own site, check out the tutorial from Tobias Ahlin which I followed to implement it.
The key, as always, is to keep animations subtle. As Josh Comeau says, “Animation is like salt: too much of it spoils the dish.” (BTW: If you’re looking to level up your CSS game, check out Josh’s course CSS for Javascript Developers.)
Happy animating!
Taking Walks
I enjoyed this Twitter thread by Charlotte Grysolle on the power of taking walks. She shares the biggest benefits of walks: Modulating your circadian rhythm, getting your creative juices flowing, reducing anxiety, and the natural benefits of movement for the body.
Walks have been a core part of my life for many years now. I treat them as a chance to unplug, so I avoid listening to podcasts (though I like listening to music sometimes.) I try to focus on the ground beneath my feet, the trees swaying next to me, and the birds chirping around me.
I often find that ideas come to me after a walk, or solutions will show up to problems I was previously stuck on. This seems to happen even if I don’t think about the problems at all. This is, as far as I understand, because the subconscious goes and works on problems while we engage our bodies in other activities. As it turns out, the subconscious is a pretty great problem solver, and it can often solve problems we can’t solve through thinking.
There’s a great book called Rest by Alex Pang I read long ago which helped me appreciate the importance of resting our active mind to allow our subconscious mind to do its work. For more ideas from the book, checkout this note I published with key takeaways:
I’ll leave you with the these wonderful words from Søren Kierkegaard on the power of walks:
“Above all, do not lose your desire to walk: Every day I walk myself into a state of well-being and walk away from every illness; I have walked myself into my best thoughts, and I know of no thought so burdensome that one cannot walk away from it.”