[tailwindcss] 에니메이션 만들기

1. fade in animation 만들기

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      // 사용자 정의 애니메이션 추가
      keyframes: {
        fadeIn: {
          '0%': { opacity: '0' },
          '100%': { opacity: '1' },
        },
      },
      // 애니메이션 이름 정의
      animation: {
        fadeIn: 'fadeIn 1s ease-out forwards',
      },
    },
  },
  plugins: [],
}

<div class="animate-fadeIn">
  여기에 페이드인 애니메이션을 적용할 내용
</div>

2. 스크롤이 닿으면 fade in 시키는 animation

//useInView.js

import { useEffect, useState } from 'react';

export const useInView = () => {
  const [ref, setRef] = useState(null);
  const [inView, setInView] = useState(false);

  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        setInView(entry.isIntersecting);
      },
      { threshold: 0.2 }
    );

    if (ref) {
      observer.observe(ref);
    }

    return () => {
      if (ref) {
        observer.unobserve(ref);
      }
    };
  }, [ref]);

  return [setRef, inView];
};

import React from 'react';
import { useInView } from './useInView';

const FadeInComponent = () => {
  const [setRef, inView] = useInView();

  return (
    <div
      ref={setRef}
      className={`transition-opacity duration-1000 ${inView ? 'opacity-100' : 'opacity-0'}`}
    >
      이곳에 컨텐츠를 넣으세요. 스크롤하여 뷰포트에 진입하면 fade-in 애니메이션이 적용됩니다.
    </div>
  );
};

export default FadeInComponent;
    >