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

chore: Rewrite motion to animejs, b=no-bug, c=common, compact-mode, glance, media, split-view, vendor, welcome, workspaces

Browse source
This commit is contained in:
Mr. M 2025-06-24 18:43:12 +02:00
parent 12ae2daeba
commit fdeeb972f7
No known key found for this signature in database
GPG key ID: 6292C4C8F8652B18
17 changed files with 117 additions and 73 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/browser/base/content/zen-assets.jar.inc.mn
View file

@ -92,7 +92,7 @@
# JS Vendor # JS Vendor
content/browser/zen-vendor/tsparticles.confetti.bundle.min.js (../../zen/vendor/tsparticles.confetti.bundle.min.js) content/browser/zen-vendor/tsparticles.confetti.bundle.min.js (../../zen/vendor/tsparticles.confetti.bundle.min.js)
content/browser/zen-vendor/motion.min.mjs (../../zen/vendor/motion.min.mjs) content/browser/zen-vendor/animejs.min.mjs (../../zen/vendor/animejs.min.mjs)
# FavIcons for startup # FavIcons for startup
content/browser/zen-images/favicons/calendar.ico (../../zen/images/favicons/calendar.ico) content/browser/zen-images/favicons/calendar.ico (../../zen/images/favicons/calendar.ico)

4
src/zen/common/ZenCustomizableUI.sys.mjs
View file

