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) →