Class Intro

src/js/demo1/intro.js:11–126

};

export class Intro {
    constructor(el) {
        // the SVG element
        this.DOM = {el: el};
        // SVG texts
        this.DOM.circleText = [...this.DOM.el.querySelectorAll('text.circles__text')];
        // total of texts
        this.circleTextTotal = this.DOM.circleText.length;
        // initial setudp
        this.setup();
    }
    setup() {
        // need to set the transform origin in the center
        gsap.set(this.DOM.circleText, { transformOrigin: '50% 50%' });
        // hide on start
        gsap.set([this.DOM.circleText, DOM.content.children, DOM.frame.children], {opacity: 0});
        // don't allow to hover
        gsap.set(DOM.enterCtrl, {pointerEvents: 'none'});

        this.initEvents();
    }
    initEvents() {
        // click and hover events for the "enter" button:
        this.enterMouseEnterEv = () => {
            gsap.killTweensOf([DOM.enterBackground,this.DOM.circleText]);
            
            gsap.to(DOM.enterBackground, {
                duration: 0.8,
                ease: 'power4',
                scale: 1.2,
                opacity: 1
            });
            
            gsap.to(this.DOM.circleText, {
                duration: 4,
                ease: 'power4',
                rotate: '+=180',
                stagger: {
                    amount: -0.3
                }
            });
        };
        this.enterMouseLeaveEv = () => {
            //gsap.killTweensOf(DOM.enterBackground);
            gsap.to(DOM.enterBackground, {
                duration: 0.8,
                ease: 'power4',
                scale: 1
            });
        };
        this.enterClickEv = () => this.enter();
        
        DOM.enterCtrl.addEventListener('mouseenter', this.enterMouseEnterEv);
        DOM.enterCtrl.addEventListener('mouseleave', this.enterMouseLeaveEv);
        DOM.enterCtrl.addEventListener('click', this.enterClickEv);
    }
    // initial (intro) animation
    start() {