Benefits
Events
모든 요소에 대한 JavaScript 이벤트를 쉽게 수신할 수 있습니다. 이를 통해 프로젝트에 사용자 지정 기능을 추가할 때 매우 유연하게 활용할 수 있습니다. 또한 Slider 요소와 관련된 이벤트 등 Bricks 전용 이벤트를 활용할 수도 있습니다.
Events Actions
이벤트가 발생하면 클래스 추가/제거, 속성 변경, GSAP 타임라인 실행 등 다양한 작업을 수행할 수 있습니다.
GSAP Animations
코드를 작성하지 않고도 멋진 GSAP 애니메이션을 제작할 수 있습니다. 개발자라면 사용자 지정 애니메이션 객체를 사용하여 애니메이션을 완벽하게 제어할 수도 있습니다.
Section: Events
On mouseover
“On Mouseover” 이벤트는 사용자가 요소 위에 마우스를 올리면 트리거됩니다. 사용자가 요소 위에 마우스를 올리는 동안 이 이벤트가 여러 번 실행된다는 점에 유의하세요. 동작을 한 번만 실행하려면 On Mouseenter 이벤트를 사용해야 합니다.
On mouseenter
“On Mouseenter” 이벤트는 사용자가 요소 위에 마우스를 올리면 트리거됩니다. 이 이벤트는 사용자가 요소에 여러 번 마우스를 올리더라도 한 번만 실행됩니다.
On mouseleave
“On Mouseleave” 이벤트는 사용자가 마우스를 요소에서 멀리 이동할 때 발생합니다. 이 이벤트는 사용자가 마우스를 요소에서 여러 번 멀리 이동하더라도 한 번만 발생합니다.
타임라인이란?
GSAP 타임라인은 웹 개발에서 복잡한 애니메이션을 만들고 관리하는 데 사용되는 강력한 도구입니다. 개별 애니메이션 요소의 순서와 타이밍을 제어하는 타임라인이라고 생각하면 됩니다.
좀 더 자세히 설명하자면, GSAP 타임라인은 JavaScript를 사용하여 생성하는 객체로, 여러 애니메이션을 그룹화하고 시작 시간, 지속 시간 및 순서를 제어할 수 있습니다. 마치 영화 타임라인처럼 여러 장면을 순서대로 배열하고 각 장면의 지속 시간을 제어할 수 있지만, 웹 애니메이션의 경우는 다릅니다.
예를 들어, 이미지가 왼쪽에서 슬라이드 인되고 텍스트가 페이드 인된 후 버튼이 튀어오르는 애니메이션을 만든다고 가정해 보겠습니다. 이러한 각 요소에 대해 별도의 애니메이션을 만들 수도 있지만, GSAP 타임라인을 사용하면 여러 요소를 그룹화하고 타이밍을 하나의 단위로 제어할 수 있습니다.
이를 통해 관리 및 수정이 쉬운 복잡한 다단계 애니메이션을 만들 수 있습니다. 전체 타임라인을 제어하고, 일시 정지, 재시작 또는 역재생할 수 있으며, 애니메이션의 속도나 방향도 제어할 수 있습니다.
GSAP 타임라인은 이벤트 액션을 사용하여 제어할 수도 있습니다.
타임라인 트리거 선택자
이 설정을 사용하면 타임라인을 트리거할 요소를 찾는 데 사용할 선택기를 지정할 수 있습니다. “포인터” 아이콘을 사용하여 페이지에서 요소를 선택할 수 있습니다.
참고: 프런트엔드에서 애니메이션이 작동하지 않고 Bricks 설정의 “요소 ID 및 클래스 추가”를 필요에 따라 사용하는 경우, 프런트엔드에 선택자가 실제로 존재하는지 확인하세요. 선택자가 없으면 타임라인이 실행되지 않습니다. 이 경우, 요소에 사용자 지정 ID 또는 CSS 클래스를 설정하여 선택자로 사용해야 합니다.
Handle triggers separately
한 페이지에서 동일한 클래스의 트리거를 여러 개 사용하는 경우, 이 설정을 사용하면 각 트리거가 개별적으로 처리됩니다. 이렇게 하면 각 트리거에 대해 서로 다른 타임라인을 설정할 수 있습니다. 이 설정을 사용하지 않으면 동일한 클래스의 모든 트리거가 하나의 트리거로 처리되어 첫 번째 트리거가 실행되면 동시에 실행됩니다.
As Array
이 설정은 동일한 클래스를 공유하는 여러 요소에 애니메이션을 적용하는 데 사용됩니다. 각 요소는 개별적으로 트리거되고 애니메이션이 적용됩니다. 특히 같은 클래스 내의 각 요소를 개별적으로 처리해야 하는 복잡한 애니메이션을 만들 때 유용합니다. ‘트리거를 개별적으로 처리’와 유사하지만, 더 유연하게 사용할 수 있습니다.
ScrollTrigger Controls
Scroll Start
이 설정을 사용하면 타임라인이 시작되는 스크롤 위치를 정의할 수 있습니다. 기본값: top bottom. (애니메이션은 요소의 상단이 뷰포트 하단에 닿을 때 시작됩니다.)
Scroll End
이 설정을 사용하면 타임라인이 끝나는 스크롤 위치를 정의할 수 있습니다. 기본값: bottom top. (애니메이션은 요소의 하단이 뷰포트 상단에 닿으면 종료됩니다.)
Toggle Actions
연결된 애니메이션이 onEnter, onLeave, onEnterBack, onLeaveBack의 네 가지 토글 위치에서 어떻게 제어되는지를 순서대로 지정합니다.
기본값은 play none none none입니다. 즉, 입장 시 애니메이션을 재생하고, 나갈 때 아무 동작도 하지 않고, 뒤로 들어갈 때 아무 동작도 하지 않고, 뒤로 나갈 때 아무 동작도 하지 않습니다.
따라서 toggleActions: play pause resume reset은 입장 시 애니메이션을 재생하고, 나갈 때 일시 정지하고, 뒤로 다시 입장할 때 다시 시작하고, 처음부터 끝까지 스크롤할 때 reset(처음으로 되감기)합니다. 각 동작에 play, pause, resume, reset, restart, complete, reverse, none 키워드를 사용할 수 있습니다.
Scrub
이 설정을 사용하면 스크러빙을 활성화할 수 있습니다. 즉, 페이지를 스크롤할 때 타임라인이 스크러빙(재생)됩니다. 위로 스크롤하면 타임라인이 역순으로 재생되고, 아래로 스크롤하면 타임라인이 정방향으로 재생됩니다.
Smooth Scrub Value: 이 설정을 사용하면 부드러운 스크럽 값을 정의할 수 있습니다. 기본값: 1. 값이 높을수록 스크러빙이 더 부드러워집니다.
