유저의 눈길을 사로잡는 웹 애니메이션

.transition-box { transition: all 2s; transform: translateX(100px); } @keyframes move-right { 0% { transform: translateX(0) translateY(0px); } 50% { transform: translateX(50px) translateY(50px); } 100% { transform: translateX(100px) translateY(0px); } } .animation-box { animation: move-right 2s; }

useLayoutEffect(() => { setTimeout(() => { document.querySelector('.transition-box').classList.add('tr'); }, 100); }, []);

@keyframes move-right { 0% { transform: translateX(0) translateY(0px); } 30% { transform: translateX(50px) translateY(-50px); } 40% { transform: translateX(100px) translateY(0px); } 50% { transform: translateX(100px) translateY(-100px); } 70% { transform: translateX(100px) translateY(0px); } 100% { transform: translateX(200px) translateY(0px); } } @keyframes scale-up { 0% { transform: translateX(200px) scale(1); } 100% { transform: translateX(200px) scale(1.5); } } .animation-box { animation: move-right 2s forwards; }

useLayoutEffect(() => { const box = document.querySelector('.animation-box'); box.addEventListener('animationend', () => { box.style.animation = 'scale-up 1s forwards'; }); }, []);

useLayoutEffect(() => { const box = document.querySelector('.anim') as HTMLDivElement; const moveAnim = box.animate( [ { transform: 'translateX(0px)', offset: 0 }, { transform: 'translateX(50px) translateY(-50px)', offset: 0.3 }, { transform: 'translateX(100px)', offset: 0.4 }, { transform: 'translateX(100px) translateY(-100px)', offset: 0.5 }, { transform: 'translateX(100px)', offset: 0.7 }, { transform: 'translateX(200px)', offset: 1 }, ], { duration: 2000, iterations: 1, fill: 'forwards', }, ); moveAnim.onfinish = () => { box.animate( [ { transform: 'translateX(200px) scale(1)', offset: 0 }, { transform: 'translateX(200px) scale(1.5)', offset: 1 }, ], { duration: 2000, iterations: 1, fill: 'forwards', }, ); }; }, []);

npm install gsap yarn add gsap pnpm install gsap

import gsap from 'gsap'; // ... useLayoutEffect(() => { const tl = gsap.timeline(); tl.to('.animation-box', { x: 100, duration: 0.5, }); tl.to('.animation-box', { y: -50, duration: 0.3, }); tl.to('.animation-box', { y: 0, duration: 0.3, }); tl.to('.animation-box', { x: '+=100', // 현재 상태를 기준으로 더 한다. duration: 0.5, }); tl.to('.animation-box', { scale: 1.5, duration: 0.3, }); return () => { tl.kill(); // 컴포넌트가 언마운트될 때 timeline 을 완전히 제거. }; }, []);

function App (){ const [show, setShow] = useState(false); return ( <> <button onClick={() => setShow((prev) => !prev)}>toggle</button> {show && <SampleBox />} </> ) } function SampleBox() { const rootScope = useRef<HTMLDivElement>(null); const { context, contextSafe } = useGSAP( () => { const tl = gsap.timeline(); tl.to('.box', { x: 100, duration: 0.5, }); tl.to('.box', { y: -50, duration: 0.3, }); tl.to('.box', { y: 0, duration: 0.3, }); tl.to('.box', { x: '+=100', duration: 0.5, }); tl.to('.box', { scale: 1.5, duration: 0.3, }); }, { scope: rootScope, }, ); const pump = contextSafe(() => { const tl = gsap.timeline(); tl.to('.box', { scale: '+=0.5', backgroundColor: 'red', duration: 0.1, }); tl.to('.box', { scale: '-=0.5', duration: 0.2, backgroundColor: '#fff', }); }); return ( <div ref={rootScope}> <div className={'box'} onClick={pump}></div> </div> ); }

const card = { width: 230, height: 320, gap: 40 }; function FC6Event(){ const scope = useRef(null); const { contextSafe } = useGSAP(()=>{},{ scope }) const openCards = contextSafe(()=>{ /* 카드 한군데 모으기 */ const combine = gsap.timeline(); const { width: w , gap } = card; tl.to('.card', { duration: 0.5, x: (i) => { if (i === 0) return `${(w + gap) * 2}px`; if (i === 1) return `${w + gap}px`; if (i === 2) return '0'; if (i === 3) return `-${w + gap}px`; if (i === 4) return `-${(w + gap) * 2}px`; return '0'; }, ease: 'power2.in', } ); }) return ( <div ref={scope}> <div className="flash"/> <Card/> <Card/> <Card/> <Card/> <Card/> <div> <button onClick={openCards}>카드 확인하기</button> </div> </div> ) } function Card(){ return ( <div className="card"> <div className="cover"/> <div className="front"> // ... </div> <div className="back"> // ... </div> </div> ) }

tl.to('.card', { duration: 0.5, x: (i) => { if (i === 0) return `${(w + gap) * 2}px`; if (i === 1) return `${w + gap}px`; if (i === 2) return '0'; if (i === 3) return `-${w + gap}px`; if (i === 4) return `-${(w + gap) * 2}px`; return '0'; }, ease: 'power2.in', } );

.cover { position: absolute; content: ''; inset: 0; border-radius: 8px; background-color: #fff; opacity: 0; box-shadow: 0 0 10px 3px #fff; }

const openCards = contextSafe(()=>{ /* 카드 한군데 모으기 */ // ... /* 빛나는 효과 */ tl.to( '.card .cover', { opacity: 1, duration: 0.5, ease: 'power2.in', }, '-=0.5', // 타임라인의 선행 애니메이션이 끝나기 0.5초 전에 시작합니다. ); })

const openCards = contextSafe(()=>{ /* 카드 한군데 모으기 */ // ... /* 빛나는 효과 */ // ... /* shaking */ const shakeRange = 2; tl.to('.card', { duration: 0.1, x: `+=${shakeRange}`, y: `+=${shakeRange}`, repeat: 8, ease: 'linear', }); })

.flash { position: fixed; inset: 0; background: #fff; z-index: 5; opacity: 0; pointer-events: none; }

const openCards = contextSafe(()=>{ /* 카드 한군데 모으기 */ // ... /* 빛나는 효과 */ // ... /* shaking */ // ... /* 전체 화면 플레시 */ tl.to('.flash', { opacity: 1, duration: 0.1, ease: 'power4.out', }); tl.to('.flash', { opacity: 0, duration: 2, ease: 'power4.out', }); })

const openCards = contextSafe(()=>{ /* 카드 한군데 모으기 */ // ... /* 빛나는 효과 */ // ... /* shaking */ // ... /* 전체 화면 플레시 */ // ... /* 각 카드 위치 복구 */ tl.to( '.card', { duration: 0.5, x: 0, ease: 'power4.out', }, '<', ); /* 카드 180도 뒤집기 */ tl.to( '.card', { duration: 0.5, rotationY: 0, ease: 'power4.out', }, '<', ); /* 흰색 cover 제거 */ tl.to( '.card .back .cover', { opacity: 0, duration: 0.1, ease: 'power2.in', }, '<', ); })