Technical look into creating Motion Graphics for a Website

We are full into the age of the internet, with every shoe shop, electric heater supplier or fast-food chain having a website. With an ocean of websites out there, it’s difficult to create one that stands out from the rest. The use of animation is becoming increasingly popular - creating some moving parts to attract the eye is a popular way of standing out. 

However, this creates some immediate engineering problems that need to be solved. In this article, we are going to explore how the Bournemouth digital team used AfterFX to create a visually stimulating website for our client Rio Heating.

We used AfterFX with the plugins “Bodymovin” and the javascript library “Lottie.js” to create 3 separate short running SVG animations. Warning, we are doing a deep technical dive. I’m going to be using terms like JSON and SVG, which may be overwhelming for the non technically trained. If you have any questions about this article please feel free to email us at [email protected].

AfterFX and Bodymovin

The AfterFX plugin “Bodymovin” converts AFX files into SVG assets, with an additional JS file that defines JSON that we can later use to animate the static SVGs.

We first created all the assets in illustrator, then imported the whole thing into AfterFX, convert them into native AFX vector shapes and start creating the movement!

Our motion graphics partner Rob-Wtd, has said 

“As an animator I think it’s an amazing tool. I can concentrate on bringing the content to life without having to worry about the technical side. In the past I would have had to create a mock-up that a developer would then have converted by hand into code?! Now we can both stick to what we’re best at.”

Although there are limitations with using SVG format - bitmap is out, vector is in - there are many added benefits compared to using the usual GIFs or video. For instance, you end up with a much smaller file-size and a much crisper image that can scale across different resolutions.

When asked about limitations that Bodymovin imposes, our animator has said:

“Most of the more complex effects that you can apply in AFX don't work. But there is usually a work around using the more basic controls. There’s a complete list on the Bodymovin website of what is and isn’t supported, but as long as you stick to the more general properties then you’ll be in safe hands.” 

- which is good news. We certainly didn’t see any negative impact on the final product.

“I think it has a huge scope and look forward to creating some really amazing projects.”

Lottie.js by AirBNB

Lottie JS is a javascript library created by AirBNB for animating SVGs using a JSON file. The JSON file defines the movement, and the SVGs are the assets. 

Within Lottie, there are a number of functions we can use to control the animations. You first initialise the animations by pushing in the JSON file and SVG assets, then you can simply call the play, pause and restart functions to get the animation moving.

We used this in conjunction with the scrolltrigger.js library to start the animations when they scroll into view. The overall effect is a premium looking website with engaging animations that teach how to use the product while also demonstrating the value of the product.