.animation-element {
    transition: all 1s ease-in-out;
}
.fadein {
    opacity: 0;
}
.fadein.in-view {
    opacity: 1;
}
.slideup {
  position: relative;
  top: 30px;
}
.slideup.in-view {
  top: 0px;
}
.slidedown {
  position: relative;
  top: -30px;
}
.slidedown.in-view {
  top: 0px;
}
.slideleft {
  position: relative;
  left: 50px;
}
.slideleft.in-view {
  left: 0px;
}
.slideright {
  position: relative; 
  right: 50px;
}
.slideright.in-view {
  right: 0px;
}
.flipH {
  perspective: 1000px;
  transform: rotateY(180deg);
}
.flipH.in-view {
  transform: rotateY(0deg);
}