<div class="space">Scroll Down</div>
<section class="content">
<div class="box">
box
</div>
</section>
<div style="height: 800px;"></div>
* {
margin: 0;
padding: 0;
}
.space {
display: flex;
align-items: center;
justify-content: center;
height: 50vw;
color: #fff;
background: #333;
}
.box {
width: 100px;
height: 100px;
background: #f00;
}
.content {
padding: 80px 40px;
}
gsap.fromTo('.box',
{
autoAlpha: 0,
y: 20
},
{
autoAlpha: 1,
duration: 1,
y: 0,
scrollTrigger: {
trigger: '.box',
start: 'top center',
markers: true,
toggleActions: 'play none none reverse'
}
});
This Pen doesn't use any external CSS resources.