<div class="item item--primary"
data-aos="fade-left"
data-aos-anchor="#trigger-right">
RIGHT
</div>
<div class="item item--secondary"
data-aos="fade-right"
data-aos-anchor="#trigger-left">
LEFT
</div>
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item" id="trigger-left">
5
<span>trigger left</span>
</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item" id="trigger-right">
8
<span>trigger right</span>
</div>
<div class="item">9</div>
<div class="item">10</div>
<div class="item">11</div>
<div class="item">12</div>
@mixin center-v () {
position: fixed;
top: 0;
bottom: 0;
margin: auto;
}
body {
overflow-x: hidden;
}
* {
box-sizing: border-box;
}
.item {
width: 200px;
height: 200px;
margin: 50px auto;
padding-top: 75px;
background: #ccc;
text-align: center;
color: #FFF;
font-size: 3em;
span {
display: block;
font-size: 1rem;
}
&--primary {
@include center-v;
right: 20px;
background: green;
}
&--secondary {
@include center-v;
left: 20px;
background: red;
}
}
View Compiled
AOS.init({
duration: 1200
});