Skip to content

perf(stackflow): replace CSS animation with WAAPI for AppScreen transitions #1444

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
junghyeonsu wants to merge 22 commits into
base: dev
Choose a base branch
from
Open

perf(stackflow): replace CSS animation with WAAPI for AppScreen transitions #1444

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
0217ba3
perf(stackflow): replace CSS animation system with WAAPI for all AppS…
junghyeonsu Apr 9, 2026
e61a565
refactor(stackflow): simplify transition-animation.ts structure
junghyeonsu Apr 9, 2026
ed6b982
fix(stackflow): make idle/exit positions transition-style-aware
junghyeonsu Apr 9, 2026
8778bef
refactor(stackflow): split transition-animation into dom.ts + animati…
junghyeonsu Apr 9, 2026
0dd11b1
fix(stackflow): add push flash prevention for Android and fadeIn tran…
junghyeonsu Apr 9, 2026
d6e8c42
fix(stackflow): read transitionStyle from DOM instead of stale React …
junghyeonsu Apr 9, 2026
c811ee8
fix(stackflow): hide behind appBar after Android/fadeIn push
junghyeonsu Apr 9, 2026
bbf941b
refactor(stackflow): clearAllStyles as foundation for position manage…
junghyeonsu Apr 9, 2026
1e8c14b
fix(stackflow): restore behind appBar before Android/fadeIn pop starts
junghyeonsu Apr 9, 2026
28732ed
docs: add changeset for AppScreen WAAPI transition migration
junghyeonsu Apr 9, 2026
9718a76
fix(stackflow): cancel pending push rAF on swipe start
junghyeonsu Apr 9, 2026
f93209b
refactor(stackflow): extract GlobalInteraction constants to constants.ts
junghyeonsu Apr 20, 2026
c0e6dbd
refactor(stackflow): introduce anatomy modules for data-part
junghyeonsu Apr 20, 2026
073f349
refactor(stackflow): use anatomy constants for WAAPI DOM queries
junghyeonsu Apr 20, 2026
71bc12a
chore(qvism-preset): remove unused stackflow animation/pseudo files
junghyeonsu Apr 20, 2026
ca9591e
Merge remote-tracking branch 'origin/dev' into feature/des-1079-waapi
junghyeonsu Apr 20, 2026
89c397c
chore: regenerate css artifacts after dev merge
junghyeonsu Apr 20, 2026
f1c74c9
fix(stackflow): scrub app-bar background via WAAPI during swipe back
junghyeonsu Apr 21, 2026
be24ed0
fix(stackflow): scope WAAPI swipe tracking to slideFromRightIOS
junghyeonsu Apr 21, 2026
c543d0d
refactor(stackflow): move AppBar background from ::before to real DOM…
junghyeonsu Apr 23, 2026
3f22974
fix(stackflow): harden WAAPI push/pop lifecycle
junghyeonsu Apr 23, 2026
4d50dd9
chore(changeset): document WAAPI stabilization fixes
junghyeonsu Apr 23, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
808 changes: 128 additions & 680 deletions packages/css/all.css
View file
Open in desktop

Large diffs are not rendered by default.

808 changes: 128 additions & 680 deletions packages/css/all.layered.css
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion packages/css/all.layered.min.css
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion packages/css/all.min.css
View file
Open in desktop

Large diffs are not rendered by default.

