On-Scroll Morphing Background Shapes

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

From our sponsor: Guide customers along the path to purchase with our award-winning platform. Starting at $14.99/mo.

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.




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

References and Credits

Tagged with:

Mary Lou

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.


Stay up to date with the latest web design and development news and relevant updates from Codrops.

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 28

Comments are closed.
  1. That’s cool. Never thought about that even being possible. Amazing as usual, Mary!

  2. Wow, this is amazing! Thx for sharing! It seems to be a bit laggy in Safari compared to Chrome. Do you have an idea why?

  3. Manoela: This is amazing. I made demo2 work on weebly. Just a little problem though. My blobs don’t change colors and shapes much and they kind of lazily oscillate. It still looks nice though.

  4. Strange behavior. On iphone with safari the blobs would change color and shape if I change the phone orientation. They stay the same scrolling up and down, but they do cycle through the four of five shapes the demo shows by changing the phone position!!

  5. Hi Marry,
    As always your work is awesome, I was wondering if you can write a article about which tools and IDE’s you use !

  6. Hello there, Great work with the background effect! I was just wanting to change the distance between each of the ‘content-wrap’ divs. Just wondering if you could help me? Thanks heaps.

  7. Great work Marry, Loved the background effects. I will definitely be using them in future projects and will give credit.

  8. Nice !

    Anyone can help me to include this script Into a wordpress theme ?
    I try day after day…

  9. Hello, I love this, but I am not a developer, I work on wordpress and the divi template is there any way to do this in wordpress and with this template? Could they guide me?

  10. Amazing work as always. Just a little question, how do you make the blobs move on their own like jelly even when we are not scrolling. I have tried to implement it on codenpen – https://codepen.io/rohitgd/pen/vZyjQL?editors=1010 using Greensock’s MorphSVG plugin and jQuery to detect scroll position, but I can’t figure out how to move the blobs on their own.

    • Look at the source code on the downloadable sample. In the script section, look for ‘const shapes’. The value ‘path’ and ‘pathAlt’ should be different. It animates from the coordinates given in ‘path’ to ‘pathAlt’ back and forth that’s why it seems like it’s moving on its own.

    I would love to use that for my new website… BUT unfortunately, nothing works with IE – does exist a fall back for IE, so users can at least click on a link?

  12. LOVE THIS!
    I will definitely use it! But it doesn’t load in Firefox… Is there a reason why?
    Also, is there a way to add more than one shape at the same time?