import {gsap} from "gsap";
import {ScrollTrigger} from "gsap/ScrollTrigger";

gsap.registerPlugin(ScrollTrigger);

const block = document.querySelectorAll('.block');

window.addEventListener('load', () => {
    gsap.to(".main-screen__title", {y: 0, duration: .5, opacity: 1, delay: .2});
    gsap.to(".main-screen__text", {y: 0, duration: .5, opacity: 1, delay: .4});
    gsap.to(".main-screen__button", {transform: 'translateY(0)', duration: .5, opacity: 1, delay: .6});
    gsap.to('.full-screen__title', {
        scrollTrigger: '.full-screen',
        y: 0,
        opacity: 1,
        duration: .5,
        delay: .1
    });
    gsap.to('.full-screen__desc', {
        scrollTrigger: '.full-screen',
        y: 0,
        opacity: 1,
        duration: .5,
        delay: .2
    });
    gsap.to('.full-screen__img', {
        scrollTrigger: '.full-screen__desc',
        y: 0,
        opacity: 1,
        duration: .5,
        delay: .3
    });
    block.forEach(item => {
        const title = item.querySelector('.block__title')
        const desc = item.querySelector('.block__desc')
        const img = item.querySelector('.block__img')
        const icon = item.querySelectorAll('.block-icon__item')
        const appIcon = item.querySelectorAll('.block__content-icon-item')

        if (title) {
            gsap.to(title, {
                scrollTrigger: item,
                y: 0,
                opacity: 1,
                duration: .5,
                delay: .1
            });
        }
        if (desc) {
            gsap.to(desc, {
                scrollTrigger: item,
                y: 0,
                opacity: 1,
                duration: .5,
                delay: .2
            });
        }
        if (img) {
            gsap.to(img, {
                scrollTrigger: desc,
                y: 0,
                opacity: 1,
                duration: .5,
                delay: .3
            });
        }
        if (icon) {
            let time = 0.1;
            icon.forEach(itemIcon => {
                gsap.to(itemIcon, {
                    scrollTrigger: item,
                    y: 0,
                    opacity: 1,
                    delay: time
                });
                time += 0.05
            })
        }
        if (appIcon) {
            let time = 0.1;
            appIcon.forEach(itemIcon => {
                gsap.to(itemIcon, {
                    scrollTrigger: item,
                    y: 0,
                    opacity: 1,
                    delay: time
                });
                time += 0.1
            })
        }
    });
});