mirrors/desktop
1
0
Fork 0
mirror of https://github.com/zen-browser/desktop.git synced 2025-09-05 19:08:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update zen-welcome styles and animations for improved UI transitions

Browse Source
This commit is contained in:
mr. M
2025-02-15 12:33:47 +01:00
parent cabd426801
commit 0917cc82e0
2 changed files with 58 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/browser/base/content/zen-styles/zen-welcome.css
View File

@@ -105,14 +105,16 @@
align-items: center;
display: flex;
flex-direction: column;
gap: 1.1rem;
gap: 1.6rem;
& label {
opacity: 0;
transition: scale 0.2s;
padding: 1.1rem 1.3rem;
transition: scale 0.1s;
padding: 1.5rem 1.1rem;
border-radius: .6rem;
width: 50%;
gap: 0.8rem;
display: flex;
border: 2px solid var(--zen-colors-border);
box-shadow: var(--zen-big-shadow);
background: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));

68
src/browser/base/zen-components/ZenWelcome.mjs
View File

@@ -93,7 +93,7 @@
'#zen-welcome-page-sidebar-buttons button',
{ opacity: [0, 1], x: [50, 0], filter: ['blur(2px)', 'blur(0px)'] },
{
delay: getMotion().stagger(0.1),
delay: getMotion().stagger(0.1, { startDelay: 0.4 }),
type: 'spring',
bounce: 0.2,
}
@@ -105,7 +105,7 @@
'#zen-welcome-page-content > *',
{ opacity: [0, 1], scale: [0.9, 1], filter: ['blur(2px)', 'blur(0px)'] },
{
delay: getMotion().stagger(0.05, { startDelay: 0.3 }),
delay: getMotion().stagger(0.1, { startDelay: 0.3 }),
type: 'spring',
bounce: 0.2,
}
@@ -115,12 +115,11 @@
async fadeOutButtons() {
await animate(
'#zen-welcome-page-sidebar-buttons button',
{ opacity: [1, 0], x: [0, -60], filter: ['blur(0px)', 'blur(2px)'] },
{ opacity: [1, 0], x: [0, -50], filter: ['blur(0px)', 'blur(2px)'] },
{
type: 'spring',
stiffness: 300,
damping: 20,
mass: 1.4,
bounce: 0,
delay: getMotion().stagger(0.1, { startDelay: 0.4 }),
}
);
document.getElementById('zen-welcome-page-sidebar-buttons').innerHTML = '';
@@ -129,13 +128,25 @@
async fadeOutTitles() {
await animate(
'#zen-welcome-page-content-title h1, #zen-welcome-page-content-title p',
{ opacity: [1, 0], x: [0, -60], filter: ['blur(0px)', 'blur(2px)'] },
'#zen-welcome-page-sidebar-content > *',
{ opacity: [1, 0], x: [0, -50], filter: ['blur(0px)', 'blur(2px)'] },
{
delay: getMotion().stagger(0.05, { startDelay: 0.3 }),
type: 'spring',
stiffness: 300,
damping: 20,
mass: 1.4,
bounce: 0,
}
);
}
async fadeOutContent() {
await animate(
'#zen-welcome-page-content > *',
{ opacity: [1, 0], scale: [1, 0.9], filter: ['blur(0px)', 'blur(2px)'] },
{
delay: getMotion().stagger(0.05, { startDelay: 0.3 }),
type: 'spring',
bounce: 0,
duration: 0.2
}
);
}
@@ -143,8 +154,12 @@
async next() {
if (this._currentPage !== -1) {
const previousPage = this._pages[this._currentPage];
await this.fadeOutTitles();
await this.fadeOutButtons();
await Promise.all([
this.fadeOutTitles(),
this.fadeOutButtons(),
this.fadeOutContent(),
]);
document.getElementById('zen-welcome-page-content').innerHTML = '';
previousPage.fadeOut();
}
this._currentPage++;
@@ -153,8 +168,10 @@
this.finish();
return;
}
await this.fadeInTitles(currentPage);
await this.fadeInButtons(currentPage);
await Promise.all([
this.fadeInTitles(currentPage),
this.fadeInButtons(currentPage),
]);
currentPage.fadeIn();
await this.fadeInContent();
}
@@ -211,6 +228,27 @@
},
fadeOut() {},
},
{
text: [
{
id: 'zen-welcome-start-browsing-title',
},
{
id: 'zen-welcome-start-browsing-description-1',
},
],
buttons: [
{
l10n: 'zen-welcome-start-browsing',
onclick: async () => {
return true;
},
},
],
fadeIn() {
},
fadeOut() {},
},
];
}