Help - Free Mode - Mobile - Looped

[brian-open]

Hi,

We're using Swiper on a project that allows the user to scroll between sections/areas. Swiper is set to 'FreeMode' so it allows the user to scroll freely and explore the sections.

https://nationalleprechaunmuseum.flywheelsites.com/story/

We have a rabbit placed on the screen that entices the user to move left or right. When the user scrolls left or right the rabbit will subsequently animate and run in the same direction.

The problem we have is when we view the page on mobile. The running animation does not work well and part of the reason we think is due to the swiper event we are using.

We're using the Swiper 'touchMove' event and once it's triggered we run a check using swiper 'translate' and 'previousTranslate'. This checks where the users previous move position was and then triggers a class on the rabbit to see if it needs to run forwards or backwards. The problem with mobile is that the user has less of the screen to touch so more often than not their touch point is behind their previous touch and this causes the rabbit to direct in the opposite direction when it's moving forward.

Is there a swiper event that could be suggested that would work better to move rabbit moving forwards and backwards in freeMode?

Some help or assistance with this would be greatly appreciated.

Below is an example of the code we are using.

let newTranslate = 0;
let translateState = 0;
let touchOn = false;

var swiper = new Swiper(".mySwiper", {
speed: 600,
// parallax: true,
freeMode: true,
mousewheel: {
// invert: true,
},

  loop: true,
  spaceBetween: 0,
  centeredSlides: false,
  grabCursor: false,
  slidesPerView: "auto",


  onAny(eventName, ...args) {
    // So, when this swiper does ANYTHING, it emits a load of events.
    // We can hop on these events and trigger a lot of functionality.
    // We need this for hare running / direction detection etc.
    // https://swiperjs.com/swiper-api#events

   
    if (eventName === "touchMove") {
      // otherSwiper.classList.remove("active");
    }
    if (eventName === "transitionEnd") {
      // otherSwiper.classList.remove("active");
    }

    if (eventName === "touchStart") {
      // Need to know this to update the speed of the hare animation
      touchOn = true;

      if (touchOn) {
        if (swiper.previousTranslate === swiper.translate) {
          updateSpeedClass("stop");
        } else if (swiper.previousTranslate > swiper.translate) {
          updateDirection("forwards");
        } else {
          updateDirection("backwards");
        }

        //swiper.previousTranslate = swiper.translate;
      }
    }
    if (eventName === "imagesReady") {
      updateDirection("forwards");
    }
    if (eventName === "touchEnd") {
      touchOn = false;
      updateSpeedClass("stop");
    }
    if (eventName === "touchMove") {
      isMouseScroll = false;
      updateSpeedClass("slow");
    }

    if (eventName === "scroll") {
      isMouseScroll = true;

      if (args[1].wheelDelta > 400 || args[1].wheelDelta < -400) {
        updateSpeedClass("fast");
      } else if (args[1].wheelDelta > 0 || args[1].wheelDelta < 0) {
        updateSpeedClass("slow");
      } else {
        updateSpeedClass("stop");
      }
    } else if (eventName === "setTranslate") {
      if (!touchOn) {
        setDirection(args);
      }
    }

    if (eventName === "transitionEnd") {
      updateSpeedClass("stop");
    }
  }

});

function handleMouseMove(event) {
// console.log("Mouse Move");
touchOn = true;
}

setInterval(() => {
if (touchOn) {
if (swiper.previousTranslate === swiper.translate) {
updateSpeedClass("stop");
} else if (swiper.previousTranslate > swiper.translate) {
updateDirection("forwards");
} else {
updateDirection("backwards");
}

  //swiper.previousTranslate = swiper.translate;
  console.log(swiper.translate);
}

}, 200);

function setDirection(args) {
newTranslate = args[0].translate;

// console.log(args[0].velocity);
// console.log(translateState, args[1]);

if (translateState > args[1]) {
  // Forwards
  updateDirection("forwards");
  updateVelocity(args[0].velocity);
  
} else {
  // Backwards
  updateDirection("backwards");
  updateVelocity(args[0].velocity);
}
translateState = args[1];

}

const swiperNew = document.querySelector(.mySwiper );

function updateDirection(direction) {
// console.log("direction", direction);
const swiperNew = document.querySelector(.mySwiper );

if (direction === "backwards") {
  swiperNew.classList.remove("forwards");
  swiperNew.classList.add("backwards");
} else {
  // Forwards by Default
  swiperNew.classList.add("forwards");
  swiperNew.classList.remove("backwards");
}

}

stopChecker();

function stopChecker() {}

setInterval(() => {
// console.log(swiper);
const previousTranslate = swiper.translate;

if (previousTranslate === newTranslate && isMouseScroll == true) {
  updateSpeedClass("stop");
}

}, 1000);