[GSAP]fade-in 효과 restart 제대로 적용하기(이전 잔상 없애기)

제목이 좀 이상할 수 있지만 정확하게 풀어서 말하면,

 

내가 원하는 효과는

스크롤을 아래로 내렸을 경우 텍스트가 fade-in 되고

아래로 더 스크롤 해 화면 밖으로 텍스트가 벗어났다가 다시 위로 스크롤 할 경우 fade-in이 다시 동작하는 것.

 

그래서 toggleActions을 다음과 같이 주었다.

gsap.from(".s1-subtext", {
	delay: 0.5,
	scrollTrigger: {
		trigger: ".s1-title", toggleActions: "restart none restart none"
	},
	duration: 0.8, opacity: 0, y: 60,
});

scrollify와 같이 사용해서인지는 몰라도,

아래에서 위로 스크롤 할 경우 이전에 나타났던 텍스트가 잠깐보였다가 사라진 후 fade-in이 동작했다.

 

이런 경우 아래와 같이 toggleActions을 restart reverse restart reverse로 주면 된다.

gsap.from(".s1-subtext", {
	delay: 0.5,
	scrollTrigger: {
		trigger: ".s1-title", toggleActions: "restart reverse restart reverse"
	},
	duration: 0.8, opacity: 0, y: 60,
});