Keyshape is a macOS application developed by Pixofield Ltd, located in Helsinki. It is a tool that enables users to create animations and save them as SVG files. SVG is the acronym for Scalable Vector Graphics, which allows users to create graphics that can be scaled without losing quality. Moreover, the file format supports interactivity and animation, and web browsers can render SVG files.

As a programmer, I found it to be an interesting challenge to animate our new logo with a vector-based animation tool. My goal was to create a brief scene that started with nothing and ended with the new logo fully formed.

Growing up, I always drew comics with my cousin Sven during summer holidays. We could only dream of having the skills of the classic Belgian and French comic artists. They seemed like wizards to us, having apparently reached an unattainable skill level. A wizard in that class has honored us with his magic and crafted our new logo; the immensely talented Vili Paoletić. He is a guy who will always overdeliver.

Keyshape

Getting to know the Keyshape app was an interesting challenge. It took some experimentation to understand the concepts, for example, how shapes can be grouped together and then rotated or resized as a single object.

My first attempt was to animate forward, i.e. starting with the initial square and then trying to shape it gradually into the resulting logo. That turned out to be too difficult.

The first attempt was to animate from the starting shape and transform it towards the target shape.

Backwards is the way forward

Since I knew where I wanted to end up, in the letter N of the logo, I decided to start from the end and animate backward towards the start. This turned out to be much easier. When I was done I used the Reverse Keyframes function of Keyshape.

The second attempt was to start from the end and move backward.

What does the Sprend say?

Everyone knows what a fox sounds like but what does the Sprend say? Well, there was really only one person who could possibly answer that question, and it was the Solna-based music producer John “Giovanni” Malmborg Sanitate. I more or less expected a soundtrack with a rap vibe, but Giovanni had something different in mind.

With the soundtrack in place, the animation could be finalized, and the Spaceship Sprenderprise could take off…

The Spaceship Sprenderprise

These are the uploads of the file transport spaceship Sprenderprise. Its mission: to deliver strangely big files; to find new senders and new recipients; to transfer files to places without bandwidth.

The complete animation with sound.

Show time?

The final step was to show the animation directly on sprend.com. This turned out to be harder work than making the animation itself. I wanted the it start automatically and to cover the whole window. I also wanted to be able to restart it on demand.

Showing an SVG file on a web page is quite easy. It can be added as a background image to a <div> element, which in turn covers the whole window.

.logo-animation {
    background-image: url('/path/to/animation.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    background-size: cover;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100%;
    z-index: 1000;
    cursor: pointer;
}

The problem with this approach is that the starting, stopping and rewinding cannot be controlled by code. Once it has run it never runs again!

So, I tried the alternative of having Keyshape generate a JavaScript-controlled SVG file. But I could never make it work no matter how many different ways I tried to include the SVG code: directly on the page or referencing the SVG file path. I simply could not debug this code and see what was wrong, so I gave up.

In the end, I found a workaround. Javascript code adds the background-image CSS style directly to the <div> element, whose value also includes a URL parameter after the file path. Here is an example:

background-image: url(‘/path/to/animation.svg?p=7847238972341’)

Since the url parameter is generated randomly the browser finally gave up on playing the svg only once.

A problem I, however, could not solve is that Safari does not completely support the animation. It looks weird at one point when the letter N is forming. Let’s hope that is a problem Apple will solve soon.

Love is in the UI

I had a lot of fun making the animation and putting it directly on sprend.com. Using animation as a part of user-interface design is a technique that can visualise transitions between states, and also make the usage of the service more pleasurable. Why couldn’t a boring file-transfer service utilize the same tools as video games or movies to convey information and emotions? Our vision is to turn Sprend into the most loved file transfer service. Animations are one of the tools in the box to achieve that.

Animating our logo with Keyshape for macOS