<div class="coating-1">
		<div class="container">
			<h1 data-aos="fade-in">Coating One</h1>
		</div>
	</div>

	<div class="coating-2">
		<div class="container">
			<h1 data-aos="fade-down">Coating Two</h1>
		</div>
	</div>

	<div class="coating-3">
		<div class="container">
			<h1 data-aos="fade-up">Coating Three</h1>
		</div>
	</div>

	<div class="coating-4">
		<div class="container">
			<h1 data-aos="fade-up-left" id="fade-box-left">Coating Four</h1>
		</div>
	</div>

	<div class="coating-5">
		<div class="container">
			<h1 data-aos="fade-up-right">Coating Five</h1>
		</div>
	</div>

	<div class="box-1" data-aos="fade-left" data-aos-anchor="#fade-box-left">
		<p>RIGHT</p>
	</div>
*{
  margin:0;
  padding:0;
}
html,body{
  height: 100%;
  width: 100%;
  font-size:17px;
  font-family: sans-serif;
}
h1{
  font-size: 3em;
}
.container{
  max-width: 1260px;
  margin:0 auto;
}
.coating-1,
.coating-2,
.coating-3,
.coating-4,
.coating-5{
  height: 500px;
  display: flex;
  align-items:center;
}
.coating-1{
  background: #cf1d1d;
}
.coating-2{
  background: #cf901d;
}
.coating-3{
  background: #cfc91d;
}
.coating-4{
  background: #93cf1d;
}
.coating-5{
  background: #1dcf95;
}
.box-1{
  height: 70px;
  width: 300px;
  border:1px solid black;
  background: green;
  position:fixed;
  right:20px;
  bottom:50%;
  z-index: 10;
  display: flex;
  align-items:center;
  justify-content:center;
}
View Compiled
AOS.init({
	offset:120, //Default Values
	duration:400, //this
	easing:'ease', //this
	delay:0, //this
	once:false // and this
});
Run Pen

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.3/aos.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.3/aos.js