GSAP + SplitType + I18N Текст не обновляется правильно после изменения языка ⇐ Html

[Anonymous]

Я использую GSAP с SplitType и пользовательским языковым коммутатором (en.json, es.json) для динамического перевода моего веб-сайта.
Все правильно переводится, кроме раздела. SplitType или GSAP Misfiring).
Что я пробовал:
Правильно подтвердил нагрузку и обновление клавиш перевода через Data-i18n
() и SetTimeout () для задержки SplitTyP rasevert (). .kill () Чтобы очистить предыдущую анимацию
html


MY LONG TEXT IN ENGLISH HERE.



js
document.addEventListener('DOMContentLoaded', () => {
const langSelect = document.getElementById('langSelect');
const storedLang = localStorage.getItem('lang') || 'en';
langSelect.value = storedLang;

applyLanguage(storedLang);

langSelect.addEventListener('change', () => {
const lang = langSelect.value;
localStorage.setItem('lang', lang);
applyLanguage(lang);
});
});

function applyLanguage(lang) {
fetch(`/lang/${lang}.json`)
.then(res => res.json())
.then(data => {
document.querySelectorAll('[data-i18n]').forEach(el => {
const key = el.getAttribute('data-i18n');
const allowHtml = el.getAttribute('data-i18n-html') === 'true';
if (data[key]) {
if (allowHtml) {
el.innerHTML = data[key];
} else {
el.textContent = data[key];
}
}
});

// Attempt delayed animation init
requestAnimationFrame(() => {
setTimeout(() => {
initScrollAnimation();
}, 100);
});
});
}

let scrollSplit;
function initScrollAnimation() {
if (scrollSplit) scrollSplit.revert();

ScrollTrigger.getAll().forEach(trigger => trigger.kill());
gsap.killTweensOf("*");

scrollSplit = new SplitType(".scroll-fade-text", {
types: "words",
wordClass: "word"
});

gsap.to(scrollSplit.words, {
color: "white",
stagger: 0.3,
scrollTrigger: {
trigger: ".scroll-lock-section",
start: "top top",
end: "+=1000",
scrub: true,
pin: true,
invalidateOnRefresh: true
}
});
}

css
.scroll-lock-section {
height: 85vh;
display: flex;
align-items: center;
justify-content: center;
padding: 0 20px;
background-color: #0c1624;
}

.scroll-text-wrap {
font-size: 48px;
font-family: 'Manrope', sans-serif;
font-weight: bold;
max-width: 1000px;
text-align: center;
line-height: 1.5;
margin-bottom: -150px;
}

.scroll-text-wrap .word {
color: gray;
transition: color 0.4s ease;
}

Когда я переключаю язык с английского на испанский:
Все другие данные-i18n Обновление элементов правильно.
scroll-fade-text кратко изменяется, затем возвращается на английский. DATA-I18N и карта JSON.Contact us

json
en.json
"navContact": "Contact us",
/* more below */
< /code>
es.json
"navContact": "Contáctanos",
/* more below */


Подробнее здесь: https://stackoverflow.com/questions/797 ... age-change