Scroll 따른 애니메이션 속도 조절

import React, { useEffect, useState } from 'react';
import { motion } from 'framer-motion';
import styled from "styled-components";

// 이미지
import PokeballImg from "../assets/images/Object/DarkPoketBall.png";

const Wrapper = styled.div`
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden; // 이미지가 화면 밖으로 나가도 보이지 않게 설정
`

const PoketBallScreenEffects = styled(motion.div)`
  width: 100%;
  height: 100%;
  background-image: url(${PokeballImg});
  background-size: cover; // 이미지가 화면 전체를 채우도록 설정
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  transition: transform 0.5s ease-out; // 확대 효과에 애니메이션 추가
  transform: scale(${props => props.scale});
`;

const Hire = () => {
  const [scale, setScale] = useState(1);
  const [lastScroll, setLastScroll] = useState(0); // 새로운 상태 값으로 마지막 스크롤 위치를 기록

  const handleScroll = () => {
    const position = window.pageYOffset;
    const totalHeight = document.body.scrollHeight - window.innerHeight;
    
    if (position > lastScroll && position > totalHeight * 0.75) {
      setScale(2 + (position - totalHeight * 0.75) / 10); // 스크롤 다운 할 때 확대
    } else {
      setScale(1); // 스크롤 업 할 때 이미지 크기 원상복구
    }

    setLastScroll(position); // 마지막 스크롤 위치를 갱신
  };

  useEffect(() => {
    window.addEventListener('scroll', handleScroll, { passive: true });

    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, []);

  return (
    <Wrapper>
      <PoketBallScreenEffects scale={scale} />
    </Wrapper>
  );
};

export default Hire;

스크롤 방향에 따라 애니메이션의 속도를 다르게 설정하려면, 애니메이션 속도를 결정하는 상태 변수를 추가하고, 이 변수를 스크롤 이벤트 핸들러 내에서 조절해야 합니다.
이를 위해 transitionDuration라는 새로운 state를 추가하고, 스크롤 방향에 따라 이 값을 변경하는 방식으로 구현할 수 있습니다.

// 생략
const Hire = () => {
  const [scale, setScale] = useState(1);
  const [easing, setEasing] = useState('ease-out'); // 새로운 상태 값으로 easing을 관리
  const [lastScroll, setLastScroll] = useState(0); // 새로운 상태 값으로 마지막 스크롤 위치를 기록

  const handleScroll = () => {
    const position = window.pageYOffset;
    const totalHeight = document.body.scrollHeight - window.innerHeight;
    
    if (position > lastScroll && position > totalHeight * 0.75) {
      setScale(2 + (position - totalHeight * 0.75) / 10); // 스크롤 다운 할 때 확대
      setEasing('ease-out'); // 확대 할 때는 ease-out
    } else {
      setScale(1); // 스크롤 업 할 때 이미지 크기 원상복구
      setEasing('linear'); // 축소 할 때는 linear
    }

    setLastScroll(position); // 마지막 스크롤 위치를 갱신
  };

  useEffect(() => {
    window.addEventListener('scroll', handleScroll, { passive: true });

    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, []);

• 스크롤 위치를 기록하는 state를 만들어준다음
• "position > lastScroll && position > totalHeight * 0.75"
  아래로 스크롤 하고있는지 && 스크롤 위치의 전체페이지 높이가 75를 아래 있는지 확인하고
• 위 조건이 만족될경우 "setScale(2 + (position - totalHeight * 0.75) / 10)" 화면을 크게 하는 코드를 실행합니다.
  -반대로 setScale(1) 높이가 75이상이면 확대시키는 코드입니다.