How to Program Physical Animations

When I surf the web, I notice how much importance is attached to animated elements. An animation is definitely always an eye-catcher – but it’s quite complex to implement my experiences with the example of a singaporean animation studios.

A video that functions as a header or an animation that is triggered by scrolling – with well-done animations, the visitor becomes curious and gets stuck. This is exactly the effect we wanted for our massive art website. And that’s where I came in.

Requirements for animation

The new massive art website should not be one thing: static. Our goal was to pick up the visitors with an animation and to explain what we do to them.

Before I could start programming, I sat down with our designers Philipp Gabl and Tim Armbruster. They had already created a video in advance that I could use as a guide. The template helped me a lot. Because for me it became so clear how the animation should proceed. And I could divide the material into different sequences.

Research on the JavaScript Physics Engine

The first part of the animation stood out from the beginning. The falling balls had to act physically (see animation). Since I had never used a JavaScript physics engine before, I did a lot of research and chose Matter-JS. The main thing that convinced me about Matter-JS was that the code is open source and the project is currently being developed on GitHub. This makes the documentation extensive and the community quite active.

Smaller amount of data and autoplay

For us, there were two important reasons why we decided in favour of the independently programmed animation and against the production of a video:

For the animation – consisting of JavaScript, Canvas and SVG – hardly any external code is necessary. Compared to a video, you certainly save several MB.

Animations can be played automatically on mobile devices when the user scrolls into the visible area. With videos it looks completely different – Autoplay is usually not supported at all. If it does, the video is opened in fullscreen mode.

Code structuring is indispensable

The intro animation on the MASSIVE ART website usually works with the same elements from start to finish. It was therefore extremely difficult for me to structure the code in such a way that it remained comprehensible. I therefore restructured and improved it several times during implementation. Unfortunately, not every device – especially smartphones and tablets – can handle such an animation equally well. That’s why I tried again and again to keep the performance stable and achieved this in the best possible way.

Animated Logos

Animation finally reaches the classic graphic design. Just as you can bring static posters to life , you can also observe another trend: animated logos.

They rotate, transform and hop wildly around. Thanks to animation, logos can lose their rigid image and unfold a new, eventful diversity. We’ll give you 5 reasons why animated logos can complement a company’s brand identity.


As a rule, a good logo is based on a strictly thought-out concept. But since logos also work best when they are abstract in form, the idea behind them cannot always be explored by the ignorant. Here, animated logos fill the gap. In a playful way, you can use animation to show how the concept influenced the presentation of the logo. This opens up a new possibility of explaining the concept of a logo to viewers in the future.


Often there are two variants of a logo: the final logo and a short version of the logo, which is needed for space reasons on different formats. Either a picture element or the initials can be used. Here, too, an animated logo can be used to unite the two versions of a logo and to conclusively show the derivation to the viewer.


Companies with a wide range of services are not able to include all of this in their logo. In these cases, the logo is often discreetly restrained. However, moving logos can start right here and present the diverse range of services in a playful way. Thus customers become acquainted with the variety at achievements only on the basis the animated Logos, even if the Logo is simple and objective actually.


Some logos are artistically very demanding. If you want to focus on this in the animated logo, you can show the creation process. This gives the ignorant observer a concrete idea of the sometimes very complex artistic process behind a logo.


Especially for motion designers and agencies with a focus on animation, the use of an animated logo is obvious. Apart from the fact that this would suit the company perfectly, the designers’ skills can be presented here directly. In this way only the logo can convince potential customers.


Leave a Reply