Today we’d like to share a simple morphing page transition effect with you. The idea is to morph an SVG path while moving an intro page up, creating an interesting, flowy look. For the animations we use anime.js and for some letter effects we use Charming. In the demos we use an “intro transition” in order to showcase the effect, but that’s of course only one of the many use cases for this kind of page transition.
Attention: For the demos use some modern properties like CSS Flexbox and CSS variables without a fallback, so please view them in a up-to-date browser.
The structure that allows us to move the shape along with the intro content, looks as follows: