cp-sumi-k

<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 }}

cp-sumi-k

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

cp-sumi-k

<style scoped>

// scroll animation keyframes
@keyframes scroll {
  0% {
    transform: translate(0px);
  }
  100% {
    transform: translate(-1760px);
  }

cp-sumi-k

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

cp-sumi-k

<style scoped>

//animation in reverse
@keyframes scroll-reverse {
  0% {
    transform: translate(-1760px);
  }
  100% {
    transform: translate(0px);
  }

cp-sumi-k

<script>
export default {
  data() {
    return {
      grid1: [...],
      grid2: [...],
      lastScrollY: 0,
      gridAnimation: "",
    };
  },

cp-sumi-k

<style scoped>

.grid-animation:hover,
.grid-animation-reverse:hover {
  animation-play-state: paused;
}

.elements:hover {
  cursor: pointer;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.2) !important;

cp-sumi-k

<template>
  <div class="background text-center">
    <div class="horizontal-slider normal-text text-center">
      <div class="list-wrapper">
        //For dynamic transition name, used transition name like 'image-' +
        transitionName,
        <transition-group
          :name="'image-' + transitionName"
          tag="ol"
          class="list text-center"

cp-sumi-k

<template>
  <div class="background text-center">
    <div class="horizontal-slider normal-text text-center">
      <div class="list-wrapper">
        <transition-group
          :name="'image-' + transitionName"
          tag="ol"
          class="list text-center"
        >
          <div

cp-sumi-k

<style lang="scss" scoped>

// translate image to 120% to right when image is entering to transition
.image-next-enter-active {
  transform: translate(120%);
}

//stop transform when image has entered from right
.image-next-enter-to {
  transform: translate(0%);