Twip-Network/watch.twip-network.org
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

changes to fade anim

Browse Source
This commit is contained in:
Richard Mikloš 2024-01-25 16:06:43 +01:00
parent fe8fdeb113
commit da637d6228
1 changed files with 4 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
scripts/pages/user/main.js
View File

@ -4,21 +4,21 @@ document.addEventListener('DOMContentLoaded', function () {
// Initial styles for fade-in effect
h1.style.opacity = '0';
h1.style.transform = 'translateX(-20px)';
h1.style.transform = 'translateX(-35px)';
h2.style.opacity = '0';
h2.style.transform = 'translateX(-20px)';
h2.style.transform = 'translateX(-35px)';
// Trigger the reflow to restart the CSS animation
void h1.offsetWidth;
void h2.offsetWidth;
// Apply the fade-in effect
h1.style.transition = 'opacity 0.8s ease, transform 0.8s ease';
h1.style.transition = 'opacity 0.8s ease, transform 0.6s ease';
h1.style.opacity = '1';
h1.style.transform = 'translateX(0)';
h2.style.transition = 'opacity 0.8s ease, transform 0.8s ease';
h2.style.transition = 'opacity 0.8s ease, transform 0.6s ease';
h2.style.opacity = '1';
h2.style.transform = 'translateX(0)';
});