Chapter 1: Understanding Björn Staal's Animation Technique

If you find Björn Staal’s mesmerizing animations captivating, you’re in luck! With the right guidance, you can create something equally impressive. Recently, Staal's animations have gained popularity online, showcasing two windows filled with animated 3D spheres that interact dynamically.

Moving one window causes the corresponding sphere to respond, creating a stunning visual effect. Curious about how it works? You can watch the process unfold here.

Unfortunately, the original source code remains elusive, making it challenging to confirm whether it was indeed crafted using JavaScript and CSS. Nevertheless, a simplified version is available online, complete with a demo. Instead of enchanting spheres and particle effects, this version features cubes—one for each window:

Chapter 2: Tracking Windows with Local Storage

How does the animation recognize new windows? The answer lies in the combination of page loading and localStorage. A clever technique is employed here: a counter is saved in localStorage. This allows each new window on the same origin to be assigned a unique ID, thus keeping track of the total number of windows.

Chapter 3: Interactivity Between Windows

Another intriguing aspect is how the spheres in different windows interact with each other. To achieve this, you need to determine the position of each sphere on the user's screen. While calculating the position of spheres within a window is straightforward, you also need to identify the window's location on the screen.

To find the distance from the left edge of the screen to the left corner of the window, you can use the window.screenLeft property. For vertical positioning, there’s a similar property available. The window.innerWidth property provides the width of the window, and you can obtain the height in the same way.

With the offset and dimensions in hand, calculating the positions of both windows becomes easy. By passing this information along with change events, a link is established between the windows, allowing for the rendering of an interactive 3D scene.

Note: The window.resize event notifies you of changes in window size, and the screen position updates with each render.

The 3D scenes are crafted using the three.js library. While rendering may seem straightforward, designing such intricate interactions is truly an art form. Ultimately, this highlights the immense creative potential at the intersection of art and technology.

The first video titled "HOW TO ANIMATE LIKE TPOT + BFB | Character Animation Tutorial" provides an in-depth look at techniques for creating animations similar to Staal’s.

The second video, "How to Level Up your 2D Animations like a Professional with Cartoon Animator," showcases professional-level techniques to enhance your animation skills.

Stay tuned for more creative insights in future articles!