Animating Line Drawing With CSS Keyframes

I’ve set out to attempt a redesign of a site that I worked on a few months ago. That site was created with React, and was designed by me with little outside influence, and it shows… It’s a large pale-blue site reminiscent of something that you might have seen on the internet in 2005. And it has tons of (possibly obnoxious) little animations that I created by bringing in two separate React libraries — which is probably not the best use of resources. I now recognize the importance of not overdoing it with the animations, but I think that by avoiding animating large sections of the site, and sticking with more subtle implementations I will be able to create a design that is a little more tastefully done.

On my portfolio site, which I used a template from html5up to create, there is an effect that I enjoy on the header, in which two lines are drawn on top of, and below my name. One line is drawn right to left, and the other is drawn from the left to the right. It’s a simple-looking effect, that I think fits into the category of being tasteful, and so it was something I was looking to replicate on my own site. Sadly my screen recording app made the animation look a bit choppy, but see below for the finished product.

However, to get here it was quite the process. To begin, I had to write the HTML — that is not the tricky part, but it’s still important to set it up correctly to ensure that I would be able to target the desired elements for the animation.

<header class='header'>
    <div class='header__box'>
        <h1 class='header__title header__title-main'>
            The Penn Central Wind Band
        </h1>
        <h2 class='header__title header__title-sub'>
            William Kenny, Conductor
        </h2>
    </div>
</header>

In order to get the top line to draw to the right I was able to pretty quickly pull some code off of stackoverflow to write the keyframe animation rule. However, to get the bottom line drawn from the right to the left I had a bit more trouble. I’ll include some more complete code at the bottom, but I thought that if I could take the rule used for the draw right animation, and do a simple translate on the line element that it should work ok.

I had hoped that by translating the lower line over to the right by 100% of it’s size, that when its width expanded it would simply look as if it were being drawn from the right to left. However instead this created this odd sort of sliding effect, which I think it it were altered a little bit that it could be used for some kind of animation where the line is drawn out from the center, but it’s not what I was going for.

At this point, I had the idea to try to rotate the bottom line by 180 degrees so that it would be upside down. I thought that if I could successfully do that, then I could even just use the lineDrawToRight animation, as the rotation would cause the animation to be flipped.

As seen above, the rotation idea got me nowhere. I also tried rotateX and rotateY, but neither did what I was hoping, nor did they look as interesting as the basic rotate function.

Just as I was getting ready to give up, I stumbled on a solution. If I move the line all the way to the right at the beginning of the animation while also making the width 0, when the animation runs as the line both slides to the left and its width expands, it gives the exact appearance that I was looking for.

I know I mentioned before about how I wanted to avoid going overboard with the animations, but I can’t help but think that it might look a little if the text was made to fade in, and a delay was placed on those line animations so they wouldn’t begin until after the text was visible. I think that might be a little simpler for me to implement, so I think next I’ll continue with adding the rest of the animation, and will be sure to scrap it if it becomes tacky.