스킬 자체의 표현으로
gsap.utils는 수학, 범위, 단위, 색상, 컬렉션을 위한 GSAP의 순수 헬퍼 함수 모음이며 등록이 필요하지 않습니다. 이 스킬은 clamp, mapRange, normalize, interpolate, random, snap, shuffle, distribute, getUnit, unitize, splitColor, selector, toArray, pipe, wrap, wrapYoyo를 시그니처, 기본값, 실제 출력 예시와 함께 문서화합니다.
스크롤을 값에 매핑하거나, 입력을 정규화하거나, 그리드에 스냅하거나, 컴포넌트 내 선택자의 범위를 지정해야 하는 GSAP 코드를 작성하거나 검토하는 개발자를 위한 것입니다. 파일 전체에 하나의 패턴이 관통합니다: 재사용 가능한 함수를 얻으려면 마지막 값 인자를 생략하되, random()은 예외로 true를 전달합니다.
산출물
- 값 인자를 전달했을 때 직접 반환되는 변환된 값
- 나중에 전달하는 값을 clamp, map, normalize 또는 snap 처리하는 재사용 가능한 함수
- 동일한 요소를 무작위 순서로 담은 새 배열
- 주어진 요소 또는 ref 내부에서만 요소를 찾는 범위가 지정된 선택자 함수
작동 방식
- 01헬퍼는 gsap.utils에 존재합니다
이 유틸리티들은 등록이 필요 없는 순수 헬퍼로, GSAP을 구동하는 JS 어디에서든 호출할 수 있습니다: 트윈 vars, ScrollTrigger 또는 Observer 콜백.
- 02값을 마지막에 전달하면 결과를 즉시 얻습니다
대부분의 유틸리티는 설정을 먼저 받고 변환할 값을 마지막 인자로 받아, 변환된 결과를 즉시 반환합니다.
- 03함수 형태를 얻으려면 값을 생략하세요
마지막 값 인자를 생략하면 유틸리티는 나중에 값을 넘겨 호출할 함수를 반환하므로, 하나의 설정으로 여러 값을 처리할 수 있습니다.
- 04Random()은 패턴을 뒤집는다는 점을 기억하세요
random()은 재사용 가능한 형태를 위해 값 생략을 사용하지 않습니다. 마지막 인자로 true를 전달하면 호출마다 새로운 값을 반환하는 함수를 얻습니다.
- 05Snap은 트윈 자체에 설정할 수 있습니다
그리드 또는 스텝 기반 모션의 경우, 유틸리티를 먼저 호출하는 대신 트윈 vars에 직접 snap을 전달할 수 있습니다.
- 06Pipe로 변환을 체이닝하세요
pipe는 함수를 왼쪽에서 오른쪽으로 합성하므로, normalize 후 snap을 트윈이나 콜백 내에서 하나의 함수로 적용할 수 있습니다.