Some of my recent Codepen doodles

Back to all posts
Projects
26th March 2020
@fraserboag on Codepen

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.

See the Pen Fancy Text Animations on Hover/Tap by Boag (@fraserboag) on CodePen.

Moneybox Style Pin Entry Dialog

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.

Simple Tabbed UI Component

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.

Split RGB Channels with "multiply" Blend Mode

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.

Comment on this post

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.

Tweet

Keep up to date

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!