https://www.hanwha.co.kr/company/introduce.do

​위 사이트와 같은 애니메이션을 구현중입니다.

스크롤을 올리면 이미지가 커지면서 위로 올라가고

텍스트는 위치가 고정이다가 이미지의 하단에 걸쳐 같이 스크롤이 됩니다.

이 애니메이션을 구글링을 하고, 챗지피티로 해봐도 이상하게만 되네요.

텍스트 위치가 안걸리거나, 위아래가 처음부터 떨어져있거나.

참 어렵네요

해보신분 계실까요?

[code=tsx]'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;

[/code]