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

continous-horizontal-animation-1.vue

<template>
  <div class="horizontal-grid">
    <div class="horizontal-grid-1">
      <div v-for="element in grid1" :key="element.id" class="elements">
        {{ element.name }}
      </div>
    </div>
    <div class="horizontal-grid-2">
      <div v-for="element in grid2" :key="element.id" class="elements">
        {{ element.name }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      grid1: [
        {
          id: 1,
          name: "element1",
        },
        {
          id: 2,
          name: "element2",
        },
        {
          id: 3,
          name: "element3",
        },
        {
          id: 4,
          name: "element4",
        },
        {
          id: 5,
          name: "element5",
        },
      ],
      grid2: [
        {
          id: 1,
          name: "element1",
        },
        {
          id: 2,
          name: "element2",
        },
        {
          id: 3,
          name: "element3",
        },
        {
          id: 4,
          name: "element4",
        },
        {
          id: 5,
          name: "element5",
        },
      ],
    };
  },
};
</script>

<style scoped>
.horizontal-grid {
  overflow-x: hidden;
  overflow-y: auto;
  height: 500px;
}
.horizontal-grid-1,
.horizontal-grid-2 {
  display: flex;
}
// for triangle view of elements
.horizontal-grid-1 {
  margin-left: 160px;
}
.elements {
  border: 1px solid #e2e2e2;
  border-radius: 16px;
  padding: 16px;
  margin: 32px 0 0 32px;
  flex: 0 0 320px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
</style>