diff options
| author | Samuel Newman <mozzius@protonmail.com> | 2025-02-12 21:51:16 +0000 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2025-02-12 21:51:16 +0000 |
| commit | 1a3ecdf6ecb411f7bf0e1a360f0c57d3b3d65f48 (patch) | |
| tree | ed6e914bb059e0d9f63298b29844990dcbfadbcc /src/alf | |
| parent | 66f5e3a8330faf616e36db56e90c365637bae722 (diff) | |
| download | voidsky-1a3ecdf6ecb411f7bf0e1a360f0c57d3b3d65f48.tar.zst | |
Animate drawer menu on mobile web (#7711)
* slide in/out drawer * increase width slightly * exponential easing function
Diffstat (limited to 'src/alf')
| -rw-r--r-- | src/alf/atoms.ts | 11 |
1 files changed, 9 insertions, 2 deletions
diff --git a/src/alf/atoms.ts b/src/alf/atoms.ts index 6982de75f..ae89fa2cf 100644 --- a/src/alf/atoms.ts +++ b/src/alf/atoms.ts @@ -68,7 +68,6 @@ export const atoms = { * Used for the outermost components on screens, to ensure that they can fill * the screen and extend beyond. */ - // @ts-ignore - web only minHeight string util_screen_outer: [ web({ minHeight: '100vh', @@ -76,7 +75,7 @@ export const atoms = { native({ height: '100%', }), - ] as ViewStyle, + ] as StyleProp<ViewStyle>, /* * Theme-independent bg colors @@ -980,6 +979,14 @@ export const atoms = { zoom_out: web({ animation: 'zoomOut ease-out 0.1s', }), + slide_in_left: web({ + // exponential easing function + animation: 'slideInLeft cubic-bezier(0.16, 1, 0.3, 1) 0.5s', + }), + slide_out_left: web({ + animation: 'slideOutLeft ease-in 0.15s', + animationFillMode: 'forwards', + }), // special composite animation for dialogs zoom_fade_in: web({ animation: 'zoomIn ease-out 0.1s, fadeIn ease-out 0.1s', |