Dans les termes du Skill
gsap.utils est l'ensemble de fonctions utilitaires pures de GSAP pour les mathématiques, les plages, les unités, les couleurs et les collections, et il ne nécessite aucun enregistrement. Le skill documente clamp, mapRange, normalize, interpolate, random, snap, shuffle, distribute, getUnit, unitize, splitColor, selector, toArray, pipe, wrap et wrapYoyo, avec leurs signatures, leurs valeurs par défaut et des exemples de résultats.
Il s'adresse aux développeurs qui écrivent ou révisent du code GSAP devant mapper le scroll à une valeur, normaliser des entrées, s'accrocher à une grille ou scoper des sélecteurs dans un composant. Un même motif parcourt le fichier : omettez la valeur finale pour obtenir une fonction réutilisable, sauf pour random(), qui prend true.
Ce qu'il produit
- La valeur transformée, renvoyée directement lorsque vous passez l'argument value
- Une fonction réutilisable qui limite, associe, normalise ou aligne les valeurs que vous lui transmettez ultérieurement
- Un nouveau tableau avec les mêmes éléments dans un ordre aléatoire
- Une fonction de sélection ciblée qui ne trouve que les éléments à l'intérieur de l'élément ou de la ref donnée
Fonctionnement
- 01Les helpers résident dans gsap.utils
Les utils sont des helpers purs qui ne nécessitent aucune enregistrement et peuvent être appelés partout où JS pilote GSAP : variables de tween, callbacks ScrollTrigger ou Observer.
- 02Transmettez la valeur en dernier, obtenez le résultat maintenant
La plupart des utils prennent leur configuration en premier et la valeur à transformer comme argument final, en renvoyant immédiatement le résultat transformé.
- 03Ne pas l'activer pour une forme fonctionnelle
Si vous omettez cette valeur finale, l'utilitaire vous renvoie une fonction que vous appelez plus tard avec la valeur, de sorte qu'une seule configuration peut servir plusieurs valeurs.
- 04Rappelez-vous : Random() inverse le motif
random() n'utilise pas l'omission pour sa forme réutilisable ; vous passez true comme dernier argument et obtenez une fonction renvoyant une nouvelle valeur à chaque appel.
- 05Le snap peut être défini dans le tween lui-même
Pour une animation basée sur une grille ou des étapes, vous pouvez passer snap directement dans les vars du tween plutôt que d'appeler d'abord l'utilitaire.
- 06Enchaîner les transformations avec Pipe
pipe compose des fonctions de gauche à droite, ce qui permet d'appliquer normalize puis snap comme une seule fonction à l'intérieur d'un tween ou d'un callback.