On-Scroll Morphing Background Shapes

A decorative website background effect where SVG shapes are morphing and transforming on scroll.
MorphingBackgroundShapes_Featured

Today we’d like to share a little background effect with you. The idea is to animate a decorative SVG shape on scroll. The shape is morphing into different forms depending on the section we are currently viewing. The animations are powered by Julian Garnier’s anime.js and the scroll detection is supported by Stu Kabakoff’s scrollMonitor.js.

The inspiration for this work came from the brilliant AdCamp Dribbble shot by Michał Kociszewski.

Attention: We are using a couple of new CSS properties like CSS variables and the new CSS grid layout which won’t work in older browsers.

This demo is kindly sponsored by HelloSign API, an eSign API that provides seamless eSignatures for your app or workflow.

For drawing the SVG shapes we used Inkscape as it provides an easy way to create and copy paths directly as SVG in its practical XML Editor. It also offers some helpful SVG output options like the path string format, which comes in really handy when creating consistent path data for animations.

Besides morphing the shapes, i.e. animating from one path to another, we also transform them and change their fill color. This allows for even more diversity for the look of the formations.

When hovering over the items, you’ll also notice a little parallax effect.

MorphingBackgroundShapes_01

MorphingBackgroundShapes_02

MorphingBackgroundShapes_03

We hope you enjoy this little experiment and find it useful.

References and Credits

Previous:
Next:

Tagged with:

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

View all contributions by

Website: http://www.codrops.com

Related Articles

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

Feedback 24

  1. 1

    Hey, really like this, i’ve downloaded the file and started playing around with it, weirdly on all the demos I hit frank and all of background blobs disappear even from my earlier scrolling. It’s giving me back a JS error ‘Error: attribute d: Expected moveto path command (‘M’ or ‘m’), “NaNM 247.6,239.6…”.’

    This is on ‘anime.min.js:25’ I’m currently on Opera browser. Anyone have any thoughts on how to make the background morph a bit more friendly across browsers?

  2. 2

    I’m getting this error on safari while it works in other browsers.

    Here’s the error: “SyntaxError: Unexpected identifier ‘key’. Expected either ‘in’ or ‘of’ in enumeration syntax.”

Follow this discussion

Leave a Comment