gsap ScrollTrigger에 따라서 header 테마 바꾸기

✔️ 상태(recoil)와 상태를 변경하는 cusom-hook 생성

recoil에서 atom 상태를 생성한다음, 상태를 변경하는 custom-hook을 생성한다.

import { atom } from "recoil";
import { NavBarTheme } from "../types/common";

export const navBarTheme = atom<NavBarTheme>({
  key: "navBarTheme",
  default: "white",
});

import { useEffect } from "react";
import { useRecoilState, useSetRecoilState } from "recoil";
import { navBarTheme } from "../recoil/navBarTheme";
import { NavBarTheme } from "../types/common";

// 현재 navBarTheme에 대한 useRecoilState hook
export const useNavBarTheme = () => {
  return useRecoilState(navBarTheme);
};

// 페이지 진입시 navBarTheme 상태를 간단하게 변경하는 hook
export const useSetNavBarTheme = (theme: NavBarTheme) => {
  const setNavBarTheme = useSetRecoilState(navBarTheme);

  useEffect(() => {
    setNavBarTheme(theme);
  }, []);
};

 

 

 

✔️ scrollTrigger를 활용해서 테마 바꾸기

gsap에서 ScrollTrigger를 통해서 가장 상단에서 96px를 지나갈 때 onEnter와 onLeaveBack을 지나가면서 navBar(header)의 테마를 바꾼다

import { useState, useEffect, useRef } from "react";
import styled from "@emotion/styled";
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/dist/ScrollTrigger";
import { useSetNavBarTheme } from "../../hooks/useNavBarTheme";

gsap.registerPlugin(ScrollTrigger);
const Container = styled.div``

const Sample = () => {
    const { setNavBarTheme } = useSetNavBarTheme();
    const ref = useRef<any>(null);

    useEffect(() => {
        setNavBarTheme("black");
        ScrollTrigger.create({
          id: "insights-scroll",
          trigger: ref.current,
          start: "top 96px",
          end: "bottom bottom",
          scrub: true,
          onEnter: () => setNavBarTheme("white"),
          onLeaveBack: () => setNavBarTheme("black"),
        });
        return () => {
          ScrollTrigger.getById("insights-scroll").kill(true);
        };
    }, []);
    
    return (
    	<Container ref={ref}>
        	...
        </Container>
    )
}