OUR COMPANY
Bring Your Ideas to Life
Everything that you dreamed of can be brought to life exactly at the moment when you decide to win.
Инструкция
(скрыть)
1. При создании анимации в Svgrtista задавай каждой новой анимации свой класс. Старайся делать это осмысленно, чтобы потом было проще разбираться. К примеру anim-1, anim-2, anim-n.

2. Для SVG CODE внутри тега <svg> для анимации в хедере задай класс header__svg. Пример: <svg class="header__svg" ...>
!Не в поле svgartista, а именно самому элементу.

3. Для всех остальных анимаций, которые должны проигрываться ниже задай класс scroll-svg внутри тега <svg> *.

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

*Скрин ниже.

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

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

2. Проверьте, есть ли отступ между заданным классом и остальными атрибутами svg. Проверь, чтобы название класса находилось в кавычках "".

3. Открой консоль, если скрипт не найдет элементы с классом - он об этом сообщит. В таком случае нужно повторить шаги 1 и 2.
<script>
    window.addEventListener('load', () => {
        const firstSVG = document.querySelector('.header__svg');
        if (!firstSVG) console.log("Я не нашел элемент в хедере с таким классом");
        setTimeout(() => {
            firstSVG.classList.add('active');
        }, 200);
    });
    document.addEventListener("DOMContentLoaded", () => {
        function observer() {
            const options = {
                root: '',
                rootMargin: '0px',
                threshold: 0.5
            }
            
            const scrollSVG = document.querySelectorAll('.scroll-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>
Made on
Tilda