액션 제어 (toggleActions)

스크롤 방향과 이벤트 교차 상태 제어: toggleActions

요소가 처음 화면에 나타났을 때(onEnter) 애니메이션이 재생(Play)되었습니다. 스크롤을 더 내려서 요소가 화면 밖으로 완전히 벗어나면(onLeave) 어떻게 될까요? 스크롤을 다시 올려서 요소가 보일 때(onEnterBack)는요?
toggleActions는 스크롤을 내리거나 올릴 때 발생하는 이 4가지 진입/이탈 생명주기 이벤트에 대해 애니메이션을 어떻게 처리할지를 매우 간결한 문자열 하나로 정의합니다.

[그림 1] 스크롤 방향(위/아래)과 뷰포트 교차 상태에 따라 발동하는 4가지 생명주기

1. 4단계 상태와 문자열 순서

toggleActions: "① ② ③ ④" 와 같이 반드시 4개의 단어를 띄어쓰기로 구분하여 작성해야 합니다. 사용할 수 있는 명령어는 play, pause, resume, reverse, restart, reset, complete, none 입니다.

순서	이벤트명	발동 조건	설명
① 1번째	`onEnter`	스크롤 다운 ⬇️ (요소가 진입할 때)	뷰포트의 `start` 지점을 지나 아래로 스크롤 될 때 발생합니다. 일반적으로 `play`를 사용합니다.
② 2번째	`onLeave`	스크롤 다운 ⬇️ (요소가 떠날 때)	뷰포트의 `end` 지점을 지나 더 아래로 스크롤 될 때 발생합니다. `none`이나 `pause` 등을 씁니다.
③ 3번째	`onEnterBack`	스크롤 업 ⬆️ (다시 진입할 때)	뷰포트의 `end` 지점을 지나 위로 다시 올라올 때 발생합니다. `reverse` 나 `resume`을 주로 씁니다.
④ 4번째	`onLeaveBack`	스크롤 업 ⬆️ (다시 떠날 때)	뷰포트의 `start` 지점을 지나 완전히 위로 벗어날 때 발생합니다. 초기화(`reset`)를 주로 씁니다.

2. 시각적 원리: 4 State Life Cycle

💡 기본값(Default)은 무엇일까요?

개발자가 toggleActions를 생략할 경우, GSAP의 기본값은 "play none none none" 입니다. 즉, 최초 화면에 나타날 때 딱 한 번 재생되고 그 이후에는 스크롤을 어떻게 하든 아무 일도 일어나지 않는 것이 기본 동작입니다.

순서

이벤트명

발동 조건

설명

① 1번째

onEnter

스크롤 다운 ⬇️
(요소가 진입할 때)

뷰포트의 start 지점을 지나 아래로 스크롤 될 때 발생합니다. 일반적으로 play를 사용합니다.

② 2번째

onLeave

스크롤 다운 ⬇️
(요소가 떠날 때)

뷰포트의 end 지점을 지나 더 아래로 스크롤 될 때 발생합니다. none이나 pause 등을 씁니다.

③ 3번째

onEnterBack

스크롤 업 ⬆️
(다시 진입할 때)

뷰포트의 end 지점을 지나 위로 다시 올라올 때 발생합니다. reverse 나 resume을 주로 씁니다.

④ 4번째

onLeaveBack

스크롤 업 ⬆️
(다시 떠날 때)

뷰포트의 start 지점을 지나 완전히 위로 벗어날 때 발생합니다. 초기화(reset)를 주로 씁니다.