The visual properties
| Property | Type | Default | Description |
|---|---|---|---|
| opacity | number 0–1 | 1 | Element transparency. 0 is invisible, 1 is fully visible. The most-used property in any animation library. |
| blur | number (px) | 0 | Gaussian blur in pixels. Subtle values (1–3px) suggest depth of field; larger values (10+) create dreamy reveals. |
| brightness | number | 1 | Brightness multiplier. 0 is black, 1 is natural, values above 1 brighten. 0.5 is half brightness. |
| contrast | number | 1 | Contrast multiplier. 0 is solid grey, 1 is natural, values above 1 increase contrast. |
| saturate | number | 1 | Color saturation. 0 is grayscale, 1 is natural, values above 1 oversaturate. |
| grayscale | number 0–1 | 0 | Convert to grayscale. 0 is full color, 1 is fully gray. Convenient shortcut over saturate. |
How filters compose
When you enable several filter properties on the same animation, Glopzi composes them in a fixed order:
- blur
- brightness
- contrast
- saturate
- grayscale
Order matters because filters apply on top of each other. Blur followed by brightness produces a different image than brightness followed by blur. Glopzi’s order is the most visually predictable for typical combinations.
Opacity is separate from the filter chain. It applies to the final composited result.
Performance notes
- Opacity is GPU-accelerated and essentially free at any frame rate.
- Filters (blur, brightness, etc.) are also composited on GPU but more expensive than transforms. Animating filters on dozens of elements simultaneously can drop frame rate, especially on mobile.
- Heavy blur values (above ~30px) multiply cost. A 50px blur on a hero image is beautiful; the same on twenty cards is a thermal event.
Tip
For mobile, consider disabling expensive filter animations via breakpoint overrides. The visual loss is small; the battery savings aren’t.
Useful patterns
- Fade up: opacity 0 to 1 + translate Y 30 to 0. The classic entrance.
- Color wash on hover: grayscale 1 to 0 with hover trigger. Image goes from black-and-white to full color.
- Focus blur: blur 8 to 0 + opacity 0 to 1. Image resolves into focus from a misty start.
- Cinematic dim: brightness 1 to 0.7 on a background image when overlay text appears. Subtle, helps text legibility.
Next steps
- Transform: x, y, scale, rotate, skew for the geometric properties.
- Color and background covers color and background-color.
- Performance and Core Web Vitals covers the trade-offs of filter use at scale.