ZenBrowserMirrors/zen-desktop
1
0
Fork 1
mirror of https://github.com/zen-browser/desktop.git synced 2025-07-10 22:45:31 +02:00
Code Releases Wiki Activity

Refactor tab animation logic to improve element selection and adjust animation durations for smoother transitions

Browse source
This commit is contained in:
mr. M 2025-01-23 18:50:39 +01:00
parent 1536f5805e
commit c89e953b6e
No known key found for this signature in database
GPG key ID: CBD57A2AEDBDA1FB
1 changed files with 13 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

21
src/browser/base/zen-components/ZenWorkspaces.mjs
View file

@ -1322,34 +1322,39 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
} }
async _animateTabs(direction, out = false) { async _animateTabs(direction, out = false) {
const selector = `#tabbrowser-tabs *:is(.tabbrowser-tab:not([zen-essential], [hidden]), #tabbrowser-arrowscrollbox-periphery, #zen-current-workspace-indicator)`; const selector = `#tabbrowser-tabs *:is(#zen-current-workspace-indicator, #vertical-pinned-tabs-container-separator, .tabbrowser-tab:not([zen-essential], [hidden]))`;
const extraSelector = `#tabbrowser-arrowscrollbox-periphery > toolbarbutton`;
this.tabContainer.removeAttribute('dont-animate-tabs'); this.tabContainer.removeAttribute('dont-animate-tabs');
// order by actual position in the children list to animate
const elements = Array.from([...this.tabContainer.querySelectorAll(selector), ...this.tabContainer.querySelectorAll(extraSelector)]).sort(
(a, b) => a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_FOLLOWING
).reverse();
if (out) { if (out) {
return gZenUIManager.motion.animate( return gZenUIManager.motion.animate(
selector, elements,
{ {
transform: `translateX(${direction === 'left' ? '-' : ''}100%)`, transform: `translateX(${direction === 'left' ? '-' : ''}100%)`,
opacity: 0, opacity: 0,
}, },
{ {
type: 'spring', type: 'spring',
duration: 0.2, bounce: 0,
bounce: 0.2, duration: 0.12,
// delay: gZenUIManager.motion.stagger(0.01), // delay: gZenUIManager.motion.stagger(0.01),
} }
); );
} }
return gZenUIManager.motion.animate( return gZenUIManager.motion.animate(
selector, elements,
{ {
transform: [`translateX(${direction === 'left' ? '-' : ''}100%)`, 'translateX(0%)'], transform: [`translateX(${direction === 'left' ? '-' : ''}100%)`, 'translateX(0%)'],
opacity: 1, opacity: 1,
}, },
{ {
duration: 0.2, duration: 0.15,
type: 'spring', type: 'spring',
bounce: 0.2, bounce: 0,
// delay: gZenUIManager.motion.stagger(0.01), // delay: gZenUIManager.motion.stagger(0.02),
} }
); );
} }