1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
|
import { followValue } from "motion"
import type { MotionValue } from "motion"
export { animate, springValue } from "motion"
export type { AnimationPlaybackControls } from "motion"
/**
* Like `springValue` but preserves getters on the config object.
* `springValue` spreads config at creation, snapshotting getter values.
* This passes the config through to `followValue` intact, so getters
* on `visualDuration` etc. fire on every `.set()` call.
*/
export function tunableSpringValue<T extends string | number>(initial: T, config: SpringConfig): MotionValue<T> {
return followValue(initial, config as any)
}
let _growDuration = 0.5
let _collapsibleDuration = 0.3
export const GROW_SPRING = {
type: "spring" as const,
get visualDuration() {
return _growDuration
},
bounce: 0,
}
export const COLLAPSIBLE_SPRING = {
type: "spring" as const,
get visualDuration() {
return _collapsibleDuration
},
bounce: 0,
}
export const setGrowDuration = (v: number) => {
_growDuration = v
}
export const setCollapsibleDuration = (v: number) => {
_collapsibleDuration = v
}
export const getGrowDuration = () => _growDuration
export const getCollapsibleDuration = () => _collapsibleDuration
export type SpringConfig = { type: "spring"; visualDuration: number; bounce: number }
export const FAST_SPRING = {
type: "spring" as const,
visualDuration: 0.35,
bounce: 0,
}
export const GLOW_SPRING = {
type: "spring" as const,
visualDuration: 0.4,
bounce: 0.15,
}
export const WIPE_MASK =
"linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 45%, rgba(0,0,0,0) 60%, rgba(0,0,0,0) 100%)"
export const clearMaskStyles = (el: HTMLElement) => {
el.style.maskImage = ""
el.style.webkitMaskImage = ""
el.style.maskSize = ""
el.style.webkitMaskSize = ""
el.style.maskRepeat = ""
el.style.webkitMaskRepeat = ""
el.style.maskPosition = ""
el.style.webkitMaskPosition = ""
}
export const clearFadeStyles = (el: HTMLElement) => {
el.style.opacity = ""
el.style.filter = ""
el.style.transform = ""
}
|
