
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.
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.
See the Pen Fancy Text Animations on Hover/Tap by Boag (@fraserboag) on CodePen.
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.
See the Pen Moneybox Style Pin/Password Input by Boag (@fraserboag) on CodePen.
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.
See the Pen Simple Tab UI Component by Boag (@fraserboag) on CodePen.
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!
See the Pen Splitting out RGB channels and multiplying them by Boag (@fraserboag) on CodePen.
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!