Animating Text Underlines

Instead of resorting to faux underlines using injected content, Michelle Barker shares that we nowadays can animate the text-decoration-* properties to achieve similar (and better) results.

This approach however won’t work in Chromium, as only Firefox/Safari support animating text-underline-offset at the moment … but thankfully a tiny amount of CSS Houdini Magic can be sprinkled on top to make Chromium happy 🤩

See the Pen
Underlines (Chrome solution with Houdini)
by Michelle Barker (@michellebarker)
on CodePen.

Animating Text Underlines →

Drop-in CSS transitions with transition.css

transition.css is a handy stylesheet by Adam Argyle, full of transitions you can apply on your page. Simply import the stylesheet and set a transition-style attribute on the elements you wish to animate for the effect to kick in:

<link rel="stylesheet" href="https://unpkg.com/transition-style" />
<div transition-style="in:wipe:up">👍</div>

Not explicitly mentioned on the demo page (but is in the docs) is that you can tweak the delay using the --transition__delay Custom Property. Custom Transitions also possible!

transition.css →
transition.css Source (GitHub) →

An Interactive Guide to CSS Transitions

Putting libraries like GSAP and Framer Motion and React Spring aside, Josh W. Comeau digs into the transition property — “the CSS motion workhorse” as he calls it — and easing functions.

I especially like the sandbox at the very end of the post that lets you play the various easing functions and framerate

An Interactive Guide to CSS Transitions →

Morphing Page Transition

A simple morphing page transition effect where an SVG path gets morphed into another while the current page moves up.

Whilst the intro/splash screen is translated vertically over a distance of 200vh the shaped in the SVG at the bottom grows from a few pixels in height to 100vh, creating the gooey effect.

<div class="content content--intro">
	<div class="content__inner">
		<!-- ... -->
	</div>
	<div class="shape-wrap">
		<svg class="shape" width="100%" height="100vh" preserveAspectRatio="none" viewBox="0 0 1440 800" xmlns:pathdata="http://www.codrops.com/">
			<path 
				d="M -44,-50 C -52.71,28.52 15.86,8.186 184,14.69 383.3,22.39 462.5,12.58 638,14 835.5,15.6 987,6.4 1194,13.86 1661,30.68 1652,-36.74 1582,-140.1 1512,-243.5 15.88,-589.5 -44,-50 Z" 
				pathdata:id="M -44,-50 C -137.1,117.4 67.86,445.5 236,452 435.3,459.7 500.5,242.6 676,244 873.5,245.6 957,522.4 1154,594 1593,753.7 1793,226.3 1582,-126 1371,-478.3 219.8,-524.2 -44,-50 Z">
			</path>
		</svg>
	</div>
</div><!-- /content--intro -->

<div class="content content--fixed">
	<div class="content__inner">
		<!-- ... -->
	</div>
</div><!-- /content--fixed -->

The SVG path data is morphed using a CSS animation, as both paths contain the same amount of points.

Morphing Page Transition →

Did you know it’s possible to change SVG path data with only a tad of CSS?

Full page transitions with jquery.smoothState.js

smoothstate

jquery.smoothState.js lets you add transitions to eliminate the hard cuts and white flashes of page loads that deface the beauty of the user experience.

Works by hijacking links, requesting the target URL over XHR, and then replacing the content of a specified element on the current page with the contents of that same element from the new page. A browser that supports window.history.pushState required though.

jquery.smoothState.js →
jquery.smoothState.js Source (GitHub) →