.reveal-left{
    position: relative;
    transform: translateX(-150px);
    opacity: 0;
    transition: 1s all ease;
  }
  .reveal-left.active{
    transform: translateY(0);
    opacity: 1;
  }

  .reveal-right{
    position: relative;
    transform: translateX(150px);
    opacity: 0;
    transition: 1s all ease;
  }
  .reveal-right.active{
    transform: translateY(0);
    opacity: 1;
  }

  .reveal-top{
    position: relative;
    transform: translateY(150px);
    opacity: 0;
    transition: 1s all ease;
  }
  .reveal-top.active{
    transform: translateY(0);
    opacity: 1;
  }