From our sponsor: Reach inboxes when it matters most. Instantly deliver transactional emails to your customers.
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.
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
- anime.js by Julian Garnier
- scrollMonitor.js by Stu Kabakoff
- imagesLoaded by David DeSandro
- Images copyright by Jim Lepage. Purchase here: Abstract Paint Remix, Vol. 1
- Fonts: Nexa Bold by Fontfabric and Roboto Mono by Christian Robertson.
- SVG shapes made with Inkscape
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?
So I had the same problem, but I figured out the issue. This is what I did (by the way I just did it on the demo 3 because is what I needed, but I imagine is the same for the other demos).
So, first of all, be sure to create the SVG document with the same size as the viewport that is used in the demo (in my case was 1400 width x 770 height). Then center your illustration, and then after you export the SVG file try to minimize it (I used this http://www.svgminify.com/). This was after observing that my d paths or polygon points were a lot longer than the originals (this tool will give you a cleaner version), also when I was testing the first demo it didn’t like path with negative values, that was created because I was just throwing my illustration in a random part of the canvas, and the canvas also was huge.
So try to do that, hopefully, it also works for you!
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.”
Good Article. You always come up with something new. Amazing ideas you have shared with us. Thanks for Sharing. Keep posting
Hi guys, I’m a newbie to front-end web design. And I’m fascinated with what you guys do here. I’d like to know how I could learn how to do stuff like that, and improve my skills as a front-end developer. Thanks
Hi Mary,
thanks a lot for such wonderful effect..
I have a small doubt.. is there a way to use gradients and change gradients inside the svg morphs if yes can you please tell me how to use
Please