While surfing the web for inspiration, we bumped into the beautifully-designed Honda HR-V website. When you navigate from a section to the other, the transition is embellished by an animated shape – created using a <canvas> element.
We decided to create something similar, but instead of using canvas, we played with SVG. Also, instead of creating a vertical layout that would require forced scrolling to see the animation, we turned the whole resource into a hero slider.
Resources used:
Snap.svg to animate the SVG elements.
Icons from our Nucleo library.
Images from Unsplash.
