🔵 How To Make Björn Staal-Like Animations?

If you’re mesmerized by the Björn Staal animation, you’ll be able to build something yourself with these tips

Lately Björn Staal’s animation circles the Internet. It presents two windows with animated 3D spheres.

These spheres interact with each other, meaning that moving one window causes the animation to change.

It looks like moving one window moves one sphere adjusting the connection between them.

You can see it here.

Unfortunately I can’t find the source code, so it’s hard to validate if it was really made with JavaScript and CSS.

However, there’s a simplified version released online, paired with an online demo.

In this demo, instead of mesmerizing spheres and particle effects, we see cubes, a cube for every window:

For each window? But how does he recognize a new window? By the act of loading the page combined with localStorage.

The clever trick used here is to save a counter to the localStorage. That way every new window on the same origin can be assigned a unique ID, and the number of windows is available:

Another fascinating part is how spheres between two windows interact.

To do it, you have to know where both spheres are located on the user screen.

You can figure out the position of the spheres inside the window quite easily.

But you need to know where window is located on the screen as well.

To know what is the distance from the left of the screen to the left window corner window.screenLeft is used. For the vertical offset there’s also a property.

The window.innerWidth provides us with the window width. Similarly we can get the window height.

Since having the offset and size, we can easily calculate the positions of both windows.

Passing that information and change events creates a link between windows that have sufficient information to render an interactive 3D scene.

Sidenote: window.resize gives an information about the change of the window size. The screen position of the window is updated on each render.

The 3D scene is rendered with tree.js library.

The rendering part seems trivial, but to actually design such interaction is heck of an artwork.

All in all it shows that there’s a lot of creative space on the cross section of art and tech.

Subscribe to check if you’ll like the next article as well!