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

[Anonymous]

Я использую GSAP с SplitType и настраиваемый переключатель языка (en.json, es.json) для динамического перевода моего веб-сайта.
Все переводится правильно, за исключением раздела .scroll-fade-text, который использует SplitType для пословной анимации, запускаемой при прокрутке.
При смене языка переведенный текст ненадолго появляется, а затем возвращается к содержимому исходного языка (вероятно, из-за SplitType или Ошибка GSAP).
Что я пробовал:
Проверил правильность загрузки и обновления ключей перевода через data-i18n.
Использовал requestAnimationFrame() и setTimeout() для задержки инициализации SplitType.
Использовал .revert() и .kill() для очистки предыдущей анимации.


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
}
});
}
.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;
}


MY LONG TEXT IN ENGLISH HERE.





Когда я переключаю язык с английского на испанский:
Все остальные элементы data-i18n обновляются правильно.
scroll-fade-text ненадолго меняется, а затем возвращается обратно на английский язык.
Анимация GSAP продолжает работать, но со старым содержимым.
Как правильно повторно разделить и анимировать переведенный контент внутри .scroll-fade-text с помощью SplitType + GSAP без его сброса или возврата?
Весь перевод выполняется на стороне клиента с использованием data-i18n и JSON карта.
Рабочий пример...
HTML
Contact us

JSON
en.json
"navContact": "Contact us",
/* more below */

es.json
"navContact": "Contáctanos",
/* more below */


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