.area {
      height: 100vh;
      background: #ccc;
      margin: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .area.here {
      color: #fff;
      background: #00f;
    }

gsap.to('.area.here h1', {
  scrollTrigger: {
    trigger: '.area.here',
    start: 'top top', //[트리거 기준, 윈도우 기준]
    end: 'bottom top', //[트리거 기준, 윈도우 기준]
    markers: true,
    pin: true, //특정 스크롤 위치에서 요소를 고정시킴
    scrub: 1, // 스크롤이 될때만 재생되도록 만들어주는 속성 true:스 크럽 실행 또는 숫자 값 입력가능(이벤트가 더욱 부드럽게 실행됨)
  },
  scale: 2,
  rotation: 360
});