Skip to content

Commit 80dbfcc

Browse files
Wombosvideocoffeeispower
Wombosvideo
and
coffeeispower
authored
feat: add utilities for blur transitions (#54)
* add blur animation * Add blur support * style: format code * style: remove unnecessary comments * style: reorder blur properties and utilities * fix: revert `scale` to `scale3d` for browser compatibility This commit reverts the change from `scale` to `scale3d` in the animation properties. The `scale3d` function has been known to provide better performance and compatibility across different browsers. The next major version will reintroduce `scale`. * docs: add blur utilities documentation * style: add missing line break --------- Co-authored-by: Tiago Dinis <tiagodinis33@proton.me>
1 parent f81346c commit 80dbfcc

File tree

4 files changed

+200
-20
lines changed

4 files changed

+200
-20
lines changed

‎README.md‎

Lines changed: 13 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -124,16 +124,18 @@ To customize the animation parameters, use the following classes:
124124

125125
#### Transform Classes
126126

127-
| Class | Description |
128-
| ----------------------------- | -------------------------------------------------------------------------------------------------------------------------------- |
129-
| [`fade-<io>`][Docs_Fade] | Fades the element in from or out to `opacity: 0`. |
130-
| [`fade-<io>-*`][Docs_Fade] | Fades the element in from or out to the specified value. Possible values: Any `<number>` (percentage) or any other `[<value>]`. |
131-
| [`zoom-<io>`][Docs_Zoom] | Zooms the element in from or out to `scale3D(0,0,0)`. |
132-
| [`zoom-<io>-*`][Docs_Zoom] | Zooms the element in from or out to the specified value. Possible values: Any `<number>` (percentage) or any other `[<value>]`. |
133-
| [`spin-<io>`][Docs_Spin] | Spins the element in from or out to `rotate(30deg)`. |
134-
| [`spin-<io>-*`][Docs_Spin] | Spins the element in from or out to the specified value. Possible values: Any `<number>` (degrees) or any other `[<value>]`. |
135-
| [`slide-<dir>`][Docs_Slide] | Slides the element in from or out to the specified direction (`100%`). |
136-
| [`slide-<dir>-*`][Docs_Slide] | Slides the element in from or out to the specified value. Possible values: Any `<number>` (percentage) or any other `[<value>]`. |
127+
| Class | Description |
128+
| ----------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
129+
| [`blur-in-*`][Docs_Blur] | Applies a blur effect on the element when it enters. Possible values: `blur-in`, `blur-in-<number>`, `blur-in-(<custom-property>)`, or `blur-in-[<value>]`. |
130+
| [`blur-out-*`][Docs_Blur] | Applies a blur effect on the element when it exits. Possible values: `blur-out`, `blur-out-<number>`, `blur-out-(<custom-property>)`, or `blur-out-[<value>]`. |
131+
| [`fade-<io>`][Docs_Fade] | Fades the element in from or out to `opacity: 0`. |
132+
| [`fade-<io>-*`][Docs_Fade] | Fades the element in from or out to the specified value. Possible values: Any `<number>` (percentage) or any other `[<value>]`. |
133+
| [`zoom-<io>`][Docs_Zoom] | Zooms the element in from or out to `scale3D(0,0,0)`. |
134+
| [`zoom-<io>-*`][Docs_Zoom] | Zooms the element in from or out to the specified value. Possible values: Any `<number>` (percentage) or any other `[<value>]`. |
135+
| [`spin-<io>`][Docs_Spin] | Spins the element in from or out to `rotate(30deg)`. |
136+
| [`spin-<io>-*`][Docs_Spin] | Spins the element in from or out to the specified value. Possible values: Any `<number>` (degrees) or any other `[<value>]`. |
137+
| [`slide-<dir>`][Docs_Slide] | Slides the element in from or out to the specified direction (`100%`). |
138+
| [`slide-<dir>-*`][Docs_Slide] | Slides the element in from or out to the specified value. Possible values: Any `<number>` (percentage) or any other `[<value>]`. |
137139

138140
### Ready-to-Use Animations
139141

@@ -204,6 +206,7 @@ By the way, if you don't use some of the above animations, they will not be incl
204206
[Docs_Running]: ./docs/parameters/animation-play-state.md#running
205207
[Docs_Paused]: ./docs/parameters/animation-play-state.md#paused
206208
[Docs_Play_State]: ./docs/parameters/animation-play-state.md#play-state-
209+
[Docs_Blur]: ./docs/transforms/blur.md
207210
[Docs_Fade]: ./docs/transforms/opacity.md
208211
[Docs_Zoom]: ./docs/transforms/scale.md
209212
[Docs_Spin]: ./docs/transforms/rotate.md

‎docs/transforms/README.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,10 @@ In the context of animations, transforms define the starting and ending styles o
99
1010
| Class | Description |
1111
| ----------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
12+
| [`blur-in`][Docs_Blur_In] | Blurs the element in from `20px`. |
13+
| [`blur-in-*`][Docs_Blur_In] | Blurs the element in from the specified value. Possible values: Any `<number>` (pixels) or any other `[<value>]`. |
14+
| [`blur-out`][Docs_Blur_Out] | Blurs the element out to `20px`. |
15+
| [`blur-out-*`][Docs_Blur_Out] | Blurs the element out to the specified value. Possible values: Any `<number>` (pixels) or any other `[<value>]`. |
1216
| [`fade-in`][Docs_Fade_In] | Fades the element in from `opacity: 0`. |
1317
| [`fade-in-*`][Docs_Fade_In] | Fades the element in from the specified value. Possible values: Any `<number>` (percentage) or any other `[<value>]`. |
1418
| [`fade-out`][Docs_Fade_Out] | Fades the element out to `opacity: 0`. |
@@ -50,6 +54,8 @@ In the context of animations, transforms define the starting and ending styles o
5054

5155
[Animate_in]: ../animations/in-out.md#animate-in
5256
[Animate_out]: ../animations/in-out.md#animate-out
57+
[Docs_Blur_In]: ./blur.md#blur-in-
58+
[Docs_Blur_Out]: ./blur.md#blur-out-
5359
[Docs_Fade_In]: ./opacity.md#fade-in-
5460
[Docs_Fade_Out]: ./opacity.md#fade-out-
5561
[Docs_Zoom_In]: ./scale.md#zoom-in-

‎docs/transforms/blur.md‎

Lines changed: 151 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,151 @@
1+
# Blur
2+
3+
While technically not a transform, blur can be used to unblur elements when they appear or blur them when they disappear.
4+
5+
> [!NOTE]
6+
> You also need to apply [`animate-in`][Animate_in] or [`animate-out`][Animate_out] classes respectively.
7+
8+
## `blur-in-*`
9+
10+
<table>
11+
<thead>
12+
<tr>
13+
<th>Class</th>
14+
<th>Styles</th>
15+
</tr>
16+
</thead>
17+
<tbody>
18+
<tr>
19+
<td>
20+
21+
`blur-in`
22+
23+
</td>
24+
<td>
25+
26+
```css
27+
--tw-enter-blur: 20px;
28+
```
29+
30+
</td>
31+
</tr>
32+
<tr>
33+
<td>
34+
35+
`blur-in-<number>`
36+
37+
</td>
38+
<td>
39+
40+
```css
41+
--tw-enter-blur: calc(<number> * 1px);
42+
```
43+
44+
</td>
45+
</tr>
46+
<tr>
47+
<td>
48+
49+
`blur-in-(<custom-property>)`
50+
51+
</td>
52+
<td>
53+
54+
```css
55+
--tw-enter-blur: var(<custom-property>);
56+
```
57+
58+
</td>
59+
</tr>
60+
</tr>
61+
<tr>
62+
<td>
63+
64+
`blur-in-[<value>]`
65+
66+
</td>
67+
<td>
68+
69+
```css
70+
--tw-enter-blur: <value>;
71+
```
72+
73+
</td>
74+
</tr>
75+
</tbody>
76+
</table>
77+
78+
## `blur-out-*`
79+
80+
<table>
81+
<thead>
82+
<tr>
83+
<th>Class</th>
84+
<th>Styles</th>
85+
</tr>
86+
</thead>
87+
<tbody>
88+
<tr>
89+
<td>
90+
91+
`blur-out`
92+
93+
</td>
94+
<td>
95+
96+
```css
97+
--tw-exit-blur: 20px;
98+
```
99+
100+
</td>
101+
</tr>
102+
<tr>
103+
<td>
104+
105+
`blur-out-<number>`
106+
107+
</td>
108+
<td>
109+
110+
```css
111+
--tw-exit-blur: calc(<number> * 1px);
112+
```
113+
114+
</td>
115+
</tr>
116+
<tr>
117+
<td>
118+
119+
`blur-out-(<custom-property>)`
120+
121+
</td>
122+
<td>
123+
124+
```css
125+
--tw-exit-blur: var(<custom-property>);
126+
```
127+
128+
</td>
129+
</tr>
130+
</tr>
131+
<tr>
132+
<td>
133+
134+
`blur-out-[<value>]`
135+
136+
</td>
137+
<td>
138+
139+
```css
140+
--tw-exit-blur: <value>;
141+
```
142+
143+
</td>
144+
</tr>
145+
</tbody>
146+
</table>
147+
148+
<!-- Links -->
149+
150+
[Animate_in]: ../animations/in-out.md#animate-in
151+
[Animate_out]: ../animations/in-out.md#animate-out

‎src/tw-animate.css‎

Lines changed: 30 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,12 @@
3737
initial-value: 1;
3838
}
3939

