From our sponsor: Meco is a distraction-free space for reading and discovering newsletters, separate from the inbox.
Today we’d like to share some more animated organic SVG shapes with you. The idea is to integrate some flowy, natural looking shapes into a web page as decorative elements, sometimes with an interaction, i.e. a background of menu that changes on hovering the menu items, or simply, a constantly animating wave background that got inspired by Kévin Lagier’s design. In one of the demos we also use some patterns and clip paths that get animated to fullscreen in order to reveal some other content. The morphing path and other animations in these demos are powered by anime.js.
This demo is kindly sponsored by: Jetpack Professional, the only WordPress plugin you really need.
Have a quick look at all the demos:
Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.
We hope you enjoy the demos and find them inspiring!
References and Credits
- anime.js by Julian Garnier
- Keyboard icon by Paul te Kortschot from the Noun Project
- Patterns from Hero Patterns
Wonderful as always. Thank you for your continued awesomeness!
Oh yeah, finally a new post! Hahah.
How do you view the more demos besides the first one?
Nevermind, just tried it in Chrome and it worked – for some reason the nav menu in the bottom does not display in Safari.
In Safari v11 (12604.1.38.1.7) (Latest update), in Web Inspector: main » div class=”content content–fixed”, in “Styles” menu, uncheck “height: 100vh” and the bottom nav menu will reappear
@Thurston Thanks a lot, that fixes the problem! Cheers
For demo 3, I was wondering why do you need to use the pathData:id attribute? I tried switching it to path.getAttribute(‘d’) and it doesn’t seem to work, even though it has the same values as pathData:id.
Thanks!
Change in demo3.js file d:path.getAttribute(‘pathdata:id’) to d:path.getAttribute(‘pathLength’) and in html change pathdata:id to pathLength and all will work fine, html will be valid too.
I noticed you wrap whole javascript files in curly braces. Is there a reason for this is it like module.exports ? Do you know of an article/tutorial that explains why you would do this?
Hi Andrew,
we just like to scope all the js code into one block statement. This shouldn’t be necessary, I guess, for such simple examples and it’s definitely not necessary if you use modules since these have their own scope.
This is wonderful as always. Thank you for your articles!
Any idea why demo 3 is super laggy in Safari and Safari only? Is there something that is specifically causing the animation frame rate to more slow?
Wow.. it is extremely great idea of morphing shapes. Thank You!