gsap interpolate

interpolate()는 숫자, 색상, 문자열, 배열, 객체 등 거의 모든 유사한 타입의 값들 사이를 선형(linear)으로 보간해주는 매우 유연한 메서드
progress 값을 0에서 1 사이로 전달하면, 시작값과 끝값 사이의 중간값을 반환

1) 즉시 보간값 얻기

gsap.utils.interpolate(startValue, endValue, progress)

startValue: 시작 값 (숫자, 문자열, 색상, 배열, 객체 등)
endValue: 끝 값 (startValue와 같은 타입이어야 함)
progress: 0 ~ 1 사이의 값 (0은 시작, 0.5는 중간, 1은 끝)

2) 여러 값 배열로 보간

gsap.utils.interpolate(array, progress)

array: 보간하고 싶은 값들의 배열 (같은 타입이어야 함)
progress: 0 ~ 1 사이의 값

3) 재사용 가능한 보간 함수 만들기

const interp = gsap.utils.interpolate(0, 100);

interp(0.5); // 50
interp(0.25); // 25
interp(1); // 100

// 객체도 가능
const interpObj = gsap.utils.interpolate(
  { a: 0, b: 10, c: "red" },
  { a: 100, b: 20, c: "blue" }
);

interpObj(0.5); 

4) 보간값을 반환하는 재사용 가능한 함수

// 배열을 보간하는 함수 생성 (progress는 아직 전달하지 않음)
const interp = gsap.utils.interpolate([100, 50, 500]);

// 이후 필요할 때마다 progress 값만 넣으면 됨:
console.log(interp(0.5));  // → 50
console.log(interp(0.75)); // → 275

색상배열도 가능

const interpColor = gsap.utils.interpolate(["red", "green", "blue"]);

console.log(interpColor(0.25)); // → "rgba(128,64,0,1)"

5) pipe()를 이용해 여러 유틸리티 함수들을 조합

const colorizer = gsap.utils.pipe(
  gsap.utils.clamp(0, 100),            // 0~100 사이로 고정
  gsap.utils.normalize(0, 100),        // 0~100 → 0~1로 정규화
  gsap.utils.interpolate("red", "blue")// 정규화된 값을 색상으로 보간
);

이제 이 colorizer() 함수는 숫자 하나를 넣으면:
0~100 범위로 자르고 0~1로 정규화한 뒤
그 값에 맞춰 "red" ~ "blue" 사이 색상으로 변환

console.log(colorizer(25.874)); // → rgba(153,0,102,1)

사용해본 예제

gsap.registerPlugin(ScrollTrigger);

const box = document.querySelector('.box');
const colorInterp = gsap.utils.interpolate("#EDE9DC", "#F55800");
        
  ScrollTrigger.create({
     trigger: ".box",
     start: "top 80%",
     end: "bottom 80%",
     onUpdate: self => {
        box.style.backgroundColor = colorInterp(self.progress);
     }
  });

근데 위는 그냥 사실 scrub으로 해도 동일함
이렇게 단순한 변화에는 scrub 쓰는게 맞음

gsap.registerPlugin(ScrollTrigger);

const count = document.querySelector(".count");
const interp = gsap.utils.interpolate(1,100);

ScrollTrigger.create({
  trigger: ".count",
  start: "top 80%",
  end: "top 20%",
  onUpdate: self => {
      count.textContent = Math.floor(interp(self.progress));
    }
  });

음..

<div id="output"></div>
<input id="slider" type="range" min="0" max="100" value="0" />

const output = document.querySelector("#output");
const slider = document.querySelector("#slider");
const interp = gsap.utils.interpolate(["#2A7B9B", "#57C785", "#EDDD53"]);
gsap.set('#output', { backgroundColor: '#2A7B9B' })
       
slider.addEventListener("input", () => {
   output.style.background = interp(slider.value / 100);
})

이런 식으로 슬 수 있겠다