@ -117,7 +117,7 @@ export var ZenCustomizableUI = new (class {
window.setTimeout(() => { window.setTimeout(() => {
button.removeAttribute('open'); button.removeAttribute('open');
}, 500); }, 500);
window.gZenUIManager.motion.animate( window.gZenUIManager.anime.animate(
image, image,
{ transform: ['rotate(45deg)', 'rotate(0deg)'] }, { transform: ['rotate(45deg)', 'rotate(0deg)'] },
{ duration: 0.2 } { duration: 0.2 }
@ -125,7 +125,7 @@ export var ZenCustomizableUI = new (class {
}; };
popup.addEventListener('popuphidden', handlePopupHidden, { once: true }); popup.addEventListener('popuphidden', handlePopupHidden, { once: true });
popup.openPopup(button, 'after_start'); popup.openPopup(button, 'after_start');
window.gZenUIManager.motion.animate( window.gZenUIManager.anime.animate(
image, image,
{ transform: ['rotate(0deg)', 'rotate(45deg)'] }, { transform: ['rotate(0deg)', 'rotate(45deg)'] },
{ duration: 0.2 } { duration: 0.2 }

3
src/zen/common/ZenStartup.mjs
View file

@ -107,7 +107,7 @@
document.documentElement.removeAttribute('zen-before-loaded'); document.documentElement.removeAttribute('zen-before-loaded');
if (Services.prefs.getBoolPref('zen.watermark.enabled', false)) { if (Services.prefs.getBoolPref('zen.watermark.enabled', false)) {
let elementsToIgnore = this._watermarkIgnoreElements.map((id) => '#' + id).join(', '); let elementsToIgnore = this._watermarkIgnoreElements.map((id) => '#' + id).join(', ');
gZenUIManager.motion gZenUIManager.anime
.animate( .animate(
'#browser > *:not(' + elementsToIgnore + '), #urlbar, #tabbrowser-tabbox > *', '#browser > *:not(' + elementsToIgnore + '), #urlbar, #tabbrowser-tabbox > *',
{ {
@ -115,7 +115,6 @@
}, },
{ {
delay: 0.6, delay: 0.6,
easing: 'ease-in-out',
} }
) )
.then(() => { .then(() => {

63
src/zen/common/ZenUIManager.mjs
View file

@ -36,10 +36,51 @@ var gZenUIManager = {
document.addEventListener('mousedown', this.handleMouseDown.bind(this), true); document.addEventListener('mousedown', this.handleMouseDown.bind(this), true);
ChromeUtils.defineLazyGetter(this, 'motion', () => { ChromeUtils.defineLazyGetter(this, 'anime', () => {
return ChromeUtils.importESModule('chrome://browser/content/zen-vendor/motion.min.mjs', { // Polyphill in case we need to change library animations again
global: 'current', const module = ChromeUtils.importESModule(
}); 'chrome://browser/content/zen-vendor/animejs.min.mjs',
{
global: 'current',
}
);
return {
animate: (element, keyframes, options) => {
if (options.duration) {
options.duration *= 1000; // convert seconds to milliseconds
}
if (options.delay) {
options.delay *= 1000; // convert seconds to milliseconds
}
delete options.bounce; // anime.js does not support bounce
delete options.type; // anime.js does not support type
return module.animate(element, {
...keyframes,
...options,
});
},
waapi: (element, keyframes, options) => {
if (options.duration) {
options.duration *= 1000; // convert seconds to milliseconds
}
if (options.delay) {
options.delay *= 1000; // convert seconds to milliseconds
}
return module.waapi.animate(element, {
...keyframes,
...options,
});
},
stagger: (delay, {
startDelay = 0,
} = {}) => {
delay *= 1000; // convert seconds to milliseconds
startDelay *= 1000; // convert seconds to milliseconds
return module.stagger(delay,{
start: startDelay,
});
},
};
}); });
ChromeUtils.defineLazyGetter(this, '_toastContainer', () => { ChromeUtils.defineLazyGetter(this, '_toastContainer', () => {
@ -479,7 +520,7 @@ var gZenUIManager = {
this._toastContainer.removeAttribute('hidden'); this._toastContainer.removeAttribute('hidden');
this._toastContainer.appendChild(toast); this._toastContainer.appendChild(toast);
const timeoutFunction = () => { const timeoutFunction = () => {
this.motion this.anime
.animate(toast, { opacity: [1, 0], scale: [1, 0.5] }, { duration: 0.2, bounce: 0 }) .animate(toast, { opacity: [1, 0], scale: [1, 0.5] }, { duration: 0.2, bounce: 0 })
.then(() => { .then(() => {
toast.remove(); toast.remove();
@ -489,7 +530,7 @@ var gZenUIManager = {
}); });
}; };
if (reused) { if (reused) {
await this.motion.animate(toast, { scale: 0.2 }, { duration: 0.1, bounce: 0 }); await this.anime.animate(toast, { scale: 0.2 }, { duration: 0.1, bounce: 0 });
} else { } else {
toast.addEventListener('mouseover', () => { toast.addEventListener('mouseover', () => {
if (this._toastTimeouts[messageId]) { if (this._toastTimeouts[messageId]) {
@ -506,7 +547,7 @@ var gZenUIManager = {
if (!toast.style.hasOwnProperty('transform')) { if (!toast.style.hasOwnProperty('transform')) {
toast.style.transform = 'scale(0)'; toast.style.transform = 'scale(0)';
} }
await this.motion.animate(toast, { scale: 1 }, { type: 'spring', bounce: 0.2, duration: 0.5 }); await this.anime.animate(toast, { scale: 1 }, { type: 'spring', bounce: 0.2, duration: 0.5 });
if (this._toastTimeouts[messageId]) { if (this._toastTimeouts[messageId]) {
clearTimeout(this._toastTimeouts[messageId]); clearTimeout(this._toastTimeouts[messageId]);
} }
@ -601,7 +642,7 @@ var gZenVerticalTabsManager = {
}, },
animateTab(aTab) { animateTab(aTab) {
if (!gZenUIManager.motion || !aTab || !gZenUIManager._hasLoadedDOM || !aTab.isConnected) { if (!gZenUIManager.anime || !aTab || !gZenUIManager._hasLoadedDOM || !aTab.isConnected) {
return; return;
} }
// get next visible tab // get next visible tab
@ -613,7 +654,7 @@ var gZenVerticalTabsManager = {
try { try {
const tabSize = aTab.getBoundingClientRect().height; const tabSize = aTab.getBoundingClientRect().height;
const transform = `-${tabSize}px`; const transform = `-${tabSize}px`;
gZenUIManager.motion gZenUIManager.anime
.animate( .animate(
aTab, aTab,
{ {
@ -635,7 +676,7 @@ var gZenVerticalTabsManager = {
aTab.style.removeProperty('transform'); aTab.style.removeProperty('transform');
aTab.style.removeProperty('opacity'); aTab.style.removeProperty('opacity');
}); });
gZenUIManager.motion gZenUIManager.anime
.animate( .animate(
aTab.querySelector('.tab-content'), aTab.querySelector('.tab-content'),
{ {
@ -1060,7 +1101,7 @@ var gZenVerticalTabsManager = {
} }
// Maybe add some confetti here?!? // Maybe add some confetti here?!?
gZenUIManager.motion.animate( gZenUIManager.anime.animate(
this._tabEdited, this._tabEdited,
{ {
scale: [1, 0.98, 1], scale: [1, 0.98, 1],

24
src/zen/compact-mode/ZenCompactMode.mjs
View file

@ -279,7 +279,7 @@ var gZenCompactModeManager = {
// TODO: Work on this a bit more, needs polishing // TODO: Work on this a bit more, needs polishing
if (lazyCompactMode.COMPACT_MODE_CAN_ANIMATE_SIDEBAR && false) { if (lazyCompactMode.COMPACT_MODE_CAN_ANIMATE_SIDEBAR && false) {
gZenUIManager.motion gZenUIManager.anime
.animate( .animate(
[ [
this.sidebar, this.sidebar,
@ -299,7 +299,7 @@ var gZenCompactModeManager = {
], ],
}, },
{ {
ease: 'easeIn', ease: 'in',
type: 'spring', type: 'spring',
bounce: 0, bounce: 0,
duration: 0.2, duration: 0.2,
@ -324,18 +324,16 @@ var gZenCompactModeManager = {
} else { } else {
sidebarWidth -= elementSeparation; sidebarWidth -= elementSeparation;
} }
gZenUIManager.motion gZenUIManager.anime
.animate( .waapi(
this.sidebar, this.sidebar,
{ {
marginRight: this.sidebarIsOnRight ? `-${sidebarWidth}px` : 0, marginRight: this.sidebarIsOnRight ? `-${sidebarWidth}px` : 0,
marginLeft: this.sidebarIsOnRight ? 0 : `-${sidebarWidth}px`, marginLeft: this.sidebarIsOnRight ? 0 : `-${sidebarWidth}px`,
}, },
{ {
ease: 'easeIn', ease: 'out',
type: 'spring', duration: 0.1,
bounce: 0,
duration: 0.2,
} }
) )
.then(() => { .then(() => {
@ -373,8 +371,8 @@ var gZenCompactModeManager = {
} else { } else {
this.sidebar.style.marginLeft = `-${sidebarWidth}px`; this.sidebar.style.marginLeft = `-${sidebarWidth}px`;
} }
gZenUIManager.motion gZenUIManager.anime
.animate( .waapi(
this.sidebar, this.sidebar,
this.sidebarIsOnRight this.sidebarIsOnRight
? { ? {
@ -383,10 +381,8 @@ var gZenCompactModeManager = {
} }
: { marginLeft: 0 }, : { marginLeft: 0 },
{ {
ease: 'easeOut', ease: 'in',
type: 'spring', duration: 0.1,
bounce: 0,
duration: 0.2,
} }
) )
.then(() => { .then(() => {

10
src/zen/downloads/ZenDownloadAnimation.mjs
View file

@ -221,7 +221,7 @@
this.#startBoxAnimation(areTabsPositionedRight); this.#startBoxAnimation(areTabsPositionedRight);
} }
await gZenUIManager.motion.animate(arcAnimationElement, sequence, { await gZenUIManager.anime.animate(arcAnimationElement, sequence, {
duration: Services.prefs.getIntPref('zen.downloads.download-animation-duration') / 1000, duration: Services.prefs.getIntPref('zen.downloads.download-animation-duration') / 1000,
easing: 'cubic-bezier(0.37, 0, 0.63, 1)', easing: 'cubic-bezier(0.37, 0, 0.63, 1)',
fill: 'forwards', fill: 'forwards',
@ -353,7 +353,7 @@
wrapper.appendChild(this.#boxAnimationElement); wrapper.appendChild(this.#boxAnimationElement);
await gZenUIManager.motion.animate( await gZenUIManager.anime.animate(
this.#boxAnimationElement, this.#boxAnimationElement,
{ {
[sideProp]: '34px', [sideProp]: '34px',
@ -366,7 +366,7 @@
} }
).finished; ).finished;
await gZenUIManager.motion.animate( await gZenUIManager.anime.animate(
this.#boxAnimationElement, this.#boxAnimationElement,
{ {
[sideProp]: '24px', [sideProp]: '24px',
@ -411,7 +411,7 @@
try { try {
const sideProp = areTabsPositionedRight ? 'right' : 'left'; const sideProp = areTabsPositionedRight ? 'right' : 'left';
await gZenUIManager.motion.animate( await gZenUIManager.anime.animate(
this.#boxAnimationElement, this.#boxAnimationElement,
{ {
transform: 'scale(0.9)', transform: 'scale(0.9)',
@ -422,7 +422,7 @@
} }
).finished; ).finished;
await gZenUIManager.motion.animate( await gZenUIManager.anime.animate(
this.#boxAnimationElement, this.#boxAnimationElement,
{ {
[sideProp]: '-50px', [sideProp]: '-50px',

14
src/zen/glance/ZenGlanceManager.mjs
View file

@ -131,10 +131,10 @@
const startX = isRightSide ? -50 : 50; const startX = isRightSide ? -50 : 50;
gZenUIManager.motion.animate( gZenUIManager.anime.animate(
this.sidebarButtons.querySelectorAll('toolbarbutton'), this.sidebarButtons.querySelectorAll('toolbarbutton'),
{ x: [startX, 0], opacity: [0, 1] }, { x: [startX, 0], opacity: [0, 1] },
{ delay: gZenUIManager.motion.stagger(0.1) } { delay: gZenUIManager.anime.stagger(0.1) }
); );
} }
this.sidebarButtons.removeAttribute('hidden'); this.sidebarButtons.removeAttribute('hidden');
@ -180,7 +180,7 @@
this.quickOpenGlance({ dontOpenButtons: true }); this.quickOpenGlance({ dontOpenButtons: true });
this.showSidebarButtons(true); this.showSidebarButtons(true);
gZenUIManager.motion.animate( gZenUIManager.anime.animate(
this.#currentParentTab.linkedBrowser.closest('.browserSidebarContainer'), this.#currentParentTab.linkedBrowser.closest('.browserSidebarContainer'),
{ {
scale: [1, 0.98], scale: [1, 0.98],
@ -211,7 +211,7 @@
}; };
this.browserWrapper.style.transform = 'translate(-50%, -50%)'; this.browserWrapper.style.transform = 'translate(-50%, -50%)';
this.overlay.style.overflow = 'visible'; this.overlay.style.overflow = 'visible';
gZenUIManager.motion gZenUIManager.anime
.animate( .animate(
this.browserWrapper, this.browserWrapper,
{ {
@ -311,7 +311,7 @@
this.overlay.style.pointerEvents = 'none'; this.overlay.style.pointerEvents = 'none';
this.quickCloseGlance({ justAnimateParent: true, clearID: false }); this.quickCloseGlance({ justAnimateParent: true, clearID: false });
const originalPosition = this.#glances.get(this.#currentGlanceID).originalPosition; const originalPosition = this.#glances.get(this.#currentGlanceID).originalPosition;
gZenUIManager.motion gZenUIManager.anime
.animate( .animate(
this.#currentParentTab.linkedBrowser.closest('.browserSidebarContainer'), this.#currentParentTab.linkedBrowser.closest('.browserSidebarContainer'),
{ {
@ -332,7 +332,7 @@
}); });
this.browserWrapper.style.opacity = 1; this.browserWrapper.style.opacity = 1;
return new Promise((resolve) => { return new Promise((resolve) => {
gZenUIManager.motion gZenUIManager.anime
.animate( .animate(
this.browserWrapper, this.browserWrapper,
{ {
@ -653,7 +653,7 @@
this.finishOpeningGlance(); this.finishOpeningGlance();
return; return;
} }
await gZenUIManager.motion.animate( await gZenUIManager.anime.animate(
this.browserWrapper, this.browserWrapper,
{ {
width: ['85%', '100%'], width: ['85%', '100%'],

4
src/zen/media/ZenMediaController.mjs
View file

@ -219,7 +219,7 @@
hideMediaControls() { hideMediaControls() {
if (this.mediaControlBar.hasAttribute('hidden')) return; if (this.mediaControlBar.hasAttribute('hidden')) return;
return gZenUIManager.motion return gZenUIManager.anime
.animate( .animate(
this.mediaControlBar, this.mediaControlBar,
{ {
@ -259,7 +259,7 @@
this.mediaControlBar.querySelector('toolbaritem').getBoundingClientRect().height + 'px'; this.mediaControlBar.querySelector('toolbaritem').getBoundingClientRect().height + 'px';
this.mediaControlBar.style.opacity = 0; this.mediaControlBar.style.opacity = 0;
gZenUIManager.updateTabsToolbar(); gZenUIManager.updateTabsToolbar();
gZenUIManager.motion.animate( gZenUIManager.anime.animate(
this.mediaControlBar, this.mediaControlBar,
{ {
opacity: [0, 1], opacity: [0, 1],

10
src/zen/split-view/ZenViewSplitter.mjs
View file

@ -322,7 +322,7 @@ class nsZenViewSplitter extends ZenDOMOperatedFeature {
draggedTab._visuallySelected = true; draggedTab._visuallySelected = true;
this.fakeBrowser.setAttribute('side', side); this.fakeBrowser.setAttribute('side', side);
this._finishAllAnimatingPromise = Promise.all([ this._finishAllAnimatingPromise = Promise.all([
gZenUIManager.motion.animate( gZenUIManager.anime.animate(
gBrowser.tabbox, gBrowser.tabbox,
side === 'left' side === 'left'
? { ? {
@ -338,7 +338,7 @@ class nsZenViewSplitter extends ZenDOMOperatedFeature {
easing: 'ease-out', easing: 'ease-out',
} }
), ),
gZenUIManager.motion.animate( gZenUIManager.anime.animate(
this.fakeBrowser, this.fakeBrowser,
{ {
width: [0, `${halfWidth - padding}px`], width: [0, `${halfWidth - padding}px`],
@ -401,7 +401,7 @@ class nsZenViewSplitter extends ZenDOMOperatedFeature {
this._draggingTab = null; this._draggingTab = null;
try { try {
Promise.all([ Promise.all([
gZenUIManager.motion.animate( gZenUIManager.anime.animate(
gBrowser.tabbox, gBrowser.tabbox,
side === 'left' side === 'left'
? { ? {
@ -415,7 +415,7 @@ class nsZenViewSplitter extends ZenDOMOperatedFeature {
easing: 'ease-out', easing: 'ease-out',
} }
), ),
gZenUIManager.motion.animate( gZenUIManager.anime.animate(
this.fakeBrowser, this.fakeBrowser,
{ {
width: [`${halfWidth - padding * 2}px`, 0], width: [`${halfWidth - padding * 2}px`, 0],
@ -1763,7 +1763,7 @@ class nsZenViewSplitter extends ZenDOMOperatedFeature {
} }
animateBrowserDrop(browserContainer, callback = () => {}) { animateBrowserDrop(browserContainer, callback = () => {}) {
gZenUIManager.motion gZenUIManager.anime
.animate( .animate(
browserContainer, browserContainer,
{ {

1
src/zen/vendor/animejs.dep vendored Normal file
View file

@ -0,0 +1 @@
https://cdn.jsdelivr.net/npm/animejs/+esm: v4.0.2

15
src/zen/vendor/animejs.min.mjs vendored Normal file
View file

File diff suppressed because one or more lines are too long

1
src/zen/vendor/motion.dep vendored
View file

@ -1 +0,0 @@
https://cdn.jsdelivr.net/npm/motion@latest/+esm: v12.16.0

7
src/zen/vendor/motion.min.mjs vendored
View file

File diff suppressed because one or more lines are too long

2
src/zen/welcome/ZenWelcome.mjs
View file

@ -18,7 +18,7 @@
} }
function getMotion() { function getMotion() {
return gZenUIManager.motion; return gZenUIManager.anime;
} }
async function animate(...args) { async function animate(...args) {

8
src/zen/workspaces/ZenGradientGenerator.mjs
View file

@ -772,7 +772,7 @@
); );
if (!this.dragging) { if (!this.dragging) {
gZenUIManager.motion.animate( gZenUIManager.anime.animate(
existingDot.element, existingDot.element,
{ {
left: `${dotPosition.position.x}px`, left: `${dotPosition.position.x}px`,
@ -889,7 +889,7 @@
this.handleColorPositions(colorPositions); this.handleColorPositions(colorPositions);
this.updateCurrentWorkspace(true); this.updateCurrentWorkspace(true);
gZenUIManager.motion.animate( gZenUIManager.anime.animate(
existingPrimaryDot.element, existingPrimaryDot.element,
{ {
left: `${existingPrimaryDot.position.x}px`, left: `${existingPrimaryDot.position.x}px`,
@ -1129,7 +1129,7 @@
`linear-gradient(to top, ${color3} -30%, transparent 60%)`, `linear-gradient(to top, ${color3} -30%, transparent 60%)`,
].join(', '); ].join(', ');
} }
return [`linear-gradient(${rotation}deg, ${color1} -30%, ${color3} 100%)`].join(', '); return [`linear-gradient(120deg, ${color1} -30%, ${color3} 100%)`].join(', ');
} else { } else {
// Just return a linear gradient with all colors // Just return a linear gradient with all colors
const gradientColors = themedColors.map((color) => const gradientColors = themedColors.map((color) =>
@ -1508,7 +1508,7 @@
// Set `--toolbox-textcolor` to have a contrast with the primary color // Set `--toolbox-textcolor` to have a contrast with the primary color
const blendTarget = isDarkMode ? [255, 255, 255] : [0, 0, 0]; const blendTarget = isDarkMode ? [255, 255, 255] : [0, 0, 0];
const blendedColor = this.blendColors(dominantColor, blendTarget, 15); // 15% dominantColor, 85% target const blendedColor = this.blendColors(dominantColor, blendTarget, 15); // 15% dominantColor, 85% target
await gZenUIManager.motion.animate( await gZenUIManager.anime.animate(
browser.document.documentElement, browser.document.documentElement,
{ {
'--toolbox-textcolor': blendedColor, '--toolbox-textcolor': blendedColor,

12
src/zen/workspaces/ZenWorkspaceCreation.mjs
View file

@ -152,7 +152,7 @@
document.getElementById('zen-sidebar-splitter').style.pointerEvents = 'none'; document.getElementById('zen-sidebar-splitter').style.pointerEvents = 'none';
gZenUIManager.motion gZenUIManager.anime
.animate( .animate(
[gBrowser.tabContainer, gURLBar.textbox], [gBrowser.tabContainer, gURLBar.textbox],
{ {
@ -172,7 +172,7 @@
this.style.visibility = 'visible'; this.style.visibility = 'visible';
gZenCompactModeManager.getAndApplySidebarWidth(); gZenCompactModeManager.getAndApplySidebarWidth();
this.resolveInitialized(); this.resolveInitialized();
gZenUIManager.motion gZenUIManager.anime
.animate( .animate(
this.elementsToAnimate, this.elementsToAnimate,
{ {
@ -184,7 +184,7 @@
duration: 0.6, duration: 0.6,
type: 'spring', type: 'spring',
bounce: 0, bounce: 0,
delay: gZenUIManager.motion.stagger(0.05, { startDelay: 0.2 }), delay: gZenUIManager.anime.stagger(0.05, { startDelay: 0.2 }),
} }
) )
.then(() => { .then(() => {
@ -265,7 +265,7 @@
} }
async #cleanup() { async #cleanup() {
await gZenUIManager.motion.animate( await gZenUIManager.anime.animate(
this.elementsToAnimate.reverse(), this.elementsToAnimate.reverse(),
{ {
y: [0, 20], y: [0, 20],
@ -276,7 +276,7 @@
duration: 0.4, duration: 0.4,
type: 'spring', type: 'spring',
bounce: 0, bounce: 0,
delay: gZenUIManager.motion.stagger(0.05), delay: gZenUIManager.anime.stagger(0.05),
} }
); );
@ -311,7 +311,7 @@
await gZenWorkspaces._organizeWorkspaceStripLocations(workspace, true); await gZenWorkspaces._organizeWorkspaceStripLocations(workspace, true);
await gZenWorkspaces.updateTabsContainers(); await gZenWorkspaces.updateTabsContainers();
await gZenUIManager.motion.animate( await gZenUIManager.anime.animate(
[gBrowser.tabContainer, gURLBar.textbox], [gBrowser.tabContainer, gURLBar.textbox],
{ {
opacity: [0, 1], opacity: [0, 1],

10
src/zen/workspaces/ZenWorkspaces.mjs
View file

@ -1593,8 +1593,8 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
) { ) {
delete this._alwaysAnimatePaddingTop; delete this._alwaysAnimatePaddingTop;
const essentialsHeight = essentialContainer.getBoundingClientRect().height; const essentialsHeight = essentialContainer.getBoundingClientRect().height;
if (!forAnimation && animateContainer && gZenUIManager.motion) { if (!forAnimation && animateContainer && gZenUIManager.anime) {
gZenUIManager.motion.animate( gZenUIManager.anime.animate(
workspaceElement, workspaceElement,
{ {
paddingTop: [workspaceElement.style.paddingTop, essentialsHeight + 'px'], paddingTop: [workspaceElement.style.paddingTop, essentialsHeight + 'px'],
@ -1743,7 +1743,7 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
await new Promise((resolve) => { await new Promise((resolve) => {
requestAnimationFrame(() => { requestAnimationFrame(() => {
animations.push( animations.push(
gZenUIManager.motion.animate( gZenUIManager.anime.animate(
document.documentElement, document.documentElement,
{ {
'--zen-background-opacity': [previousBackgroundOpacity, 1], '--zen-background-opacity': [previousBackgroundOpacity, 1],
@ -1773,7 +1773,7 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
if (shouldAnimate) { if (shouldAnimate) {
const existingPaddingTop = element.style.paddingTop; const existingPaddingTop = element.style.paddingTop;
animations.push( animations.push(
gZenUIManager.motion.animate( gZenUIManager.anime.animate(
element, element,
{ {
transform: existingTransform ? [existingTransform, newTransform] : newTransform, transform: existingTransform ? [existingTransform, newTransform] : newTransform,
@ -1912,7 +1912,7 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
if (shouldAnimate) { if (shouldAnimate) {
container.style.transform = existingTransform; container.style.transform = existingTransform;
animations.push( animations.push(
gZenUIManager.motion.animate( gZenUIManager.anime.animate(
container, container,
{ {
transform: [ transform: [