react framer-motion 스크롤 반응 회전

const Example = () => {
  const { scrollYProgress } = useScroll();
  const rotation = useTransform(scrollYProgress, (val) => val * 360);
  const smoothRotation = useSpring(rotation, { stiffness: 400, damping: 90 });

  return (
    <Wrap>
      <Icon style={{ rotateY: smoothRotation }}>
      <img src="" />
      </Icon>
    </Wrap>
  )
}
export default Example;

const Wrap = styled(motion.div)`
  position:relative;
  height:300vh;
  width:100%;
  text-align:center;
`

const Icon = styled(motion.div)`
  position:sticky;
  top:300px;
  left:0;
  width:100px;
  height:100px;
  img{
    width:100%;
  }
`

useSpring : 스프링으로 대상을 애니메이션화하는 모션 값.

그냥 제자리에서 돌게 하고 싶다면

const rotatexY =keyframes`
  0%{
    transform: rotateY(0deg); 
  }
 50%{
   transform: rotateY(70deg); 
  }
  100%{
    transform: rotateY(0deg); 
  }
`

const Icon = styled(motion.div)`
  position:sticky;
  top:300px;
  left:0;
  display:inline-block;
  width:100px;
  height:100px;
  animation: ${rotateY} linear infinite;
  img{
    width:100%;
  }
`