프레이머 모션의 스크롤 보간을 사용하는 justifyContent에 대한 팁

Question

x 값 사이에서 애니메이션을 적용하는 코드 조각이 있지만 justify-content: 중앙에서 왼쪽으로 전환하려고 하면 작동하지 않습니다.

다음은 코드 조각입니다.

function Navbar() {
  const { scrollY } = useScroll();
  const x = useTransform(scrollY, [0, 100], ["가운데", "왼쪽"]);

  반품 (
    <motion.div
    공들여 나열한 것
      className={styles.parent}
      스타일={{ justifyContent: x, 디스플레이: "flex"
      전환={{
        지속시간: 0.5
      }}
    >
      <이미지
            src="/BlackLogo-2.svg"
            alt="Cg 로고"
            너비={100}
            높이={100}
            스타일={{패딩: 20,}}
            우선 사항
          />
    </motion.div>
  )

}

Answer 1

해결책을 찾았습니다. useMotionValueEvent 함수를 사용하여 스크롤이 특정 지점을 지나갔는지 확인하고 이를 상태로 설정한 다음 하위 요소(내 이미지)를 Motion.div로 래핑하고 아래와 같이 외부 div에 클래스를 설정해야 합니다. :

으아악