103 changes: 0 additions & 103 deletions packages/css/recipes/app-bar-main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,109 +48,6 @@
min-width: 0;
height: 100%
}
[data-global-transition-state=enter-active] .seed-app-bar-main__root--transitionStyle_slideFromRightIOS[data-activity-is-top] {
animation: seed-enter;
animation-timing-function: cubic-bezier(0.2, 0.1, 0.21, 0.99);
animation-duration: 350ms;
--seed-enter-translate-x: 25%;
--seed-enter-translate-y: 0;
--seed-enter-opacity: 0;
--seed-enter-scale: 1;
transform: translate3d(0, 0, 0);
opacity: 1
}
[data-global-transition-state=exit-active] .seed-app-bar-main__root--transitionStyle_slideFromRightIOS[data-activity-is-top] {
transform: translate3d(calc(var(--swipe-back-displacement, 0) * 0.15), 0, 0);
opacity: calc(1 - var(--swipe-back-displacement-ratio, 0) * 3);
animation: seed-exit;
animation-timing-function: cubic-bezier(0.2, 0.1, 0.21, 0.99);
animation-duration: 350ms;
animation-fill-mode: forwards;
--seed-exit-translate-x: 25%;
--seed-exit-translate-y: 0;
--seed-exit-opacity: 0;
--seed-exit-scale: 1
}
[data-global-transition-state=enter-done] .seed-app-bar-main__root--transitionStyle_slideFromRightIOS[data-activity-is-top] {
animation: seed-enter;
animation-timing-function: cubic-bezier(0.2, 0.1, 0.21, 0.99);
animation-duration: 350ms;
--seed-enter-translate-x: calc(var(--swipe-back-displacement, 0) * 0.15);
--seed-enter-translate-y: 0;
--seed-enter-opacity: calc(1 - var(--swipe-back-displacement-ratio, 0) * 3);
--seed-enter-scale: 1;
transform: translate3d(0, 0, 0);
opacity: 1
}
[data-swipe-back-state=swiping] .seed-app-bar-main__root--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#) {
animation: none;
transform: translate3d(calc(var(--swipe-back-displacement, 0) * 0.15), 0, 0);
opacity: calc(1 - var(--swipe-back-displacement-ratio, 0) * 3)
}
[data-swipe-back-state=canceling] .seed-app-bar-main__root--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#) {
animation: none !important;
transform: translate3d(0, 0, 0);
opacity: 1;
transition: transform 350ms cubic-bezier(0.2, 0.1, 0.21, 0.99), opacity 350ms cubic-bezier(0.2, 0.1, 0.21, 0.99)
}
[data-swipe-back-state=completing] .seed-app-bar-main__root--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#) {
animation: none !important;
transform: translate3d(25%, 0, 0);
opacity: 0;
transition: transform 350ms cubic-bezier(0.2, 0.1, 0.21, 0.99), opacity 350ms cubic-bezier(0.2, 0.1, 0.21, 0.99)
}
[data-global-transition-state=enter-active][data-top-activity-type="full-screen"] .seed-app-bar-main__root--transitionStyle_slideFromRightIOS:not([data-activity-is-top]) {
transform: translate3d(0, 0, 0);
opacity: 1;
animation: seed-exit;
animation-timing-function: cubic-bezier(0.2, 0.1, 0.21, 0.99);
animation-duration: 350ms;
animation-fill-mode: forwards;
--seed-exit-translate-x: -25%;
--seed-exit-translate-y: 0;
--seed-exit-opacity: 0;
--seed-exit-scale: 1
}
[data-global-transition-state=exit-active][data-top-activity-type="full-screen"] .seed-app-bar-main__root--transitionStyle_slideFromRightIOS:not([data-activity-is-top]) {
animation: seed-enter;
animation-timing-function: cubic-bezier(0.2, 0.1, 0.21, 0.99);
animation-duration: 350ms;
--seed-enter-translate-x: calc(-25% + var(--swipe-back-displacement, 0) * 0.15);
--seed-enter-translate-y: 0;
--seed-enter-opacity: calc(var(--swipe-back-displacement-ratio, 0));
--seed-enter-scale: 1;
transform: translate3d(0, 0, 0);
opacity: 1
}
[data-global-transition-state=enter-done][data-top-activity-type="full-screen"] .seed-app-bar-main__root--transitionStyle_slideFromRightIOS:not([data-activity-is-top]) {
transform: translate3d(calc(-25% + var(--swipe-back-displacement, 0) * 0.15), 0, 0);
opacity: calc(var(--swipe-back-displacement-ratio, 0));
animation: seed-exit;
animation-timing-function: cubic-bezier(0.2, 0.1, 0.21, 0.99);
animation-duration: 350ms;
animation-fill-mode: forwards;
--seed-exit-translate-x: -25%;
--seed-exit-translate-y: 0;
--seed-exit-opacity: 0;
--seed-exit-scale: 1
}
[data-swipe-back-state=swiping] .seed-app-bar-main__root--transitionStyle_slideFromRightIOS:not([data-activity-is-top]):not(#\#) {
animation: none;
transform: translate3d(calc(-25% + var(--swipe-back-displacement, 0) * 0.15), 0, 0);
opacity: calc(var(--swipe-back-displacement-ratio, 0))
}
[data-swipe-back-state=canceling] .seed-app-bar-main__root--transitionStyle_slideFromRightIOS:not([data-activity-is-top]):not(#\#) {
animation: none !important;
transform: translate3d(-25%, 0, 0);
opacity: 0;
transition: transform 350ms cubic-bezier(0.2, 0.1, 0.21, 0.99), opacity 350ms cubic-bezier(0.2, 0.1, 0.21, 0.99)
}
[data-swipe-back-state=completing] .seed-app-bar-main__root--transitionStyle_slideFromRightIOS:not([data-activity-is-top]):not(#\#) {
animation: none !important;
transform: translate3d(0, 0, 0);
opacity: 1;
transition: transform 350ms cubic-bezier(0.2, 0.1, 0.21, 0.99), opacity 350ms cubic-bezier(0.2, 0.1, 0.21, 0.99)
}
.seed-app-bar-main__root--tone_layer {
color: var(--seed-color-fg-neutral)
}
Expand Down
100 changes: 0 additions & 100 deletions packages/css/recipes/app-bar-main.layered.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,106 +51,6 @@
display: flex;
}

[data-global-transition-state="enter-active"] .seed-app-bar-main__root--transitionStyle_slideFromRightIOS[data-activity-is-top] {
--seed-enter-translate-x: 25%;
--seed-enter-translate-y: 0;
--seed-enter-opacity: 0;
--seed-enter-scale: 1;
opacity: 1;
animation: .35s cubic-bezier(.2, .1, .21, .99) seed-enter;
transform: translate3d(0, 0, 0);
}

