수 많은 JS 라이브러리들을 하나씩 정복하기 위해서 작성하는 글입니다.
📌 GSAP 확장 플러그인
GSAP 확장 플러그인은 GSAP의 기능을 확장하여 더 많은 애니메이션 효과와 사용자 정의 기능을 추가할 수 있습니다. 이러한 플러그인은 GSAP의 유연성과 편의성을 향상시키며, 복잡한 애니메이션 작업을 쉽게 처리할 수 있도록 도와줍니다.
몇 가지 유용한 확장 플러그인을 소개해드리겠습니다!
1) MorphSVGPlugin
MorphSVGPlugin 플러그인은 SVG 패스의 모양을 애니메이션화하는 기능을 제공합니다.
MorphSVGPlugin 플러그인을 사용하면 SVG 패스의 모양을 쉽게 변형하여 다양한 애니메이션 효과를 구현할 수 있습니다. 예를 들어, 원형이 사각형으로 변환되거나, 패스의 모양이 부드럽게 전환되는 등의 효과를 구현할 수 있습니다.
2) DrawSVGPlugin
DrawSVGPlugin 플러그인은 SVG 패스의 선을 그리는 애니메이션을 구현하는 기능을 제공합니다.
DrawSVGPlugin 플러그인을 사용하면 SVG 패스의 선을 그리는 애니메이션을 구현할 수 있습니다. 예를 들어, 선이 서서히 그려지거나, 순서대로 선이 그려지는 등의 효과를 구현할 수 있습니다.
3) ScrollTrigger
ScrollTrigger 플러그인은 스크롤 기반의 애니메이션을 쉽게 생성하고 제어할 수 있도록 도와주는 강력한 도구입니다.
ScrollTrigger 플러그인을 사용하면 웹 페이지에서 스크롤 이벤트와 관련된 애니메이션을 다양하게 구현할 수 있습니다.
ScrollTrigger 공식 소개페이지
ScrollTrigger 데모
이 중에서 ScrollTrigger 플러그인은 GSAP 라이브러리를 사용하면서 많이 사용하게 되는 플러그인이므로 알아두시면 유용하게 사용할 수 있습니다!
📌 GSAP 옵션/메서드
1) Staggers 옵션
stagger 옵션은 GSAP에서 제공하는 고급 애니메이션 기법 중 하나로, 여러 개의 요소를 순차적으로 애니메이션화할 때 사용하는 옵션입니다.
stagger 옵션을 사용하면, 애니메이션 시작 시간을 요소마다 일정한 시간 간격으로 지연시킬 수 있습니다.
이 예제 코드에서는 .box 클래스를 가진 5개의 박스를 순차적으로 애니메이션화합니다. 각 박스는 0.2초씩 지연시킨 후, opacity 속성을 변경하여 나타나는 효과를 구현합니다.
2) .kill() 메서드
gsap.kill() 메서드는 GSAP 애니메이션을 중지하고 삭제하는 데 사용됩니다. 이 메서드를 호출하면, 애니메이션은 즉시 중지되고 요소는 초기 상태로 되돌아갑니다.
gsap.kill() 메서드는 호출될 때, 현재 진행 중인 애니메이션의 모든 트윈(Tween)이 중지되고, onComplete 콜백 함수도 실행됩니다. 이때, onComplete 콜백 함수의 params 매개 변수를 사용하여 다른 함수를 호출하거나, 다른 작업을 수행할 수 있습니다.
gsap.kill() 메서드는 다음과 같은 두 가지 방법으로 사용할 수 있습니다.
첫째, 특정 요소에 대한 모든 애니메이션을 중지하고 삭제할 수 있습니다. 이때, 요소의 ID를 kill() 메서드에 전달합니다.
gsap.kill("#box");둘째, 모든 애니메이션을 중지하고 삭제할 수 있습니다. 이때, kill() 메서드를 호출할 때 매개 변수를 생략하면 됩니다.
gsap.kill();gsap.kill() 메서드는 애니메이션을 즉시 중지하고 삭제하기 때문에, 이후에 애니메이션을 다시 시작하려면 새로운 애니메이션을 만들어야 합니다. 따라서, kill() 메서드는 애니메이션을 일시적으로 중지하거나 일부 트윈만 삭제하고자 할 때에는 사용하지 않는 것이 좋습니다.
