Sometimes I get a little half idea that I want to explore, or see something inspiring that someone else has created, and need somewhere to just throw around some code and get the creative juices flowing - this is why I love Codepen and the spontaneity it enables. You can follow me, and see all of my doodles, here.
Fancy Text Animations on Hover/Tap
I ended up liking this technique so much that I used a simplified version of it throughout this website. The animations in the codepen are mostly a little OTT, but it was useful to explore the possibilities.
I wrote this little utility in such a way that the markup could remain as un-sullied as possible, with literally just the addition of a class. The Javascript then does all the heavy lifting on page load.
Moneybox is my current investment app of choice - I don't think that's down to their login animation, but it's certainly pleasing to the eye. My version isn't an exact replica, but was heavily inspired by it.
Not much to say about this one really - I felt like making a little chunky bit of interaction with a few micro-animations and some nice blocky shadows, this is what came out.
I pulled this together when I was exploring the CSS mix-blend-mode property. As you'll see if you inspect the code, the HTML is a simple <h1> tag and the JS then rips this apart and performs the magic on page load. I tend to componentise things like this when I plan on using them in the real world, but this one never got over the finish line seemingly!
I love to talk web. If you have any civil thoughts, corrections or comments on this post, feel free to tweet or DM @fraserboag or, if you prefer, email fraser.boag@gmail.com.
From time to time I post things which people seem to find fairly interesting, stick your email address in the box below and I'll make sure you hear about it!
Projects
26th March 2020
Tweet