[gatsby] page transition

gatsby에서 네비게이션을 이용해서 page transition 적용하기

Page transition을 추가할 수 있는 방법은 여러가지이다.

• gatsby-plugin-transition-link & GSAP
• GSAP(with route)
• react-transition-group

나는 navigation을 사용해서 page-transition을 구현하기로 결정!
필요한 라이브러리 및 플러그인은 이 세가지가 전부이다.

• GSAP
• gatsby-plugin-layout
• react-transition-group

// Nav.js
import React, { useRef } from 'react';
import { Link } from 'gatsby';
import styled from 'styled-components';
import { Transition } from 'react-transition-group';

import { showNav, hideNav } from 'animations/animations';
import BgImage from 'components/BgImage/BgImage';
// styles

const Nav = ({ show, setShow }) => {
  const containerRef = useRef(null);
  const linkRef = useRef(null);

  const handleEnter = () => showNav(containerRef, linkRef.current.childNodes);
  const handleExit = () => hideNav(containerRef);

  return (
    <Transition
      in={show}
      timeout={{
        enter: 1300,
        exit: 1200,
      }}
      unmountOnExit
      onEnter={handleEnter}
      onExit={handleExit}
    >
      <Container ref={containerRef}>
        <Wrapper>
          <BgImage height="100%" filename="nav.jpg" />
          <ItemsWrapper>
            <Items ref={linkRef}>
              {items.map((item, index) => (
                <li key={index}>
                  <StyledLink to={item.path} onClick={() => setShow(false)}>
                    {item.en}
                    <span>{item.ko}</span>
                  </StyledLink>
                </li>
              ))}
            </Items>
          </ItemsWrapper>
        </Wrapper>
      </Container>
    </Transition>
  );
};

export default Nav;

Animation.js

import gsap from 'gsap';

const tl = gsap.timeline({
  defaults: { duration: 0.8, ease: 'power2.inOut' },
});

export const showNav = (container, links) => {
  tl.to(container.current, { duration: 0, css: { visibility: 'visible' } })
    .to(container.current, {
      webkitClipPath: 'circle(1600px at 90% -10%)',
    })
    .from(links, { duration: 0.4, y: 10, opacity: 0, stagger: 0.2 }, '-=0.2');
};

export const hideNav = (container) => {
  tl.to(container.current, {
    webkitClipPath: 'circle(100px at 100% -20%)',
    duration: 1.2,
  }).to(container.current, { duration: 0, css: { visibility: 'hidden' } });
};

기억할 것

• Gastby(react)에서 GSAP을 사용하려면 useEffect와 함께 사용할 것
• unmount된 컴포넌트에 애니메이션을 추가할 땐 react-transition-group을 사용 할 것
• route가 바뀌어도 변하지 않는 persist layout(나의 경우 navigation)이 필요할 땐 gatsby-plugin-transition-link을 사용할 것. 이 때 layout 컴포넌트는 사용하지 않아도 자동적으로 적용이 됨