Some things you should know about me:
I am a mom! I have a dog! I work full time! I have a life! I have very little time to do dev work outside of my actual job. So that means that if my job doesn't require a skill, I rarely have the opportunity to spend time improving in that area 🤪.
An example of an area I rarely get to dabble in: Animation. I am also not very artistic. The idea of being asked to animate anything makes me nervous because I feel like I am just so abysmal at it. BUT I do really admire the people who CAN build fantastic animations.
So my mini-project for the week:
Spend 30 minutes a day trying to make some little animations. 30 minutes because that’s about all the time I get before someone requires my attention. Also it’s low pressure - no one is going to build something fabulous in 30 minutes, so I don’t have to expect too much of myself, but at least I could play around a bit in that time.
I wanted to share some of my explorations in this post, as well as share some things other people built that inspired me 🙂
First up: Some text animation
My first foray into animating is pretty shamelessly inspired by a very fantastic animation by Rachel Smith that you can check out here
Featuring: Some simple CSS animations on letters as well as very basic animation on a SVG to create a rainbow.
From there I thought I should try to be more original and not be so inspired by someone else’s work, so I came up with this other text animation, which has probably been done before as well, but it was new to me:
Moving beyond text
I saw this really cool star rating animation by Aaron Iker and thought I’d do a little rating animation of my own. It is about 75% less cool than the inspiration, but that’s ok -
Then I saw this really gorgeous Pokemon animation and 🤤 I loved it ♥️. I figured I could do something kind of similar but simpler. There's no way I can draw a Bulbasaur and a Pikachu hanging out, but I thought I could manage a sunset/moonrise:
And that’s about where I left it!
A few thoughts on the outcome:
I don’t feel like my skill level got way better through these projects... it’s probably about the same as it was before. But it gave me the confidence to try and play around and makes me want to do more in the future. I imagine if I keep practicing I will improve 🙂
😁 A challenge for you - It’s kind of a fun exercise in general, so I thought I’d challenge anyone who reads this to embark on a similar project, either by:
Pick something you want to be better at and devote 30 minutes a day for a week, see what you come up with
Or, if you want to stay in the animation genre, share in the comments an animation you’ve done that you’re especially proud of.
Thanks for reading and putting up with my shameless self-promotion of silly codepens I have built 🤗
Honourable mentions: A few other cool codepen pens I found:
If you can do all that with 30 minutes a day, girl you're going to be on fire in a few weeks, fantastic! :) You've inspired me to take this approach to getting better at CSS!