.parent {
      display: flex;
      flex-direction: column;
      opacity: 0;
      transform: translateY(40px);
      transition: opacity 1.6s ease, transform 1.6s ease;
		  overflow:hidden;
    	width:100%;
    }

    .parent.show {
      opacity: 1;
      transform: translateY(0);
    }

    .height-full {
    	height:100vh;
    }

    .child {
      opacity: 0;
      transition: opacity 0.4s ease, transform 0.4s ease;
    }


    /* Basic animations */
    .child[data-direction="left"] {
      transform: translateX(-200px);

    }

    .child[data-direction="right"] {
      transform: translateX(200px);
    }

    .child[data-direction="bigleft"] {
      transform: translateX(-50vw);
    }

    .child[data-direction="bigright"] {
      transform: translateX(50vw);
    }

    .child[data-direction="none"] {
      transform: translateY(0px);
    }

    .child[data-direction="up"] {
      transform: translateY(240px);
    }

    .child[data-direction="down"] {
      transform: translateY(-40px);
    }

    /* Advanced animations */
    .child[data-animation="rotate"] {
      transform: rotate(-90deg);
    }

    .child[data-animation="spin"] {
      transform: rotate(360deg);
    }

    .child[data-animation="flip"] {
      transform: rotateY(180deg);
      backface-visibility: hidden;
    }

    .child[data-animation="zoom-in"] {
      transform: scale(0.5);
    }

    .child[data-animation="zoom-out"] {
      transform: scale(1.5);
    }
.child.visible {
  opacity: 1;
  transform: translate(0) rotate(0deg) scale(1);
}