Инструкция к созданию анимации текста
Общая информация
Для создание любой анимации с текстом, нужно будет включить пошаговую анимацию. Никаких шагов, при этом создавать не нужно. Нужен лишь триггер для запуска анимации
Анимация с закручиванием букв (rotate-text)
Шаг 1
В Zero-блоке создаём текстовую область и присваиваем ей класс rotate-text-1 (-1 это порядковый номер текстовой области, к примеру, если нужно создать новую текстовую область вешаем уже класс rotate-text-2 и тд.Шаг 1
шаг2
Через блок t123 добавляем код. (поместить в футер или внизу страницы)
<!--Анимация текста с помощью SBS-->
<!--https://mt-webdesign.ru/sbs-text-->
<script src="https://unpkg.com/split-type"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollTrigger.min.js"></script>
<style>
.line {
width: 100% !important;
}
.rotate-text {
opacity: 0;
}
.t-sbs-anim_started .rotate-text {
opacity: 1;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
function generateSelectors(index) {
return {
textSelector: `.rotate-text-${index} .tn-atom`,
triggerSelector: `.rotate-text-${index}`
};
}
const numberOfTexts = 1;
const textsAndTriggers = Array.from({ length: numberOfTexts }, (_, index) => generateSelectors(index + 1));
textsAndTriggers.forEach(({ textSelector, triggerSelector }) => {
document.querySelector(textSelector).classList.add('rotate-text');
let typeSplit = new SplitType(textSelector, {
types: 'lines, words, chars',
tagName: 'span'
});
let animationStarted = false;
const animateRotateText = () => {
if (!animationStarted) {
animationStarted = true;
console.log(`Animating rotate text for ${textSelector}`);
gsap.fromTo(`${textSelector} .char`,
{
opacity: 0,
scale: 0,
rotate: -15,
},
{
opacity: 1,
scale: 1,
rotate: 0,
duration: 0.6,
ease: 'power1.out',
stagger: {
amount: 0.9,
from: "0"
}
}
);
}
};
if (document.querySelector(triggerSelector).classList.contains('t-sbs-anim_started')) {
console.log(`${triggerSelector} already has t-sbs-anim_started`);
animateRotateText();
}
const observer = new MutationObserver(function(mutationsList) {
for (let mutation of mutationsList) {
if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
if (mutation.target.classList.contains('t-sbs-anim_started')) {
console.log(`${triggerSelector} received t-sbs-anim_started`);
animateRotateText();
observer.disconnect();
}
}
}
});
observer.observe(document.querySelector(triggerSelector), { attributes: true });
});
});
</script>

шаг3
После в коде указываем количество созданных текстовых блоков с этим классом