-
질문 & 답변
카테고리
-
세부 분야
프론트엔드
-
해결 여부
미해결
TweenMax 효과 리셋
22.08.16 22:38 작성 조회수 374
0
좋은 강의 감사드립니다.
혹시 해당 객체가 다시 화면에 보였을 때 tweenmax 효과를 다시 적용하게 할 수 있나요?
예를 들자면, 화면 첫 로딩시 글씨에 적용된 tweenmax효과를, 사용자가 화면 아래까지 본 뒤 "TOP" 버튼이나 스크롤을 통해 다시 위로 와서 "별이 쏟아지는 코딩일레븐" 글씨의 tweenmax 효과가 다시 보이고, 다시 화면을 아래로 스크롤 하면 card의 tweenmax효과가 또 나오는 식으로 가능한가요?
요약하면, tweenmax효과가 적용된 것을 리셋시켜 다시 효과가 적용되도록 할 수 있나요?
감사합니다~!
답변을 작성해보세요.
0
코딩일레븐
지식공유자2022.08.18
안녕하세요 답변이 늦었습니다.
아래와 같은 방법이 있습니다. 간단한
const tween = TweenMax.to("div", {
x: 200,
duration: 0.5,
ease: "Power4.easeOut"
});
window.addEventListener("scroll", (event) => {
let scrollY = window.scrollY;
if (scrollY == 0) {
tween.restart();
}
});
스크롤이 0이 되면 restart() 시켜주는 방식입니다.
https://codepen.io/yahao2512/pen/PoRjvQE
하지만 정말 원하시는 것은 아래 사이트 같은 느낌일텐데요.
(하단 음식 사진 영역. 다시 등장 모션이 일어나는 부분)
저런 것은 tweenMax(gsap) 의 trigger 를 사용합니다.
https://greensock.com/docs/v3/Plugins/ScrollTrigger
답변 1