In this article I’m going to cover an easy, fun, pure CSS animation to add flare to a website. I will also outline the practical steps for how I’m including this trick into a Jekyll site. This very site in fact.

As this is a new blog (48hrs old) and just an out of the box common Jekyll build, I’m looking at it and some personalization is in order. Fortunately I don’t have time to get sucked into making my own theme from scratch, but some customization can’t be helped. The 1st such item I chose to address was the site name header. Which was incredibly boring. I mean given this is my first Jekyll blog in my real name instead of an alias like all my older ones, something fancier and dare I say even celebratory, was definitely in order. It’s not a capital crime to stray from the minimalist ethos is it? Glad we agree.

So I was digging through my old Codepen account and an experiment from 2015 stood out out to me. It was used as a promo on a video streaming project I abandoned at the time (LiveTube). But I still liked it and a lightbulb went off. If you’re reading this, you’ve already seen the animated header at the top of this page. How is it done?

(hit the rerun button in the box below to see the animation)

This effect I love is actually incredibly simple. The basic premise is the element width and wrapping is set such that the string of text is line wrapping after each letter, thus forced to display itself as a vertical line of letters. The keyframe animation is that these restrictions are lifted gradually over a period of 2 or 3 seconds, until its final display appears as normal horizontal text. No heavy Javascript libraries required, it’s a pure CSS effect. Cool!

See the Pen Letter Shift CSS Text Animation by ray kooyenga (@deadflowers) on CodePen.

Is that all? Almost. I’m also employing a gradient text fill using background clip in CSS to give it the cool color effect. I might republish an old tutorial on how to do various gradient text fills, but in 2022 it’s nothing new and pretty straightforward.

What else? Well, if you’re going to incorporate something like this into your website a few additions are necessary. You might be wondering, “But Ray if I’m violently changing the size of an element relative to other elements won’t that jerk the entire page content up-and-down and trigger an epileptic seizure in my readers?” Yes! Yes it will! Not good dude.

So obviously one of the 1st things that you need to change is the positioning of the element, to absolute This way your animation element exists independent of your other page content. Then to make sure it doesn’t get overlapped by anything because there’s no Earthly reason to ever not see your header text, set a z-index property to a high value.

Another adjustment I’m tweaking is the margins so that half the animation doesn’t disappear above the page. Plus I like the “slide-up” effect I’m producing. Classy AF.

What would be proper best practices for adding these cool CSS mods to my own Jekyll theme? I’m the wrong guy to ask honestly as I’m not sure and don’t really know Jekyll But what I’ve done in the interest of preserving the integrity of the theme and keeping things separate, is I created a separate CSS file called overrides.css I’ve then added a link rel=stylesheet tag to the html in the head.html file in the _includes folder. This in turn gets pulled in by all relevant layout types in the _layouts folder. So I add one line in one file, and it effects everything. I also place my new CSS file in assets/stylesheets so Jekyll includes it in my outputted _site/assets/stylesheets in the build process. I think it’s a reasonably Jekyll’ish solution, but I’m open to feedback on it.

You can inspect the file yourself here overrides.css You’ll note there aren’t many changes in there yet as the site is 2 days old. But on my priority ToDo list is changing the default post-title size as on a desktop display it’s absurdly large. And every <p> tag after the initial one is in IMO criminally, illegibly, tiny. So I’ll be making some changes to the font sizes and keeping all these overrides separate here and will later add them perhaps into the theme files.

The obscure @import URL you may notice in there is to Dave Gamache’s “Skeleton” which I’m hosting in one of my “commonly needed” web assets S3 buckets at AWS and served via my CloudFront edge cache. This isn’t likely a permanent inclusion and its impact negligible. But I love Skeleton as a lightweight not-quite-framework and many past projects I’ve used it for came out great.

One more thing I should note. Because I’m actively tweaking the file I need to bust the cache on my stylesheet or else my updates won’t show. Lotta ways to handle that. But I’m doing cache-busting in the _includes/head.html by appending the date/time to the href for my CSS file in Liquid brackets. Because it’s a tiny file I’m not concerned with overhead going this route.

That’s all for now. Thanks for reading and joining me on my Jekyll blog journey. I hope you found it interesting!

❤️ Ray Kooyenga