Morphing Page Transition

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

By in Playground on
Demo Code

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.

MorphingPageTransition_Featured

This demo is kindly sponsored by PageCloud, the website builder you’ll love to use.
If you would like to become a demo sponsor, you can find out more here.

Attention: For the demos we 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:

<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 fixed content lies beneath the intro content, and once we move the intro content up, it gets revealed. At the same time we morph the SVG path into the one defined in the pathdata:id. When creating the two paths, one needs to make sure that they both have the same amount of points so that the morphing happens smoothly.

Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.

MorphingPageTransition_01

MorphingPageTransition_02

We hope you enjoy this little effect and find it useful!

References and Credits

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

Tooltip to Gallery Transition

Inspiration for Text Block Transitions

Background Shift Animation with CSS Blend Modes

Stay in the loop: Get your dose of frontend twice a week

Fresh news, inspo, code demos, and UI animations—zero fluff, all quality. Make your Mondays and Thursdays creative!

Feedback 21

Comments are closed.

  1. Nice post – I don’t suppose you could list the browsers this will be supported in?

  5. Nice post. I especially like the last effect.
    I would be nice if you added some PJAX like with barba.js or smoothState.js

  8. Keep getting this error on line 14 in the demo1.js file – null is not an object (evaluating ‘DOM.intro.querySelector’)

    “DOM.shape = DOM.intro.querySelector(‘svg.shape’);”

    Anyone have an idea why?

  10. Articles on this website can offer more than an entire 4-year education from any university. It is simply Amazing and astonishing at the same time that you people put in so much of effort in publishing those articles. Keep up the good work.

    • So true. I concur with you @Manu. Most of the articles here are worth more than you can get at any university. And it’s free.

  11. Hi,
    is it possible to make that effect on the same page – scroll transition beetween two sections?

  12. Amazing, love the effects. Having this kind of transition effect on your web page will lift up the UI experience and users will be impressed. I regularly check this web platform cause I always find something new and unique which can make your online presence stand apart. Thanks for sharing this.

  13. Very good design, but it is hard to modify. Cause the design is static. And it is not compatible with framework.

  14. Manoela sweet heart, here is the Diwali greetings I made using demo3, and would like to send you the greeting website.

    pdiwali.weebly.com

  15. Hi, is there any way to make the transition page scroll-able?? On changing the position from fixed to relative completely breaks the effect.

  16. Hi there,
    I use adobe illustrator to draw svg image but the effect is error.
    Here is error : http://quangtu.vn/1/ could you take a look through
    i have a question : what software did you create those SVG image ?