2key

2key's website is an ongoing project. Since the website launch 2 years ago, the startup has grown and changed many times, and had to upgrade and redesign the website. The first version of the website included a tree animation on the hero section. The animation was created with SVGs and Spirit.js. Spirit.js is a very nice tool for creating animations right in the browser, and exporting them to a file, which can then be uploaded or copied to any project.

‍

A spirit script would look like this:

<script>
  spirit.loadAnimation({
    loop: true,
    delay: 0,
    autoPlay: true,
    animationData: {"version_app":"1.1.3"...}

  }).then(
    // play it
    timeline => timeline.play()
  )
</script>

‍

And the animation created:

‍

The next challenge was to integrate a live chart. There are a few plugins for adding live charts on a website, but most of them are not flexible enough. I chose chart.js, and went on with creating the JavaScript:

<script>
var ctx = document.getElementById('chart').getContext('2d');
  var chart = new Chart(ctx, {
    type: 'doughnut',
    data: {
      datasets: [{
        data: [26, 30, 1, 4, 7, 12, 20],
        backgroundColor: ['#05c49f', '#00f4ca'...],
        borderWidth: 0,
      }],
      labels: [ 'Label 1', 'Label 2'...]
    },
    options: {
      responsive: true,
      rotaion: -45,
      legend: { display: false, },
      animation: { animateRotate: true },
      rotation: (-0.5 * Math.PI) - (93 / 180 * Math.PI),
      tooltips: {
        bodyFontFamily: "open sans",
        bodyFontSize: 14,
        displayColors: false,
        titleMarginBottom: 20,
      }
    }
  });
</script>

‍

Upgrading

The new look of 2key's website is a few months old. It has lottie.js animations integrated, very easily, if I might add (Webflow's new lottie integration), very smooth Parallax on couple of pages, a slick.js ticker stile carousel (see if you can spot that), Medium blog posts integrations, dynamic collections, and of course tablet & mobile adjustments.

The first upgrade was an opening pre-loader animation for the homepage. This micro animation, makes a big difference for anyone, while we wait for content to load...

‍

‍

Then some other lottie animations across the site.