API
API
The module exports easingGradient and easingStops for gradients, and createFadeEdge for scrollers.
| Name | Description |
|---|---|
easingGradient({ from?, to, easing?, direction?, stops?, type? }) | Returns a CSS gradient string to use as a background or a mask. |
from, to | The two colors. from is "transparent" by default. Any CSS color works, var() included. |
easing, EASINGS | "ease-in-out-sine", "ease-in", "ease-out", "linear", or a cubic bezier tuple such as [0.23, 1, 0.32, 1]. "ease-in-out-sine" by default. |
direction, type | The gradient's direction, "to bottom" by default for a linear gradient, and "linear" or "radial". |
stops | How many stops to sample. 12 by default, at least 2. |
easingStops(easing?, stops?) | The sampled positions and progress, each from 0 to 1, for a gradient you write yourself. |
createFadeEdge(scroller, { size?, curve?, mode? }) | Masks the edges of a horizontal scroller. Returns update(options) and destroy(). |
size | The width of each fade in pixels. 64 by default. |
curve, FADE_CURVES | "smooth" eases the fade in and out, "linear" is a straight ramp. "smooth" by default. |
mode, FADE_MODES | "scroll" grows each fade with the distance left to scroll. "fixed" keeps it at full size until that edge is reached. "scroll" by default. |
buildFadeGradient(curve, rtl?) | The mask the fade edge writes, for a scroller you measure yourself. |