https://blog.canopas.com/animations-with-css-and-vue-transitions-fdb53dbb21e7 - continous-horizontal-animation-6

continous-horizontal-animation-6.vue

<script>
export default {
  data() {
    return {
      grid1: [...],
      grid2: [...],
      lastScrollY: 0,
      gridAnimation: "",
    };
  },
  methods: {
    scrollHandler() {
      let diff = window.scrollY - this.lastScrollY;
      //scroll up
      if (diff < 0) {
        this.gridAnimation = "grid-animation-reverse-running";
      } else {
        this.gridAnimation = "";
      }
      this.lastScrollY = window.scrollY;
    },
  },
  mounted() {
    window.addEventListener("scroll", this.scrollHandler);
  },
  unmounted() {
    window.removeEventListener("scroll", this.scrollHandler);
  },
};
</script>