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.
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.
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!