Post

gsap 정리

Posted
Preview Image
By sunhew 11 min read

GSAP

GSAP (GreenSock Animation Platform) 은 웹 애니메이션을 위한 매우 강력하고 유연한 자바스크립트 라이브러리입니다. ScrollTrigger 플러그인은 스크롤에 따라 애니메이션을 트리거하는 기능을 제공하며, 이는 웹사이트의 인터랙티브한 요소를 구현할 때 특히 유용합니다.

gsap의 첫번째 정리.

gsap 정리 목록

  • onEnter
  • onEnterBack
  • onLeave

  • onLeaveBack

  • play()
  • pause()
  • resume()
  • reset()
  • restart()
  • complete()

  • reverse()

  • to, from
  • toggleActions
  • start, end
  • scrub
  • pin
  • toggleClass
  • callback
  • snap

onEnter

onEnter는 프로그래밍에서 이벤트 처리를 위한 콜백 함수나 메소드의 이름으로 자주 사용 되며, 특히 웹 개발과 앱 개발에서 많이 보입니다. 사용자가 특정 영역에 진입할 때 발생하는 이벤트를 처리하기 위해 사용 됩니다. 그러나, onEnter의 구체적인 구현과 의미는 사용되는 프레임워크나 라이브러리에 따라 다를 수 있습니다.

1
2
3
4
5
6
7
8
9
10
11
12

<Route path="/protected" onEnter={requireAuth}>
  <ProtectedPage />
</Route>

function requireAuth(nextState, replace) {
  if (!auth.isLoggedIn()) {
    replace({
      pathname: '/login',
      state: { nextPathname: nextState.location.pathname }
    });
  }
}

위의 예시에서는 requireAuth 함수는 사용자가 “/protected” 경로에 접근하려 할 때 실행 됩니다. 사용자가 로그인하지 않은 상태라면, 사용자를 로그인 페이지로 리다이렉션합니다. onEnter는 사용자의 경험을 향상시키고, 원하는 페이지 또는 컨텐츠에 접근하기 전에 필요한 조건을 충족시키기 위한 중요한 도구입니다.

웹 개발에서의 onEnter
  • 웹 개발에서 onEnter는 사__용자가 특정 요소나 페이지 영역에 진입했을 때 실행되는 이벤트 핸들러나 콜백 함수를 지칭__ 할 수 있습니다. 예를 들어, 스크롤 이벤트와 연결하여 특정 스크롤 위치에 도달했을 때 애니메이션이나 로딩과 같은 동작을 트리거할 때 사용될 수 있습니다.
React Router에서의 onEnter
  • React Router와 같은 클라이언트 사이드 라우팅 라이브러리에서 onEnter는 라우트에 진입하기 전에 실행되어야 하는 콜백 함수를 지정 하는 데 사용됩니다. 이를 통해 사용자가 특정 라우트에 접근하기 전에 권한 확인, 데이터 로딩, 리다이렉션 등의 작업을 수행할 수 있습니다.

예를 들어, 사용자가 로그인이 필요한 페이지에 접근하려 할 때 로그인 상태를 확인하고, 로그인하지 않은 상태라면 로그인 페이지로 리다이렉션하는 로직을 onEnter 콜백 안에 구현 할 수 있습니다.

애니메이션 라이브러리에서의 onEnter
  • 애니메이션 라이브러리에서 onEnter는 특정 요소가 화면에 진입하는 순간 애니메이션을 시작하기 위해 사용 될 수 있습니다. 예를 들어, 사용자가 스크롤을 내려 특정 섹션에 도달했을 때 그 섹션의 요소들이 순차적으로 나타나는 애니메이션을 구현 할 때 사용됩니다.

onEnterBack

CSS에서 display 속성은 HTML 문서 내의 요소들이 어떻게 보여질지를 결정하는 중요한 속성입니다. display: table, display: table-row, display: table-cell 등은 이 속성의 값 중에서 테이블 관련 값들입니다. 이 값들을 사용하면, HTML 요소들을 테이블처럼 보이게 할 수 있으며, 테이블과 유사한 레이아웃을 CSS만으로 생성할 수 있습니다.

display: table
  • 이 값은 요소를 테이블로 취급합니다. 즉, table 태그와 유사한 표현을 CSS로 재현할 수 있습니다. 이 속성을 사용하면, 해당 요소는 테이블 컨테이너로 작동하며, 내부에 display: table-row, display: table-cell 등의 값을 가진 자식 요소 들을 포함할 수 있습니다.
