.animated-sroll {
  transform: translate(-10%);
  opacity: 0;
}
.animated-sroll-to-top {
  transform: translateY(-10%);
}
.animated-sroll-to-bottom{
  transform: translateY(20px);
}
.before-after .container div img{
  animation: imageAnimate linear both;
  animation-timeline: view(block);
  animation-range: cover 0% cover 20%;
}
.mousey {
  animation: imageScroll linear both;
  animation-timeline: view(block);
  animation-range: cover 0% cover 60%;
}
@keyframes imageScroll {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes imageAnimate {
  from {
    opacity: 0;
    transform: translateY(200px);
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}