diff --git a/index.html b/index.html
index 812f4f1..24ab997 100644
--- a/index.html
+++ b/index.html
@@ -61,27 +61,14 @@
box-shadow: 0 2px 8px rgba(0,0,0,0.15); /* More prominent shadow for active */
}
- /* Thanos Snap Animations */
- @keyframes snap-out {
- 0% { opacity: 1; transform: scale(1) translateY(0) rotate(0deg); }
- 100% { opacity: 0; transform: scale(0.5) translateY(50px) rotate(30deg); filter: blur(5px); }
+ /* Fade animation for language change */
+ .fade-out {
+ opacity: 0;
+ transition: opacity 0.3s ease-out;
}
-
- @keyframes snap-in {
- 0% { opacity: 0; transform: scale(0.5) translateY(-50px) rotate(-30deg); filter: blur(5px); }
- 100% { opacity: 1; transform: scale(1) translateY(0) rotate(0deg); filter: blur(0); }
- }
-
- .snap-out-char {
- display: inline-block;
- animation: snap-out 0.6s forwards;
- will-change: transform, opacity, filter;
- }
-
- .snap-in-char {
- display: inline-block;
- animation: snap-in 0.6s forwards;
- will-change: transform, opacity, filter;
+ .fade-in {
+ opacity: 1;
+ transition: opacity 0.3s ease-in;
}
@@ -144,42 +131,21 @@
elementsToTranslate.forEach(el => {
const key = el.getAttribute('data-translate-key');
- const currentText = el.innerHTML;
const newText = translations[lang][key];
- // If the text is the same, no animation needed
- if (currentText === newText) {
- return;
+ if (el.innerHTML === newText) {
+ return; // No change, no animation needed
}
- // Create spans for current text and animate out
- let delay = 0;
- const chars = currentText.split('');
- el.innerHTML = ''; // Clear current content
-
- chars.forEach((char, index) => {
- const span = document.createElement('span');
- span.className = 'snap-out-char';
- span.style.animationDelay = `${delay}ms`;
- span.textContent = char;
- el.appendChild(span);
- delay += 30; // Delay for each character
- });
-
- // After animation out, replace with new text and animate in
+ el.classList.add('fade-out');
setTimeout(() => {
- el.innerHTML = ''; // Clear after snap-out
- let newDelay = 0;
- const newChars = newText.split('');
- newChars.forEach((char, index) => {
- const span = document.createElement('span');
- span.className = 'snap-in-char';
- span.style.animationDelay = `${newDelay}ms`;
- span.textContent = char;
- el.appendChild(span);
- newDelay += 30; // Delay for each new character
- });
- }, delay + 100); // Wait for all snap-out animations + a little extra
+ el.innerHTML = newText;
+ el.classList.remove('fade-out');
+ el.classList.add('fade-in');
+ setTimeout(() => {
+ el.classList.remove('fade-in');
+ }, 300); // Remove fade-in class after animation
+ }, 300); // Wait for fade-out to complete
});
document.getElementById('lang-pl').classList.toggle('active', lang === 'pl');
@@ -229,4 +195,4 @@