🔍 GSAP(GreenSock Animation Platform)
GSAP(GreenSock Animation Platform)은 고성능 웹 애니메이션을 구현할 수 있는 JavaScript 라이브러리로서, CSS 애니메이션보다 더 강력하고 부드러운 동작을 지원하여 인터랙티브한 웹사이트를 만들 때 많이 사용된다.
// GSAP 라이브러리의 스크롤트리거를 등록
gsap.registerPlugin(ScrollTrigger);
→ GSAP 와 ScrollTrigger() 플러그인을 사용하여 특정 요소에 스크롤에 따라 동작하는 애니메이션을 설정해주었다.
로고 이미지 스크롤 애니메이션 구현
gsap.timeline({
scrollTrigger: {
trigger : '.visual',
start: '100% 100%',
end: '100% 0%',
scrub: 2, //스크롤할때만 애니메이션
// markers: true,
}
})
.to('.logoWrap #s', {x: -120, y:250, rotate: 20, ease: 'none', duration: 5}, 0)
.to('.logoWrap #a', {x: -20, y:150, rotate: -10, ease: 'none', duration: 5}, 0)
.to('.logoWrap #n', {x: 0, y:400, rotate: -10, ease: 'none', duration: 5}, 0)
.to('.logoWrap #g', {x: 50, y:300, rotate: 10, ease: 'none', duration: 5}, 0)
.to('.logoWrap #j', {x: 70, y:100, rotate: -10, ease: 'none', duration: 5}, 0)
.to('.logoWrap #u', {x: 80, y:200, rotate: 10, ease: 'none', duration: 5}, 0)
.to('.logoWrap #n', {x: 10, y:450, rotate: 20, ease: 'none', duration: 5}, 0)
gsap.timeline()으로 타임라인 생성, scrub: 2 값을 설정하여 스크롤에 따라 애니메이션이 자연스럽게 조정되도록 만들었다. 또한 start와 end를 100% 단위로 설정하여 요소가 화면에서 벗어나는 정도에 따라 애니메이션이 실행되도록 했다.
.logoWrap 내부의 각 글자(s, a, n, g, j, u, n)에 개별적인 애니메이션을 적용하여, 각각의 글자 요소가 자연스러운 회전효과를 가지고 서로 다른 방향으로 이동하도록 해주었다.
Text 체인지 애니메이션 구현
let textAniList = document.querySelectorAll('.con1 .textAni li')
let textAni = gsap.timeline({repeat: -1})
for(let i = 0; i < textAniList.length; i++) {
textAni.to(textAniList[i], 0.8,
{opacity: 1, repeat: 1, delay: 0, x:0, yoyo: true, ease: 'power4.out'})
}
textAni.play();
querySelectorAll()을 사용하여 .con1 .textAni li 요소들을 선택하고, gsap.timeline({repeat: -1})로 무한 반복되는 타임라인을 생성했다.
for문을 이용해 각 li 요소에 개별 애니메이션을 적용했으며, opacity: 1로 나타나게 하고 repeat: 1을 설정하여 한 번 재생 후 다시 사라지도록 했다.
또한 yoyo: true 옵션을 추가하여 요소가 나타났다 다시 사라지는 자연스러운 애니메이션을 구현했다.
마지막으로 textAni.play();를 호출하여 애니메이션을 실행하도록 만들었다. 🎬