스크롤이벤트

npm install framer-motion

import React, { useEffect, useRef } from 'react';
import './App.css';
import styled,{createGlobalStyle} from 'styled-components';
import { motion, useMotionValue, useTransform, useViewportScroll } from 'framer-motion';


function App() {
const x = useMotionValue(0)
const {scrollY,scrollYProgress} = useViewportScroll()
useEffect(()=>{
  scrollY.onChange(()=>console.log(scrollY.get(),scrollYProgress.get())
  )
},[])
const rotate = useTransform(x,[-800,800], [-360,360])
const gradient = useTransform(
  x,
  [-800,800],
  [
   "linear-gradient(135deg,rgb(135, 238, 0),rgb(87, 49, 49))",
   "linear-gradient(135deg,rgb(0, 107, 238),rgb(72, 87, 49))",
  ])
  const scale = useTransform(scrollYProgress,[0,1],[1,5])

  return (
<>

        <Wrapper style={{background:gradient}}>
          <button onClick={()=>x.set(200)}>클릭미</button>
        <Box style={{x,rotateZ:rotate,scale}} drag='x' dragSnapToOrigin/>
      </Wrapper>
</>
  );
}

export default App;