Behind the animations at Hack the North

Our landing page animations from 2018–2021

Table of Contents

Types of Animation Formats

  • Complexity: many of our animations are very complicated (like rotating helicopter blades) and would be near impossible to make using CSS
  • Transparency: we need to support transparency since, in most cases, we want to be able to overlay our assets on top of a non-solid background
  • Small file size: we want our assets to load as fast as possible
  • Vectorized: our animated assets need to scale to every screen size
  • Ease of handoff: our frontend team shouldn’t need to animate everything manually; not only is it time-consuming, but we want to shift that burden to the design team in case changes need to be made

GIF

  1. transparency significantly increases the file size of a GIF
  2. stretching GIFs to accommodate all screen sizes is a problem (raster format)
  3. GIFs only support 1-bit transparency, which means that a pixel is either transparent or not. This can lead to jagged edges, like here

Video

Comparing .gif and .mp4 sizes for the same animation. MP4s are 91% smaller!

APNG

CSS Animations

SVG + JSON

Exporting the Animation

Rendering the Animation

Optimizations

Canvas Rendering

Lazy-Loading Animations

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Hack the North

Hack the North

1,000+ students from across the globe join us at Hack the North, Canada’s biggest hackathon, for 36 hours of dreaming big and building incredible projects.