GSAP을 이용한 텍스트 박스 강조 애니메이션 구현하기(toggleclass)
CSS 24.10.30toggleClass()를 활용하면 클래스의 추가 및 제거를 통해 특정 요소에 동적 스타일과 애니메이션 효과를 손쉽게 제어할 수 있습니다. 다음은 이 방식으로 얻을 수 있는 여러 가지 장점입니다.
1. 코드 간결화
상태 전환에 필요한 스타일을 CSS로 분리할 수 있습니다.
JavaScript에서 복잡한 애니메이션 로직을 모두 구현할 필요 없이 toggleClass()로 클래스를 추가·제거하면 됩니다.
2. 이벤트 기반 상태 전환이 간편함
클릭, 호버 등 이벤트에 따라 애니메이션이 자연스럽게 적용됩니다.
예를 들어, 사용자가 클릭할 때마다 특정 박스가 강조되거나 원래 상태로 돌아가는 동작을 쉽게 구현할 수 있습니다.
3. 다양한 효과의 재사용성 증가
한 번 정의한 스타일 클래스를 여러 곳에서 재사용할 수 있어 유지보수가 편리합니다.
예를 들어, 여러 텍스트 박스에 동일한 강조 효과를 쉽게 적용할 수 있습니다.
4. 애니메이션의 상태 관리가 용이
toggleClass()는 내부적으로 클래스를 추가·제거하기 때문에 현재 상태를 직관적으로 파악할 수 있습니다.
상태가 여러 번 바뀌어도 코드가 엉키지 않고, 애니메이션의 정확한 제어가 가능합니다.
[스크립트]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | // 모든 dl 요소를 선택 const dlItems = document.querySelectorAll('.list dl'); // 각 dl 요소에 ScrollTrigger 설정 dlItems.forEach((item) => { ScrollTrigger.create({ trigger: item, // 해당 요소가 트리거 start: 'top 50%', // 화면 50% 지점에 요소가 도달할 때 시작 end: 'top 10%', // 10% 지점에서 끝남 toggleClass: { targets: item, className: 'on' // 'on' 클래스 추가/제거 }, toggleActions: 'play reverse play reverse', // 스크롤 방향에 따라 실행 }); }); | cs |
[예제]
See the Pen GSAP을 이용한 텍스트 박스 강조 애니메이션 구현하기(toggleclass) by designkits (@designkits) on CodePen.
관련 템플릿
