From our sponsor: Try Mailchimp today.
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
