Focus on headline animation

Post #9 published on 2024-11-12 by Tobias Fedder

I was playing around with an animation that imitates the zoom and focus of a camera lens. I don't remember what sparked that curiousity in me; I know I wasn't taking pictures though. Zooming out while focussing, overshooting a tiny bit, then returning to the crisp look of sharp focus, that's the effect I was going for. The feeling of zooming and focussing using your hand, or using slooooow auto‐focus — the Good Ol' Days™.

To achieve that I used scale and filter: blur() in a @keyframes at‐rule. It applies to the <h1>s of my blog posts, given that you haven't told your browser to ask for reduced motion. Once again you wish you could set those preferences per site, don't you?

@keyframes lens-focus {
	from {
		scale: 3;
		filter: blur(.6em);
	}
	50% {
		scale: 1;
		filter: blur(0);
	}
	75% {
		scale: 1.1;
		filter: blur(.08em);
	}
}
	
@media (prefers-reduced-motion: no-preference) {
	#title {
		animation-name: lens-focus;
		animation-duration: 1s;
		animation-timing-function: cubic-bezier(.72,1,.72,.94);
	}
}

main {
	overflow: clip;
}

You are seeing that right, the first step starts with from, but the other two use percentages. The overflow: clip should prevent the appearance of a horizontal scrollbar while scaling (let me know if it doesn't 😬). Just so you know: I didn't do any math on how lenses work — optics is really hard. So I didn't do any math on the CSS as well. All magic number only, in the keyframes and the timing function. Maybe there is a way to couple scale and focus proportionally in a pleasing manner. Then a well calculated cubic timing function might be able to do this; the new linear() function could certainly do that. At that point a single step in the @keyframes at‐rule would suffice.

But I like it the way it is. Why bother doing it better when it's against the rules anyway. I didn't plan to do silly useless CSS here before getting the baseline in order, yet here I am. It's my site, nobody else stopped me; I didn't either.

But why put it on the headline of the blog posts?
That's a good, very smart question. Really shows how considerate and attentive this (imagined) audience is. So obviously…
…a blog post…
…begins with getting into a topic — be it out of a long felt need or just on a whim — then turns into wrestling with mirages, heading back out of dead ends that looked promising when entering them. But when it gets to writing a blog post, it's time to zoom out of all that and focus on the essence, maybe place an important detail here and there. At least that's what some of them aim for.
And this blog post is for sure a prime example of that.

Side note: I also fixed the <title>. It does no longer contain the | (vertical bar, pipe symbol). Sara Soueidan's course Practical Accessibility taught me that this can be an accessibility issue with screen readers. Now I finally fixed it on this site too.