How To Make Animated Image on Text Hover Using Elementor Free

<script>
document.addEventListener('DOMContentLoaded', () => {
  const ease = 0.1;

  const initFollowerEffect = () => {
    document.querySelectorAll('.service-box').forEach(box => {
      const follower = box.querySelector('.service-img');
      let posX = 0;
      let mouseX = 0;
      let animationId;

      const updatePosition = () => {
        const diffX = mouseX - posX;
        posX += diffX * ease;

        follower.style.transform = `
          translate3d(${posX}px, 0, 0)
          rotateZ(12deg)
        `;

        animationId = requestAnimationFrame(updatePosition);
      };

      const handleMouseMove = (e) => {
        const bounds = box.getBoundingClientRect();
        mouseX = e.clientX - bounds.left - 50; // small offset
      };

      box.addEventListener('mouseenter', () => {
        const bounds = box.getBoundingClientRect();
        mouseX = posX = bounds.width / 3;

        follower.style.opacity = '1';
        follower.style.willChange = 'transform';
        follower.style.transformStyle = 'preserve-3d';

        box.addEventListener('mousemove', handleMouseMove);
        updatePosition();
      });

      box.addEventListener('mouseleave', () => {
        cancelAnimationFrame(animationId);
        box.removeEventListener('mousemove', handleMouseMove);

        follower.style.opacity = '0';
        follower.style.transform = 'translate3d(0, 0, 0) rotateZ(0deg)';
      });
    });
  };

  // Only apply effect on screens wider than 1024px
  const applyIfWideScreen = () => {
    if (window.innerWidth > 1024) {
      initFollowerEffect();
    }
  };

  applyIfWideScreen();

  // Hook for Elementor dynamically loaded content
  const hookElementor = () => {
    elementorFrontend.hooks.addAction('frontend/element_ready/global', () => {
      if (window.innerWidth > 1024) {
        initFollowerEffect();
      }
    });
  };

  if (window.elementorFrontend) {
    hookElementor();
  } else {
    window.addEventListener('elementor/frontend/init', hookElementor);
  }
});


</script>