JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/jquery.gsap.min.js"></script>
<script src="//bluewolftest.butchershop.co/vendor/visible.js"></script>
<div class="our-work-copy">
<section id="anchor1">
<h1>Anchor</h1>
<h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tristique orci non sapien hendrerit, at rutrum dui facilisis.</h2>
<div class="customers">
<div class="customer">hey</div>
<div class="customer">hello</div>
<div class="customer">hola</div>
</div>
</section>
<section id="anchor2">
<h1>Anchor</h1>
<h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tristique orci non sapien hendrerit, at rutrum dui facilisis.</h2>
<div class="customers">
<div class="customer">hey</div>
<div class="customer">hello</div>
<div class="customer">hola</div>
</div>
</section>
<section id="anchor3">
<h1>Anchor</h1>
<h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tristique orci non sapien hendrerit, at rutrum dui facilisis.</h2>
<div class="customers">
<div class="customer">hey</div>
<div class="customer">hello</div>
<div class="customer">hola</div>
</div>
</section>
<section id="anchor4">
<h1>Anchor</h1>
<h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tristique orci non sapien hendrerit, at rutrum dui facilisis.</h2>
<div class="customers">
<div class="customer">hey</div>
<div class="customer">hello</div>
<div class="customer">hola</div>
</div>
</section>
<section id="anchor5">
<h1>Anchor</h1>
<h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tristique orci non sapien...
CSS
.customers {
background-color: red;
height: 200px;
width: 660px;
}
.customer {
opacity: 0;
background-color: blue;
width: 200px;
height: 160px;
border: 1px solid white;
display: inline-block;
align: center;
}
JavaScript
$(window).on('scroll', function() {
$('.customers').each(function() {
if (!$(this).hasClass('animated')) {
if ($(this).isOnScreen(0.45, 0.45)) {
TweenMax.staggerFromTo($(this).find('.customer'), 0.3, {
y: 200,
opacity: 0
}, {
y: 0,
opacity: 1,
ease: Power2.easeOut
}, 0.15);
$(this).addClass('animated');
}
}
});
});