프리랜서 웹디자이너 웹퍼블리셔RELATION

RELATION 로고

홈페이지 소스

[소스] 스크롤 트리거, 스크롤 애니메이션

2022.06.21
북마크 [출처 이동]    작성자 정보
** 스크롤 트리거
- 웹브라우져를 위, 아래로 스크롤 할때 나타내는 애니메이션.

스크롤 트리거 CDN( Content Delivery Network(콘텐츠 전송 네트워크))
- ScrollTrigger 체크 후 CDN 복사.
https://greensock.com/docs/v3/Installation?checked=core#CDN


Marker : 스크롤 영역 표시
start : 요소의 TOP 보이면 동작
strat 속성 : Top 요소의 위치, 100% strat의 스크롤 위치 ( start : 'top 100%',  )
end : 요소의 bottom이 보이면 동작
end의 속성 bottom 요소의 위치, 10% end의 스크롤 위치
toggleActions : 'play pause none none'
- pause 동작 멈춤
- resume  동작 멈췄던 요쇼 다시 동작
- revers 다시 동작 

연결된 애니메이션이 4개 (onEnter, onLeave, onEnterBlack, onLeaveBack) 순서대로 제어하는 방식 
기본값 (toggleAction: play pause resume reset)
들어갈 때 애니메이션을 재생하고 나갈 때 일시 중지하고 뒤로 다시 들어갈 때 다시 시작하고 처음부터 끝까지 스크롤할 때 재설정(처음으로 되감기)합니다. 
각 작업에 대해 "재생", "일시 중지", "재개", "재설정", "다시 시작", "완료", "역방향" 및 "없음" 키워드 중 하나를 사용할 수 있습니다.
 
  • to() - 애니메이션 할 종료 값을 정의하면 GSAP는 현재 값을 시작 값으로 사용합니다.
  • from() - 시작 값을 정의하여 "from" 에 애니메이션을 적용 하면 GSAP는 현재 값을 대상으로 사용합니다(예: 뒤로 실행되는 트윈).




https://greensock.com/docs/v3/Plugins/ScrollTrigger
 

이 포스트 공유하기

전체목록