Gegenbauer ERP

web-development

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:

https://github.com/yeoman/generator-webapp

As a JavaScript template Engine I used Nunjucks from Mozilla.
Why Nunjucks?

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.

Pro:

  • simple to integrate
  • good documentation
  • control animation trough events and methods

Cons

  • performance (cpu is overused)

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.