40+
@property --tw-enter-blur {
41+
syntax: "*";
42+
inherits: false;
43+
initial-value: 0;
44+
}
45+
4046
@property --tw-enter-opacity {
4147
syntax: "*";
4248
inherits: false;
@@ -67,6 +73,12 @@
6773
initial-value: 0;
6874
}
6975

76+
@property --tw-exit-blur {
77+
syntax: "*";
78+
inherits: false;
79+
initial-value: 0;
80+
}
81+
7082
@property --tw-exit-opacity {
7183
syntax: "*";
7284
inherits: false;
@@ -163,6 +175,7 @@
163175
transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0)
164176
scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1))
165177
rotate(var(--tw-enter-rotate, 0));
178+
filter: blur(var(--tw-enter-blur, 0));
166179
}
167180
}
168181

@@ -172,19 +185,10 @@
172185
transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0)
173186
scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1))
174187
rotate(var(--tw-exit-rotate, 0));
188+
filter: blur(var(--tw-exit-blur, 0));
175189
}
176190
}
177191

178-
/*
179-
* Radix, Bits UI and Reka UI utilize CSS variables to define the height of Accordion and Collapsible
180-
* content during open/close animations. The `--radix/bits/reka-accordion-content-height` variables
181-
* control the height of Accordion content, while `collapsible` variables are used for Collapsibles.
182-
*
183-
* The fallback value `auto` is used here, but it depends on the `interpolate-size: allow-keywords`
184-
* property, which currently has limited browser support. For more details, see:
185-
* <https://developer.mozilla.org/en-US/docs/Web/CSS/interpolate-size>
186-
*/
187-
188192
--animate-accordion-down: accordion-down var(--tw-animation-duration, var(--tw-duration, 200ms))
189193
var(--tw-ease, ease-out) var(--tw-animation-delay, 0s) var(--tw-animation-iteration-count, 1)
190194
var(--tw-animation-direction, normal) var(--tw-animation-fill-mode, none);
@@ -315,6 +319,22 @@
315319
animation-play-state: --value("initial", [*]);
316320
}
317321

322+
@utility blur-in {
323+
--tw-enter-blur: 20px;
324+
}
325+
@utility blur-in-* {
326+
--tw-enter-blur: calc(--value(number) * 1px);
327+
--tw-enter-blur: --value(--blur-*, [*]);
328+
}
329+
330+
@utility blur-out {
331+
--tw-exit-blur: 20px;
332+
}
333+
@utility blur-out-* {
334+
--tw-exit-blur: calc(--value(number) * 1px);
335+
--tw-exit-blur: --value(--blur-*, [*]);
336+
}
337+
318338
@utility fade-in {
319339
--tw-enter-opacity: 0;
320340
}

0 commit comments

Comments
 (0)