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:
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:
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.