Periodic Table Animation

This web project creates an interactive and animated periodic table. Its main purpose is to visualize the chemical elements in various dynamic 3D layouts, including a traditional table, a sphere, a helix, and a grid. Users can switch between these layouts with smooth transitions, click on individual elements to expand them and view detailed information, and experience a subtle parallax effect as the entire scene rotates in response to mouse movement.

The project's structure is built with standard web technologies. The index.html file provides the basic page layout, including control buttons for switching layouts and a <template> element used as a blueprint for each periodic table element card. The style.css defines the visual appearance of the elements and containers, crucially enabling 3D transformations with transform-style: preserve-3d; and utilizing CSS Grid for the default "table" layout.

<div id="scene">
  <div id="scene-content" data-layout="table"></div>
</div>
<template id="element">
  <button class="element" data-color="0">
    <div class="element-number"></div>
    <div class="element-symbol"></div>
    <div class="element-title"></div>
    <div class="element-description"></div>
  </button>
</template>

This HTML snippet shows the main container for the animated elements and the template used to generate each element card.

The core logic resides in script.js, which uses the animejs library for all animations and layout management. It starts by defining a large elements array containing all the periodic table data. JavaScript then dynamically generates each element card by cloning the <template> and populating it with data. The createLayout function from animejs is used to manage the positions and transitions of these cards.

const elementsLayout = createLayout($sceneContent, {
  properties: ['font-size'],
  duration: 2000,
  ease: 'inOutExpo',
});

This JavaScript code initializes the animejs layout manager, which will handle animating the elements within the #scene-content container.

Different 3D layouts are handled by functions within the transformLayout object. For example, the sphere function calculates X, Y, and Z coordinates for each element to arrange them on a sphere using trigonometric formulas, then applies these as CSS transform properties. Event listeners detect clicks on layout buttons or individual element cards, triggering elementsLayout.update() to animate the elements to their new positions or expand/collapse them. A createTimer continuously updates the overall scene rotation based on mouse position, creating the parallax effect.

  sphere: () => {
    const radius = 300;
    // ... other pointer settings
    cards.forEach(($el, i) => {
      const phi = Math.acos(-1 + (2 * i) / cards.length);
      const theta = Math.sqrt(cards.length * Math.PI) * phi;
      const x = radius * Math.sin(phi) * Math.cos(theta);
      const y = radius * Math.cos(phi);
      const z = radius * Math.sin(phi) * Math.sin(theta);
      $el.style.transform = `translate3d(${x}px, ${y}px, ${z}px) rotateY(${Math.atan2(x, z)}rad) rotateX(${-Math.atan2(y, Math.hypot(x, z))}rad) translateZ(${offsetZ}px)`;
    });
  },

This snippet from script.js demonstrates how the sphere layout calculates 3D positions and rotations for each element using mathematical formulas.