<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">

<div class="face">

  <h2>scroll down</h2>
</div>
<div class="flex">
  <div data-aos="fade-right" data-aos-easing="ease-out-cubic" data-aos-duration="1000">
    Анимированный блок1
  </div>

  <div data-aos="fade-left" data-aos-easing="ease" data-aos-duration="1000">
    Анимированный блок 2
  </div>
</div>

<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>

<script>
  AOS.init();
</script>

* {
  box-sizing: border-box;
}

body {
  height: 200vh;
  margin: 0;
  overflow-x: hidden;
}

.flex {
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 100%;
  height: 100vh;
}

.flex div {
  width: 40%;
  height: 150px;
  background: red;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #fff;
}

.face {
  height: 100vh;
  padding-top: 20vh;
  text-align: center;
}