[data-global-transition-state="exit-active"] .seed-app-bar-main__root--transitionStyle_slideFromRightIOS[data-activity-is-top] {
transform: translate3d(calc(var(--swipe-back-displacement, 0) * .15), 0, 0);
opacity: calc(1 - var(--swipe-back-displacement-ratio, 0) * 3);
--seed-exit-translate-x: 25%;
--seed-exit-translate-y: 0;
--seed-exit-opacity: 0;
--seed-exit-scale: 1;
animation: .35s cubic-bezier(.2, .1, .21, .99) forwards seed-exit;
}

[data-global-transition-state="enter-done"] .seed-app-bar-main__root--transitionStyle_slideFromRightIOS[data-activity-is-top] {
--seed-enter-translate-x: calc(var(--swipe-back-displacement, 0) * .15);
--seed-enter-translate-y: 0;
--seed-enter-opacity: calc(1 - var(--swipe-back-displacement-ratio, 0) * 3);
--seed-enter-scale: 1;
opacity: 1;
animation: .35s cubic-bezier(.2, .1, .21, .99) seed-enter;
transform: translate3d(0, 0, 0);
}

[data-swipe-back-state="swiping"] .seed-app-bar-main__root--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#) {
transform: translate3d(calc(var(--swipe-back-displacement, 0) * .15), 0, 0);
opacity: calc(1 - var(--swipe-back-displacement-ratio, 0) * 3);
animation: none;
}

[data-swipe-back-state="canceling"] .seed-app-bar-main__root--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#) {
opacity: 1;
transition: transform .35s cubic-bezier(.2, .1, .21, .99), opacity .35s cubic-bezier(.2, .1, .21, .99);
transform: translate3d(0, 0, 0);
animation: none !important;
}

[data-swipe-back-state="completing"] .seed-app-bar-main__root--transitionStyle_slideFromRightIOS[data-activity-is-top]:not(#\#) {
opacity: 0;
transition: transform .35s cubic-bezier(.2, .1, .21, .99), opacity .35s cubic-bezier(.2, .1, .21, .99);
transform: translate3d(25%, 0, 0);
animation: none !important;
}

[data-global-transition-state="enter-active"][data-top-activity-type="full-screen"] .seed-app-bar-main__root--transitionStyle_slideFromRightIOS:not([data-activity-is-top]) {
opacity: 1;
--seed-exit-translate-x: -25%;
--seed-exit-translate-y: 0;
--seed-exit-opacity: 0;
--seed-exit-scale: 1;
animation: .35s cubic-bezier(.2, .1, .21, .99) forwards seed-exit;
transform: translate3d(0, 0, 0);
}

[data-global-transition-state="exit-active"][data-top-activity-type="full-screen"] .seed-app-bar-main__root--transitionStyle_slideFromRightIOS:not([data-activity-is-top]) {
--seed-enter-translate-x: calc(-25% + var(--swipe-back-displacement, 0) * .15);
--seed-enter-translate-y: 0;
--seed-enter-opacity: calc(var(--swipe-back-displacement-ratio, 0));
--seed-enter-scale: 1;
opacity: 1;
animation: .35s cubic-bezier(.2, .1, .21, .99) seed-enter;
transform: translate3d(0, 0, 0);
}

[data-global-transition-state="enter-done"][data-top-activity-type="full-screen"] .seed-app-bar-main__root--transitionStyle_slideFromRightIOS:not([data-activity-is-top]) {
transform: translate3d(calc(-25% + var(--swipe-back-displacement, 0) * .15), 0, 0);
opacity: calc(var(--swipe-back-displacement-ratio, 0));
--seed-exit-translate-x: -25%;
--seed-exit-translate-y: 0;
--seed-exit-opacity: 0;
--seed-exit-scale: 1;
animation: .35s cubic-bezier(.2, .1, .21, .99) forwards seed-exit;
}

[data-swipe-back-state="swiping"] .seed-app-bar-main__root--transitionStyle_slideFromRightIOS:not([data-activity-is-top]):not(#\#) {
transform: translate3d(calc(-25% + var(--swipe-back-displacement, 0) * .15), 0, 0);
opacity: calc(var(--swipe-back-displacement-ratio, 0));
animation: none;
}

[data-swipe-back-state="canceling"] .seed-app-bar-main__root--transitionStyle_slideFromRightIOS:not([data-activity-is-top]):not(#\#) {
opacity: 0;
transition: transform .35s cubic-bezier(.2, .1, .21, .99), opacity .35s cubic-bezier(.2, .1, .21, .99);
transform: translate3d(-25%, 0, 0);
animation: none !important;
}

[data-swipe-back-state="completing"] .seed-app-bar-main__root--transitionStyle_slideFromRightIOS:not([data-activity-is-top]):not(#\#) {
opacity: 1;
transition: transform .35s cubic-bezier(.2, .1, .21, .99), opacity .35s cubic-bezier(.2, .1, .21, .99);
transform: translate3d(0, 0, 0);
animation: none !important;
}

.seed-app-bar-main__root--tone_layer, .seed-app-bar-main__title--tone_layer {
color: var(--seed-color-fg-neutral);
}
Expand Down
Loading
Loading