TweenMax 효과 리셋
527
投稿した質問数 11
좋은 강의 감사드립니다.
혹시 해당 객체가 다시 화면에 보였을 때 tweenmax 효과를 다시 적용하게 할 수 있나요?
예를 들자면, 화면 첫 로딩시 글씨에 적용된 tweenmax효과를, 사용자가 화면 아래까지 본 뒤 "TOP" 버튼이나 스크롤을 통해 다시 위로 와서 "별이 쏟아지는 코딩일레븐" 글씨의 tweenmax 효과가 다시 보이고, 다시 화면을 아래로 스크롤 하면 card의 tweenmax효과가 또 나오는 식으로 가능한가요?
요약하면, tweenmax효과가 적용된 것을 리셋시켜 다시 효과가 적용되도록 할 수 있나요?
감사합니다~!
回答 1
0
안녕하세요 답변이 늦었습니다.
아래와 같은 방법이 있습니다. 간단한
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
모바일 스와이프 구현 마지막 숙제
0
402
2
레퍼런스 사이트
0
339
1
스크롤위치에 따른 페이지 변화에서
0
267
1
배열을 이용한 bg컬러 변경 강의에서 tagname body에 [0]이 왜 붙나요?
0
380
1
스크롤 위치에 따른 페이지 변화 - scroll 이벤트 에 대한 질문
0
675
1
페이징.페이지고정2 질문드립니다.
0
459
1
scrollTo 완성본
0
603
2
모바일 3D 입체 카드 제작 아이폰에서 에러
0
386
1
css 질문 드립니다
0
624
1
css 질문
0
284
1
pointBtn.addEventListner("click")
0
305
2
if문의 첫번째 조건 질문 있습니다~
0
285
1
offsetTop, offsetHeight
0
785
2
기존의 축 회전값에 더해서 rotate
0
320
1
모바일 드래그 강의 질문드립니다!
0
256
1
질문입니다.
0
215
1
GSAP(트윈맥스) 라이센스 관련 질문 드립니다.
0
1657
1
wrap 안에 click 이벤트
0
225
1
greensock을 사용하려면
0
701
1
max 이상으로 입력했을 때 질문입니다.
0
193
1
dom에서 직접i nput의 value 값을 갖고 나오는 것에 대해
0
372
1
화살표 회전 질문
0
263
1
질문이용~
0
219
1
파일명 한글시 live Server 작동안함
1
213
1