gsap.registerPlugin(ScrollTrigger);
ScrollTrigger.saveStyles(".mobile, .desktop");
pc와 모바일은 화면 비율이 많이 다르기 때문에 각각 다른 애니메이션 효과를 사용하거나 모바일에서는 애니메이션 효과를 사용하고 싶지 않을 수 있다.
이땐 matchMedia()를 사용해서 해결할 수 있다.
ScrollTrigger.matchMedia({
"(min-width: 800px)": function() {
},
"(max-width: 799px)": function() {
},
"all": function() {
}
});기본적으로 자바스크립트의 미디어쿼리와 비슷해서 어렵지 않다.
min-width: 800px은 800px 이상일 때, max-width: 799px은 799px 이하일 때 적용된다.
"all"은 미디어쿼리와 상관 없이 모두 실행된다.
예시 코드를 보면 saveStyles()가 있는데 페이지가 로드되고 해당 요소의 css를 저장하는 기능이다.
이 기능이 왜 필요하냐면 gsap 애니메이션 효과는 인라인 스타일 태그로 삽입되기 때문에 css파일보다 우선 적용된다.
따라서 pc에서 애니메이션을 실행하고 모바일로 화면을 줄이게 될 경우 방금 실행된 애니메이션 때문에 요소의 css가 깨질 수 있다.
또 다른 방법
gsap.registerPlugin(ScrollTrigger);
let mm = gsap.matchMedia();
mm.add("(min-width: 800px)", () => {
});-> min-width 부분에 데스크탑 까지 지원하고 싶은경우에는 min-width:1025px, 태블릿의 경우 767px, 을 넣어 모션의 분기점을 설정할 수 있다.
