<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'
  }
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://unpkg.co/gsap@3/dist/gsap.min.js
  2. https://unpkg.com/gsap@3/dist/ScrollTrigger.min.js