display: table-row
  • 이 값은 요소를 테이블의 한 행으로 취급합니다. 즉, tr 태그와 유사한 표현을 할 수 있습니다. display: table로 지정된 요소 내부에서 사용되어야 하며, 주로 display: table-cell 값을 가진 요소들을 그룹화 하는 데 사용됩니다.
display: table-cell
  • 이 값은 요소를 테이블 셀로 취급합니다. 즉, td 또는 th 태그와 유사한 표현 을 할 수 있습니다. display: table-row로 지정된 요소 내부에서 사용됩니다. 이를 통해 테이블의 각 셀을 구성할 수 있으며, 텍스트 정렬, 패딩 등 테이블 셀에 적용되는 다양한 스타일링 옵션을 사용할 수 있습니다.

onLeave

onLeave 콜백은 스크롤 영역을 떠날 때 실행 됩니다. 예를 들어, 사용자가 특정 섹션을 스크롤하여 그 영역을 벗어나는 순간 특정 액션을 실행하고 싶을 때 onLeave를 사용 할 수 있습니다. 이를 통해 애니메이션을 중지하거나, 다른 섹션으로의 전환 효과를 시작하는 등의 다양한 동작을 구현할 수 있습니다.

1
2
3
4
5
6
7
8
9

gsap.to(".box", {
  scrollTrigger: {
    trigger: ".box",
    start: "top center", // 트리거 요소가 뷰포트 상단과 중앙에 오면
    end: "bottom top", // 트리거 요소 하단이 뷰포트 상단에 오면
    onLeave: () => console.log("트리거 요소가 뷰포트를 벗어났습니다."), // onLeave 콜백 실행
  },
  x: 100, // x축으로 100px 이동
});

위의 예시에서는 box 클래스를 가진 요소가 사용자의 뷰포트를 벗어날 때 콘솔에 메시지를 출력합니다. 이처럼 onLeave는 사용자가 특정 섹션을 벗어나는 순간을 감지하여 필요한 로직을 실행할 수 있는 유용한 훅입니다.

GSAP와 ScrollTrigger 플러그인을 사용하면 웹사이트나 애플리케이션에 동적이고 반응형 애니메이션을 효과적으로 구현할 수 있으며, onLeave와 같은 콜백을 통해 사용자 경험을 풍부하게 만들 수 있습니다.

onLeaveBack

GSAP의 ScrollTrigger 플러그인은 스크롤 위치에 기반한 애니메이션을 트리거하는 기능을 제공합니다. ‘onLeaveBack’은 ScrollTrigger의 콜백 함수 중 하나로, 사용자가 ScrollTrigger 섹션을 벗어나 역방향(즉, 위쪽으로 스크롤하여 섹션으로 다시 들어가는 방향)으로 스크롤할 때 실행 됩니다.


1
2
3
4
5
6
7
8
9
10

gsap.to(".target", {
  scrollTrigger: {
    trigger: ".trigger",
    start: "top center",
    end: "bottom top",
    onLeaveBack: () => console.log("Leaving the section in the reverse direction."),
    markers: true, // 개발 중 시각적 마커 표시
  },
  x: 100,
});

위의 예시에서는 .trigger 요소를 기준으로 스크롤 트리거가 설정 되어 있습니다. 사용자가 이 요소를 역방향으로 스크롤하여 벗어날 때 콘솔에 메시지가 출력됩니다. onLeaveBack 콜백은 이와 같이 사용자가 특정 섹션을 역방향으로 벗어날 때 필요한 로직 을 실행하는 데 사용됩니다.

onLeaveBack의 사용법
  • ‘onLeaveBack’ 콜백은 사용자가 지정된 트리거 요소를 역방향으로 벗어날 때 특정 작업을 수행하고 싶을 때 유용합니다. 예를 들어, 사용자가 페이지의 특정 섹션을 벗어나 위쪽으로 돌아갈 때 애니메이션을 초기화하거나 다른 액션을 취하고자 할 때 사용할 수 있습니다.
주의사항

  • onLeaveBack는 사용자가 해당 섹션을 역방향으로 벗어날 때만 트리거됩니다.

  • ScrollTrigger의 다양한 콜백과 옵션을 효과적으로 사용하기 위해서는 GSAP와 ScrollTrigger 플러그인에 대한 좋은 이해가 필요합니다.

남은 gsap 코드는 다음 시간에 마저 소개하겠습니다.

gsap
gsap
This post is licensed under CC BY 4.0 by the author.