How to modify before & after image section

[CreatorTim]

Hey guys, I added a before and after image section to my store. But I need help with one thing.

I want that when I click on the "BEFORE" or "AFTER" heading on mobile, it smoothly scrolls to the before/after image.

Here’s the JavaScript code I used for that, and if needed, I can also provide the CSS styling and HTML structure.

Code:

<script>
document.addEventListener("DOMContentLoaded", () => {
  const container = document.querySelector(".container");
  const imageBefore = container.querySelector(".image-before");
  const sliderLine = container.querySelector(".slider-line");
  const sliderButton = container.querySelector(".slider-button");
  const beforeBadge = container.querySelector(".before_badge");
  const afterBadge = container.querySelector(".after_badge");

  let isTouching = false; // Check for mobile touch
  let lastPosition = 50; // Default slider position (50%)
  const isMobile = window.matchMedia("(max-width: 768px)").matches; // Detect mobile devices

  function updateSlider(positionX, containerRect) {
    const mouseX = positionX - containerRect.left;
    const positionPercent = Math.min(Math.max((mouseX / containerRect.width) * 100, 0), 100);

    // Save the last position for mobile devices
    if (isMobile) {
      lastPosition = positionPercent;
    }

    // Update slider position
    setSliderPosition(positionPercent);
  }

  function setSliderPosition(positionPercent, animate = false) {
    if (positionPercent < 0) positionPercent = 0;
    if (positionPercent > 100) positionPercent = 100;

    if (animate) {
      imageBefore.style.transition = "width 0.3s ease"; // Smooth effect with shorter duration
      sliderLine.style.transition = "left 0.3s ease";
      sliderButton.style.transition = "left 0.3s ease";
    } else {
      imageBefore.style.transition = "none"; // No animation
      sliderLine.style.transition = "none";
      sliderButton.style.transition = "none";
    }

    imageBefore.style.width = `${positionPercent}%`;
    sliderLine.style.left = `${positionPercent}%`;
    sliderButton.style.left = `${positionPercent}%`;

    // Update the last position
    lastPosition = positionPercent;
  }

  function resetSlider() {
    if (!isMobile) {
      setSliderPosition(50, true); // Return to center with animation
      showLabels(); // Show labels
    }
  }

  function restoreLastPosition() {
    if (isMobile) {
      setSliderPosition(lastPosition); // Restore last position on mobile
    }
  }

  function hideLabels() {
    beforeBadge.style.opacity = "0"; // Hide labels
    afterBadge.style.opacity = "0";
  }

  function showLabels() {
    beforeBadge.style.opacity = "1"; // Show labels
    afterBadge.style.opacity = "1";
  }

  // Desktop - mouse movement
  container.addEventListener("mousemove", (event) => {
    if (!isMobile) {
      const rect = container.getBoundingClientRect();
      updateSlider(event.clientX, rect);
      hideLabels(); // Hide labels
    }
  });

  container.addEventListener("mouseleave", () => {
    resetSlider(); // Return to center with animation on desktop
  });

  container.addEventListener("mouseenter", () => {
    if (!isMobile) {
      hideLabels(); // Hide labels
    }
  });

  // Mobile - touch devices
  container.addEventListener("touchstart", (event) => {
    isTouching = true;
    const rect = container.getBoundingClientRect();
    const touch = event.touches[0];
    updateSlider(touch.clientX, rect);
    hideLabels(); // Hide labels
    event.preventDefault(); // Prevent scrolling
  });

  container.addEventListener("touchmove", (event) => {
    if (isTouching) {
      const rect = container.getBoundingClientRect();
      const touch = event.touches[0];
      updateSlider(touch.clientX, rect);
      event.preventDefault(); // Prevent scrolling
    }
  });

  container.addEventListener("touchend", () => {
    isTouching = false;
    restoreLastPosition(); // Maintain last position on mobile
    showLabels(); // Show labels
  });

  // Ensure the last position remains during scrolling
  window.addEventListener("scroll", () => {
    if (isMobile) {
      restoreLastPosition(); // Restore last position on mobile during scroll
    }
  });
});
</script>

Here’s the link to my store: https://1049xn-ya.myshopify.com/products/editing-masterclass
(Just scroll almost to the bottom, that’s where the section is)

And here’s a store where it works how I want it: https://tomnoske.store/products/cinema-luts
(Just scroll almost to the bottom, that’s where the section is)

I want this fix for the click on the before/after only on mobile!

Thanks a lot,
Tim

[DaisyVo]

Hi @CreatorTim 

Regarding your observation, the feature works smoothly on desktop because it is designed to function based on mouse movement. The image responds dynamically to wherever the mouse is moved.

On mobile, however, the feature operates differently, as it relies on touch interactions. Since it cannot detect continuous movement the way a mouse does, the behavior may appear less fluid. Unfortunately, there isn’t an alternative solution to fully replicate the desktop experience on mobile devices.

Best,
Daisy - Avada Support Team.