Animate drawer menu on mobile web #7711
Conversation
|
| dark: 'rgba(1, 82, 168, 0.1)', | ||
| dim: 'rgba(10, 13, 16, 0.8)', | ||
| }) | ||
| : 'transparent', |
There was a problem hiding this comment.
I'm seeing the fade out, but not fade in. Maybe it doesn't like the transition from transparent to a defined color? Not sure tbh, css transitions are finicky with newly rendered content iirc
There was a problem hiding this comment.
haha I was hoping you wouldn't spot it - yeah, it's a transition rather than an animation, so the nothing -> color doesn't animate. Fixing this would require messing with the HTML structure which I was hoping to avoid
There was a problem hiding this comment.
Hehe. Does it not work going from rgba(0,0,0,0) to the rgba values defined for the open state?
There was a problem hiding this comment.
I guess we'd need to render it once with that value, then on next tick change it again. totally doable but very messy!
There was a problem hiding this comment.
Ok yeah that's what I was afraid of. LGTM, still net positive 👍
mozzius
force-pushed
the
samuel/animate-drawer
branch
from
f722a64 to
92efa05
Compare
arcalinea
temporarily deployed
to
samuel/animate-drawer - social-app PR #7711
Render
Destroyed
* origin/main: (39 commits) Revert "fix quote & feed padding not being pressable (#7694)" (#7733) Nightly source-language update Add dev mode for easy copying of at:// URIs and DIDs (#7723) Improved search language select (#7591) Improved search page (#7590) Animate drawer menu on mobile web (#7711) Special treatment for recommended starter packs (#7706) invert new postonboarding gate (#7695) Animate dropdown menus (#7704) Better animations for dialogs, animate web composer (#7703) fix quote & feed padding not being pressable (#7694) ungate trending (#7696) run prettier (#7727) Nightly source-language update Add deploy key to nightly commit (#7722) [APP-1031] Add new followerRule to threadgate settings (#7681) Fix bug in GH action nightly-update-source-languages.yaml More i18n process updates (#7720) Run intl:extract on english to see if crowdin picks up on the changes Refine accessibilityHint (#7554) ...
Based on #7704
Animates both ways. Animating in uses an exponential easing function
Screen.Recording.2025-02-10.at.16.05.52.mov