How To Make 3d Cube Effect Using Elementor Free

<script>
window.addEventListener('scroll', () => {
  const elements = document.querySelectorAll('.scrollText, .scrollIcon');
  const windowHeight = window.innerHeight;

  elements.forEach(el => {
    const rect = el.getBoundingClientRect();

    // Nested if instead of &&
    if (rect.top < windowHeight) {
      if (rect.bottom > 0) {
        const progress = Math.min(
          Math.max((windowHeight - rect.top) / (windowHeight * 0.5), 0),
          1
        );

        let xStart = 0;
        let yStart = 0;

        if (el.classList.contains('from-left')) {
          xStart = -20;
        } else if (el.classList.contains('from-right')) {
          xStart = 20;
        } else if (el.classList.contains('from-bottom')) {
          yStart = 10;
        }

        const xCurrent = xStart * (1 - progress);
        const yCurrent = yStart * (1 - progress);
        el.style.transform = `translate3d(${xCurrent}vw, ${yCurrent}vw, 0)`;
      } else {
        el.style.transform = `translate3d(0, 0, 0)`;
      }
    } else {
      el.style.transform = `translate3d(0, 0, 0)`;
    }
  });
});

const cube = document.getElementById("cube");
const section = document.getElementById("cube-section");

function getResponsivePhasePercentages() {
  const screenWidth = window.innerWidth;
  let transitionPercent, pausePercent;

  if (screenWidth < 640) { // Mobile
    transitionPercent = 0.1;
    pausePercent = 0.05;
  } else if (screenWidth < 1024) { // Tablet
    transitionPercent = 0.12;
    pausePercent = 0.07;
  } else { // Desktop
    transitionPercent = 0.15;
    pausePercent = 0.05;
  }

  return { transitionPercent, pausePercent };
}

function updateCubeTransform() {
  const { transitionPercent, pausePercent } = getResponsivePhasePercentages();
  const viewportHeight = window.innerHeight;
  const sectionRect = section.getBoundingClientRect();
  const sectionHeight = section.offsetHeight;

  // Nested ifs instead of &&
  let isSectionInView = false;
  if (sectionRect.top <= viewportHeight / 2) {
    if (sectionRect.top + sectionHeight >= viewportHeight / 2) {
      isSectionInView = true;
    }
  }

  if (!isSectionInView) {
    requestAnimationFrame(updateCubeTransform);
    return;
  }

  // Calculate scroll progress
  const totalScrollDistance = sectionHeight + viewportHeight;
  const scrollProgress = Math.min(
    Math.max((viewportHeight / 2 - sectionRect.top) / totalScrollDistance, 0),
    1
  );

  // Define rotation phases
  const phases = [
    // 1. Front → Right
    { end: transitionPercent, transform: p => `rotateY(${90 * p}deg)` },
    { end: transitionPercent + pausePercent, transform: () => `rotateY(90deg)` },

    // 2. Right → Top
    { end: 2 * transitionPercent + pausePercent, transform: p => `rotateY(${90 * (1 - p)}deg) rotateX(${90 * p}deg)` },
    { end: 2 * transitionPercent + 2 * pausePercent, transform: () => `rotateX(90deg)` },

    // 3. Top → Back
    { end: 3 * transitionPercent + 2 * pausePercent, transform: p => `rotateX(${90 * (1 - p)}deg) rotateY(${180 * p}deg)` },
    { end: 3 * transitionPercent + 3 * pausePercent, transform: () => `rotateY(180deg)` },

    // 4. Back → Bottom
    { end: 4 * transitionPercent + 3 * pausePercent, transform: p => `rotateY(${180 * (1 - p)}deg) rotateX(${-90 * p}deg)` },
    { end: 4 * transitionPercent + 4 * pausePercent, transform: () => `rotateX(-90deg)` }
  ];

  // Find current phase and apply transform
  let transform = "";
  let phaseStart = 0;

  for (const phase of phases) {
    if (scrollProgress <= phase.end) {
      const p = (scrollProgress - phaseStart) / (phase.end - phaseStart);
      transform = phase.transform(p);
      break;
    }
    phaseStart = phase.end;
  }

  cube.style.transform = transform;
  requestAnimationFrame(updateCubeTransform);
}

// Start animation
requestAnimationFrame(updateCubeTransform);

// Handle window resize
window.addEventListener('resize', () => {
  requestAnimationFrame(updateCubeTransform);
});
</script>