What problem does it solve?
This Skill provides a suite of utility functions for GSAP, helping developers implement complex animations and transformations with ease.
Core Features & Use Cases
- Math and Array Handling: Utilize functions like
clamp, mapRange, and normalize for precise value transformations.
- Randomization: Randomize values or pick elements from arrays with
random and shuffle.
- Snap and Wrap: Implement grid-aligned and cyclic values with
snap and wrapYoyo.
- Color Parsing: Extract units and parse color strings with
getUnit and splitColor.
- Collections and Arrays: Work with arrays and collections through
selector, toArray, and pipe.
- Use Case: Enhance a GSAP animation by using
gsap.utils.mapRange to map scroll position to a value range, and then gsap.utils.snap to snap the value to a grid.
Quick Start
Use the gsap-utils skill to apply a snap function to an element's position with the command: snap(10, 20, element).