body
  section.section-01
    h1 ↓SCROLL

  main.l-main
    - for (var i = 0; i < 2; i++)
      .inview__img(data-inview="fade-left")
        img(src="https://picsum.photos/800/400?random=1", alt="" width=800, height=400)
      .inview__img(data-inview="fade-right")
        img(src="https://picsum.photos/800/400?random=2", alt="" width=800, height=400)
      .inview__img(data-inview="fade-up")
        img(src="https://picsum.photos/800/400?random=3", alt="" width=800, height=400)
      .inview__img(data-inview="fade-down")
        img(src="https://picsum.photos/800/400?random=4", alt="" width=800, height=400)

* {
  margin: 0;
  padding: 0;
}

body {
  background: #333;
  color: #eee;
}

img {
  width: 100%;
  height: auto;
}

.section-01 {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  h1 {
    text-align: center;
    font-size: 4vw;
  }
}

.l-main {
  max-width: 1000px;
  margin-inline: auto;
  padding-inline: 40px;
  margin-bottom: 50vh;
  overflow-x: hidden;
  & > * + * {
    margin-top: 50vh;
  }
}

[data-inview] {
  opacity: 0;
}

[data-inview="fade-left"] {
  translate: -80px 0;
}

[data-inview="fade-right"] {
  translate: 80px 0;
}

[data-inview="fade-up"] {
  translate: 0 80px;
}

[data-inview="fade-down"] {
  translate: 0 -80px;
}

class Inview {
  constructor() {
    this.els = document.querySelectorAll('[data-inview]');
    if (!this.els) return;

    this.init();
  }
  init() {
    this.els.forEach(el => {
      const type = el.dataset.inview;
      switch(type) {
        case 'fade-left':
        case 'fade-right':
          this.inviewFadeSide(el);
          break;
        case 'fade-up':
        case 'fade-down':
          this.inviewFadeVertical(el);
          break;
      }
    })
  }
  inviewFadeSide(el) {
    gsap.to(el, {
      scrollTrigger: {
        trigger: el,
        start: "top 80%",
      },
      onStart: () => {
        gsap.to(el, {
          x: 0, opacity: 1, duration: 0.6,
          ease: Sine.easeOut,
        })
      }
    })
  }
  inviewFadeVertical(el) {
    gsap.to(el, {
      scrollTrigger: {
        trigger: el,
        start: "top 80%",
      },
      onStart: () => {
        gsap.to(el, {
          y: 0, opacity: 1, duration: 0.6,
          ease: Sine.easeOut,
        })
      }
    })
  }
}

const inview = new Inview();