.animate-on-scroll{
    opacity: 0.2;
    transition: opacity 0s ease;
}
.animate-on-scroll.show {
  opacity: 1;
    transition: opacity 0.2s ease;
}

.animate-on-scroll.left2right{
  transform: translateX(-20px);
  transition: transform 0s ease;
}
.animate-on-scroll.left2right.show{
  transform: translateX(0);
  transition: transform 0.2s ease;
}

.animate-on-scroll.right2left{
  transform: translateX(20px);
  transition: transform 0s ease;
}
.animate-on-scroll.right2left.show{
  transform: translateX(0);
  transition: transform 0.2s ease;
}

.animate-on-scroll.down2up{
    transform: translateY(20px);
    transition: transform 0s ease;
}
.animate-on-scroll.down2up.show{
    transform: translateY(0);
    transition: transform 0.2s ease;
}

.animate-on-scroll.up2down{
    transform: translateY(-20px);
    transition: transform 0s ease;
}
.animate-on-scroll.up2down.show{
    transform: translateY(0);
    transition: transform 0.2s ease;
}