🔵 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…