GSAP scrollTrigger - 나타나기 효과
높은 목표를 세우고, 스스로 채찍질 한다.
결과도 중요하지만, 과정을 더 중요하게 생각한다.
매 순간에 최선을 다하고, 끊임없이 변화한다.
모든 일에는 기본을 중요하게 생각한다.
열정을 잃지 않고 실패에서 실패로 걸어가는 것이 성공이다.
천 마디 말보단 하나의 행동이 더 값지다.
조그만 성공에 만족하지 않으며, 방심을 경계한다.
나는 내가 더 노력할수록 운이 더 좋아진다는 걸 발견했다.
꿈이 있다면, 그 꿈을 잡고 절대 놓아주지마라.
const hide = (item) => {
gsap.set(item, {autoAlpha: 0});
}
const animate = (item) => {
let x = 0;
let y = 0;
let delay = item.dataset.delay;
if(item.classList.contains("reveal_LTR")){
x = -100,
y = 0
} else if(item.classList.contains("reveal_BTT")){
x = 0,
y = 100
} else if(item.classList.contains("reveal_TTB")){
x = 0,
y = -100
} else {
x = 100,
y = 0
}
gsap.fromTo(item,
{autoAlpha: 0, x: x, y: y},
{autoAlpha: 1, x: 0, y: 0, delay: delay, duration: 1.25, overwrite: "auto", ease: "expo"})
}
gsap.utils.toArray(".reveal").forEach(item => {
hide(item);
ScrollTrigger.create({
trigger: item,
start: "top bottom",
end: "bottom top",
markers: true,
onEnter: () => {animate(item)}
})
});