[JS]GSAP : toggleClass 속성

toggleClass 속성이란?

요소의 클래스를 토글하는 데 사용한다.

=> 요소의 클래스를 토글하면 해당 클래스가 없으면 추가되고, 이미 클래스가 존재하면 제거됩니다.

예를 들어, GSAP의 toggleClass를 사용하여 요소의 특정 상태에 따라 클래스를 추가하거나 제거하여 애니메이션 효과를 만들 수 있다.

이것은 CSS 클래스를 통해 트랜지션 및 애니메이션 효과를 제어하는 데 유용한 방법 중 하나입니다.

위와 같은 css 코드가 있을 때, 'is-active'라는 클래스명을 toggleClass로 이용하면 쉽게 넓이를 조정할 수 있다.

   ScrollTrigger.create({
            start: "top -80",
            end: 99999,
            toggleClass: {
                className: "is-active",
                targets: "#parallax__nav"
            }
        });

=> top에서 80px 정도 스크롤을 내렸을 때, is-active라는 클래스명이 #parallax__nav에 추가되며 CSS 속성에 의해 넓이가 줄어든다.

반대로 스크롤을 올렸을 때는 클래스가 떨어지며 다시 넓이가 늘어난다.