GSAP scrollTrigger - Pin 애니메이션
//01. 이미지 에니메이션 주기
const ani1 = gsap.timeline();
ani1.to("#section1 .parallax__item__img", {rotation: 720, scale: 0, borderRadius: 200})
.to("#section1 .parallax__item__img", {rotation: 0, scale: 1, borderRadius: 20})
ScrollTrigger.create({
animation: ani1,
trigger: "#section1",
start: "top top",
end: "+=2000",
scrub: true,
pin: true,
anticipatePin: 1,
markers: true
});
//02. 이미지를 순차적으로 나오기
const ani2 = gsap.timeline();
ani2.from("#section2 .i1", {y: -200, autoAlpha:0, borderRadius: 200})
.from("#section2 .i2", {y: -200, autoAlpha:0, borderRadius: 200})
.from("#section2 .i3", {y: -200, autoAlpha:0, borderRadius: 200})
ScrollTrigger.create({
animation: ani2,
trigger: "#section2",
start: "top top",
end: "+=2000",
scrub: true,
pin: true,
anticipatePin: 1
})
//03. 이미지를 랜덤으로 나오기
const ani3 = gsap.timeline();
ani3.from("#section3 .parallax__item__img", {
autoAlpha: 0,
y: -100,
ease: "back.out(4)",
// stagger: 0.1
stagger:{
amount: 1,
from: "random"
}
});
ScrollTrigger.create({
animation: ani3,
trigger: "#section3",
start: "top top",
end: "+=2000",
scrub: true,
pin: true
})
//04 : 이미지 축소하기
const ani4 = gsap.timeline();
ani4.from("#section4 .parallax__item__img", {
autoAlpha: 0,
scale: 2,
width: "100vw",
height: "100vw"
})
ScrollTrigger.create({
animation: ani4,
trigger: "#section4",
start: "top top",
end: "+=3000",
scrub: true,
pin: true
})
//05 : 텍스트 애니메이션
const ani5 = gsap.timeline();
ani5.to("#section5 .t1", {xPercent: 300}, "a") // ,"" 동시에 움직임
.to("#section5 .t2", {xPercent: -300} ,"a")
.to("#section5 .t3", {xPercent: 300}, "a")
.to("#section5 .t4", {xPercent: -300}, "a")
ScrollTrigger.create({
animation: ani5,
trigger: "#section5",
start: "top top",
end: "+=3000",
scrub: true,
pin: true,
})
//06 : 글씨 확대
const ani6 = gsap.timeline();
ani6.to("#section6 .parallax__item__text", {scale: 60, duration:2})
.to("#section6 .parallax__item__text", {autoAlpha: 0})
ScrollTrigger.create({
animation: ani6,
trigger: "#section6",
start: "top top",
end: "+=3000",
scrub: true,
pin: true,
anticipatePin: 1,
markers: true
})
//07: 텍스트 제자리 애미메이션
const ani7 = gsap.timeline();
ani7.from("#section7 .t1", {autoAlpha: 0, duration: 1, y: 50}, "+=1")
.from("#section7 .t2", {autoAlpha: 0, duration: 1, y: 50}, "+=1")
.from("#section7 .t3", {autoAlpha: 0, duration: 1, y: 50}, "+=1")
.from("#section7 .t4", {autoAlpha: 0, duration: 1, y: 50}, "+=1")
.from("#section7 .t5", {autoAlpha: 0, duration: 1, y: 50}, "+=1")
.from("#section7 .t6", {autoAlpha: 0, duration: 1, y: 50}, "+=1")
.from("#section7 .t7", {autoAlpha: 0, duration: 1, y: 50}, "+=1")
ScrollTrigger.create({
animation: ani7,
trigger: "#section7",
start: "top top",
end: "+=6000",
scrub: true,
pin: true,
})
//08: 텍스트 애니메이션
const ani8 = gsap.timeline();
ani8.from("#section8 .t1", {x: innerWidth * 1}) // ,"" 동시에 움직임
.from("#section8 .t2", {x: innerWidth * -1})
.from("#section8 .t3", {x: innerWidth * 1})
.from("#section8 .i1", {x: innerWidth * 1, rotation: 360, scale: 5.5})
ScrollTrigger.create({
animation: ani8,
trigger: "#section8",
start: "top top",
end: "+=3000",
scrub: true,
pin: true,
})
//09: 이미지 확대
const ani9 = gsap.timeline();
ani9.from("#section9 .parallax__item__img", {
autoAlpha: 0,
scale: 20,
width: "200vw",
height: "200vw"
})
ScrollTrigger.create({
animation: ani9,
trigger: "#section9",
start: "top top",
end: "+=3000",
scrub: true,
pin: true
})