Словами самого skill
gsap.utils — это набор чистых вспомогательных функций GSAP для математики, диапазонов, единиц измерения, цветов и коллекций, не требующий регистрации. Skill документирует clamp, mapRange, normalize, interpolate, random, snap, shuffle, distribute, getUnit, unitize, splitColor, selector, toArray, pipe, wrap и wrapYoyo с их сигнатурами, значениями по умолчанию и разобранными примерами вывода.
Он предназначен для разработчиков, пишущих или проверяющих код GSAP, которому нужно преобразовать скролл в значение, нормализовать входные данные, привязать к сетке или ограничить селекторы областью компонента. Через весь файл проходит один паттерн: опустите завершающее значение, чтобы получить многоразовую функцию, — кроме random(), которой нужно передать true.
Что он выдаёт
- Преобразованное значение, возвращаемое напрямую, когда вы передаёте аргумент value
- Многоразовая функция, которая ограничивает, преобразует, нормализует или привязывает к сетке значения, передаваемые ей позже
- Новый массив с теми же элементами в случайном порядке
- Функция-селектор с ограниченной областью, которая находит элементы только внутри заданного элемента или ref
Как это работает
- 01Вспомогательные функции находятся в gsap.utils
Эти утилиты — чистые вспомогательные функции, не требующие регистрации, их можно вызывать где угодно, где JS управляет GSAP: в tween vars, обработчиках ScrollTrigger или Observer.
- 02Передайте значение последним — и получите результат сразу
Большинство утилит принимают конфигурацию первым аргументом, а преобразуемое значение — последним, немедленно возвращая результат преобразования.
- 03Опустите его, чтобы получить функцию
Опустите это конечное значение, и утилита вернёт функцию, которую вы вызовете позже с самим значением, так что одна конфигурация сможет обслуживать множество значений.
- 04Помните: random() меняет паттерн местами
random() не использует опущение аргумента для своей многоразовой формы; вы передаёте true последним аргументом и получаете функцию, возвращающую новое значение при каждом вызове.
- 05Snap можно задать прямо в tween
Для движения по сетке или с фиксированным шагом можно передать snap прямо в tween vars, не вызывая утилиту заранее.
- 06Соединяйте преобразования с помощью pipe
pipe соединяет функции слева направо, так что normalize, а затем snap можно применить как одну функцию внутри tween или callback.