A couple weeks ago we created a website featuring a full-format SVG animation. Since this is something that hasn’t been seen on too many websites, let’s dive into how we realized this project:
First, I created the basic project structure with simple webapp Yeoman Generator:
For a style structure i’m using inuitcss as a guideline. Inuit is based on sass, has object oriented css and most importantly is using ITCSS.
ITCSS is an architecture especially suited for large projects created by Harry Roberts. It is neither a library nor a design framework but a way to structure the elements of stylesheets.
Maybe is not really useful for a small project like this one but for me it’s already a standard 😉
Then i started to create the html structure and style it. That was just a matter of time, the real challenge was to convert for the web the animation create from our production department… yeap was an Adobe After Effects project… at least was made from vectorial graphics. Anyway let’s do it. Start from scratch and create a svg animation? yeah was an option but it would take to long and the animation was already done… then why not bodymovin/lottie?!
Lottie is a mobile library for Web, and iOS that parses Adobe After Effects animations exported as json with Bodymovin and renders them natively on mobile! Amazing!
Ok was not really so simple as it seems because i had to adapt the animation for different screens, divide it to have for each step a hover effects to play/pause the animation and so on but better then from scratch. I really like that i could control the animation trough events or call a method with a simple click or event listener.
Performance was not the best, but also because the animation was not a simple one.
Another tricky part was to position the different animation on the right z-index on hover. when the popup was open and to go back to the initial state. All with a smooth transition effect… done 😉
Hope I could help you out with whatever project you are currently working on.
Wir verwenden Cookies, um Ihnen ein optimales Webseiten-Erlebnis zu bieten. Dazu zählen Cookies, die für den Betrieb der Seite und ihrer zentralen Funktionen technisch notwendig sind, sowie solche, die für die anonyme Erhebung von Nutzungsstatistiken eingesetzt werden. Sie können entscheiden, welche Kategorien Sie zulassen möchten. Die Möglichkeit einer späteren Änderung der Einstellung sowie weitere Informationen finden Sie unter Datenschutz.