https://github.com/Soyoung-lee-112/Qude
GSAP 라이브러리를 활용한 인터랙션 구현에 중점을 두어 클론 코딩한 사이트입니다.
공통
// GSAP 라이브러리의 스크롤트리거를 등록
gsap.registerPlugin(ScrollTrigger);
GSAP 와 ScrollTrigger() 플러그인을 사용하여 특정 요소에 스크롤에 따라 동작하는 애니메이션을 설정해 주었습니다.
로고 이미지 스크롤 애니메이션 구현하기
// 이미지 요소에 스크롤 애니메이션 설정
gsap.timeline({
scrollTrigger: {
trigger: '.visual',
start: '100% 100%',
end: "100% 0%",
scrub: 1, // smooth scrubbing, takes 1 second to "catch up" to the scrollbar, 숫자가 클수록 애니가 더 부드러워짐 (1-3)
// markers: true,
}
})
.to('.logoWrap #j', {x:-150, y:250, rotate:20, ease:'none', duration:5},0)
.to('.logoWrap #y', {x:-30, y:150, rotate:-10, ease:'none', duration:5},0)
.to('.logoWrap #o', {x:0, y:400, rotate:-10, ease:'none', duration:5},0)
.to('.logoWrap #u', {x:50, y:300, rotate:10, ease:'none', duration:5},0)
.to('.logoWrap #n', {x:100, y:100, rotate:-10,yease:'none', duration:5},0)
.to('.logoWrap #g', { x: 50, y: 400, rotate: 20, yease: 'none', duration: 5 }, 0)
gsap.timeline(): 여러 애니메이션을 시간순으로 관리할 수 있도록 묶는 객체를 생성하여 ScrollTrigger 속성을 활용하여 페이지를 스크롤할 때, .logoWrap 내부의 로고(j, y, o, u, n, g 요소)가 각각 지정된 궤적과 회전 효과로 움직이며 부드러운 애니메이션을 설정해 주었습니다.
텍스트 체인지 애니메이션 구현하기
