리액트 + gsap 애니메이션 질문 드립니다.
알림
|
페이지 정보
작성일
2025.01.05 22:20
본문
https://www.hanwha.co.kr/company/introduce.do
위 사이트와 같은 애니메이션을 구현중입니다.
스크롤을 올리면 이미지가 커지면서 위로 올라가고
텍스트는 위치가 고정이다가 이미지의 하단에 걸쳐 같이 스크롤이 됩니다.
이 애니메이션을 구글링을 하고, 챗지피티로 해봐도 이상하게만 되네요.
텍스트 위치가 안걸리거나, 위아래가 처음부터 떨어져있거나.
참 어렵네요
해보신분 계실까요?
'use client'
import React, { FC, useRef } from 'react'
import { useGSAP } from '@gsap/react'
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
import { ScrollToPlugin } from 'gsap/ScrollToPlugin';
import './style.css'
gsap.registerPlugin(ScrollTrigger, ScrollToPlugin);
const PracSamplePage: FC = () => {
const stickyRef = useRef<HTMLDivElement>(null)
const imageRef = useRef<HTMLImageElement>(null)
useGSAP(() => {
const stickyElement = stickyRef.current
const imageElement = imageRef.current
if (!imageElement || !stickyElement) {
return // 요소가 초기화되지 않은 경우
}
//category와 title을 감싸는 컨테이너 생성
ScrollTrigger.create({
trigger: '.title',
start: 'top 100px',
end: 'top top',
pin: true,
pinSpacing: false,
scrub: 1,
// markers: true
});
ScrollTrigger.create({
trigger: '.category',
start: 'top 150px',
end: 'top top',
pin: true,
pinSpacing: false,
scrub: 1,
// markers: true
});
ScrollTrigger.create({
trigger: imageElement,
start: 'bottom-=100 top', // 이미지 하단이 뷰포트 하단에 닿을 때
// markers: true,
onEnter: () => {
stickyElement.classList.add('sticky')
},
onLeaveBack: () => {
stickyElement.classList.remove('sticky')
},
})
//clean
return () => {
ScrollTrigger.getAll().forEach(trigger => trigger.kill())
}
} ,[])
return (
<>
<header className="header" ref={stickyRef}>
<nav className="nav">
<a href="#" className="nav-item">그룹소개</a>
<a href="#" className="nav-item">사업분야</a>
<a href="#" className="nav-item">뉴스룸</a>
<a href="#" className="nav-item">지속가능경영</a>
<a href="#" className="nav-item">인재채용</a>
<a href="#" className="nav-item">Hanwha Hub</a>
<a href="#" className="nav-item">KR</a>
</nav>
</header>
<main className="main-content">
<p className="category" id="companyIntro">기업소개</p>
<h1 className="title">지속가능한 내일을 위한<br/>한화의 담대한 도전은 멈추지 않습니다.</h1>
<img id="pinImg"src="https://www.hanwha.co.kr/assets/img/pages/sub-kv/kv_introduce.jpg" alt="" ref={imageRef}></img>
<div className="description">
<p >한화는 비즈니스를 통해 인류의 지속가능한 발전에 이바지하고자 합니다.</p>
<div className="desc-item">
<p>한화는 우주항공 방산, 에너지 소재, 금융, 유통 서비스 등 균형 잡힌 사업 포트폴리오로 꾸준히 견고한 경영 환경에 선제적으로 대응하며 성장을 이어가고 있습니다. <br></br>
그 결과, 2022년 기준으로 총 자산 규모 국내 재계 순위 7위, 포춘지 선정 글로벌 500대 기업의 위상을 확립하였습니다.</p>
<p>한화는 앞으로도 끊임없는 혁신을 통해 인류의 삶을 더욱 풍요롭게 만들고 인류가 당면한 다양한 문제에 대한 근본적인 해결책을 제공해 나갈 것입니다.</p>
<p>어제보다 더 밝은 오늘, 오늘보다 더 새로운 내일을 위해 한화가 함께 합니다.</p>
<br></br>
</div>
</div>
</main>
</>
)
}
export default PracSamplePage;
댓글 2
SDK님의 댓글