1.GSAP 스크롤 트리거의 반응형 분기처리
gsap의 애니메이션 효과를 특정 해상도에서 변경하고 싶다면 matchMedia를 사용해 주면 된다.
사용법은 다음과 같다.
<script>
ScrollTrigger.matchMedia({
// large
"(min-width: 1025px)": function() {
},
// medium
"(min-width: 768px) and (max-width: 1024px)": function() {
},
// small
"(max-width: 767px)": function() {
},
// all
"all": function() {
}
});
</script>예를 들어 min-width: 1025px은 1025px이상일 때, max-width: 767px은 767px이하일 때 적용된다. all은 몇 px인가에 상관 없이 공통으로 사용되는 효과를 넣어주면 된다.
2.메뉴 동작(pc)
pc메뉴에서 검색 버튼을 누르면 메뉴 글자들이 전부 사라지고, 하단에 빠른 링크 창이 뜨고 맨 마지막에는 메뉴 글자들이 사라진 자리에 검색창이 뜨는 애니메이션 효과를 넣으려고 한다.
gsap의 타임라인 효과를 이용하면 간단하게 만들 수 있다.
addLabel 참고 문서 링크
타임라인을 만들어 주기 위해 라벨을 하나 만든다.(여기서는 motion) gsap효과 뒤에 motion을 넣어주면 이제 이 라벨이 있는 효과들은 하나로 묶인다.
data-motion="header"(메뉴 목록들의 마크업에 따로 추가해 준다)의 투명도를0, 스케일을 0로 만드는 동작을 끝에서부터 0.5초 간격으로 실행해줌과 동시에 빠른 링크 창이 뜬다.
검색창은 맨 마지막에 나타나게 하고 싶기 때문에 motion이 아니라 motion-=1을 준다. 타임라인 종료하기 1초 전에 검색창 영역의 z-index를 12로 올린다는 의미이다. 이제 이 menuMotion.play()를 검색버튼을 눌렀을 때의 동작에 넣어주면 된다.(반대의 경우는 menuMotion.reverse())
<script>
menuMotion = gsap.timeline({
paused:true,
})
menuMotion.addLabel('motion')
.to('[data-motion="header"]',{ opacity:0,scale:0, stagger: { amount: 0.5, from: "end" }, },'motion')
.to('.search-wrap',{display: 'block',opacity: 1},'motion')
.to('.header .gnb-area',{'z-index':12},'motion-=1')
</script>참고 블로그
[GSAP] 예제 - Pin과 timeline으로 요소 등장
스크롤 트리거 - 플러그인 | GSAP
3.동일한 모션을 각자 다른 곳에 주기
gsap 스크롤 트리거 효과를 사용하다 보면 동일한 모션을 각자 다른 곳에 주고 싶을 때가 있는데, 그럴 때 일일이 적용하기엔 시간이 너무 오래 걸린다면 html에 클래스명을 주는 것만으로도 동일한 모션을 각자 다른 곳에 줄수 있다.
동작을 주고 싶은 곳에 공통으로 들어갈 클래스명을 추가한다. (여기선 scrollY라고 지음)
그리고 효과의 시작과 끝 수치를 지정해 준다.(여기서는 fromTo를 사용할 것이기 때문에 둘다 지정해 주어야 한다.)
<div class="img-box scrollY" data-from="-100" data-to="100">
............
</div>그 뒤에 스크롤 트리거를 만들어 준다. scrollY클래스를 가진 각 요소(element)별로 접근해서 반복문의 기능을 수행한다. 그러면 지정된 요소에 도달하면 트리거가 실행되고, 동작의 시작을 지정한 위치에서 끝을 지정한 위치로 효과가 들어가게 된다.
<script>
$('.scrollY').each(function (index, element) {
fromVal = $(this).data('from')
toVal = $(this).data('to')
gsap.fromTo(element, {
y: fromVal,
}, {
scrollTrigger: {
trigger: element,
start: "0% 80%",
end: "100% 80%",
scrub: 1,
},
y: toVal,
})
})
</script>