gsap 페이지 트랜지션에 대해서 질문드립니다

Question

import React, {useEffect, useRef} from 'react'; import './Transition.css'; import {Power4} from 'gsap'; const Transition = ({timeline}) => { const trans = useRef(null); useEffect(()=>{ timeline.to(trans.current, { y: 2500, duration: 4, ease: Power4.easeOut, }) }) return (

); }; export default Transition;8월 말에 전역하고 웹 개발 공부 시작한 학부생이라 지식이 많이 짧아서 질문드립니다. gsap를 이용해서 페이지 트랜지션 효과를 주는 간단한 코드입니다 원리는1. 화면 전체를 덮는 div 블록을 만들고 2. 페이지가 로딩되면 div 블록이 뷰포트를 벗어날 정도로 y좌표를 이동(2500만큼) 저렇게 하면 의도한 대로 페이지 트랜지션 효과를 줄 수는 있지만 one 페이지라면 모를까 세로로 긴 스크롤 형식의 full 페이지의 웹사이트를 만들게 된다면 이동한 div 블록에 의해서 이후의 섹션들에 영향을 미치지 않을까요? 보통 페이지 전환 효과를 어떤 방식으로 주는지 궁금합니다

gsap 페이지 트랜지션에 대해서 질문드립니다

0개의 답변

Q&A 목록