Svgartista для Ульяны

Инструкция

(скрыть)

1. При создании анимации в Svgrtista выбери тип анимации transition, задай анимации свой клас.

! Обязательно задавайте каждой новой SVG разные классы, иначе на странице будет проигрываться одна и так же анимация для всех SVG.

4. Скопируй код и вставь в блок T123.

Если не работает

1. Проверь, тот ли тип анимации выбран на Svgartista. В большинстве случаев ошибка из-за того, что был выбран тип @keyframes

2. Проверь, точно ли ты задавала разные классы для анимаций. Если нет, анимации работать не будут.

3. Открой консоль, если скрипт не найдет элементы с анимацией - он об этом сообщит. В таком случае нужно повторить шаги 1 и 2.

4. Если проблему решить не удается - скинь страничку с эффектами мне.

<script>
    document.addEventListener("DOMContentLoaded", () => {
        function observer() {
            const options = {
                root: '',
                rootMargin: '0px',
                threshold: 0.5
            }
            
            const scrollSVG = document.querySelectorAll('svg');
            if (!scrollSVG) console.log("Я не нашел элементы, которые показываются при скролле");

            var observer = new IntersectionObserver(function(entries, observer) {
                entries.forEach(function(entry) {
                    if (entry.isIntersecting) entry.target.classList.add('active');
                });
            });
            scrollSVG.forEach(function(el) { observer.observe(el, options); });
        }

        observer();
    });
</script>