Not working on Mobile Devices

[Tes3awy]

Hello there,

I am using this amazing plugin to; obviously; scroll reveal stuff on my website. It works great on the desktop. But have some issues on mobile. When scrolled to the section to be revealed, it's not revealed and the section is blank. However; in the browser emulator, it works like a charm. I don't know where the problem is. I saw this issue #293 and tried to use its answer, that's why you will see the mounted hook added in the setup. But still not working. Can you please help me with my issue? Thank you!

Setup

app.js

import VueScrollReveal from 'vue-scroll-reveal';
Vue.use(VueScrollReveal, {
  container: document.querySelector('body'),
  class: 'v-scroll-reveal',
  duration: 900,
  delay: 500,
  opacity: 0,
  origin: 'bottom',
  viewFactor: 0.3,
  scale: 1,
  distance: '50px',
  mobile: true,
  reset: false
});

Vue Component

...
 <div
  v-scroll-reveal="{ duration: 2000, origin: 'left' }"
  class="pc-four-numbers__number relative text-center"
>
  <img
    class="mx-auto w-full"
    src="/images/home/ninety-thousand.png"
    alt="90,000 image"
    title="90,000 Cardholders"
  >
</div>
...

<script>
  export default {
    mounted() {
      if (this.$sr.isSupported) {
        document
          .querySelectorAll(".pc-four-numbers__number")
          .forEach(function(pcNumber) {
            pcNumber.classList.add("v-scroll-reveal");
          });
        document
          .querySelector(".mobile-apps__mobiles")
          .classList.add("v-scroll-reveal");
      }
    }
  };
</script>

Operating System: Safari iOS, Chrome OS, and Firefox. Plugin Version: 1.0.11

[garrensweet]

I have the exact same problem as the user above me. I can't use this library for that reason.

[Tes3awy]

@garrensweet I'd recommend you use this library instead. And this video takes you through the setup process. Don't forget to add

AOS.refresh();

in the destroyed hook.