Class Intro

src/js/demo2/intro.js:11–140

};

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
        this.circleTextTotal = this.DOM.circleText.length;
        
        this.setup();
    }
    setup() {
        // need to set the transform origin
        // 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() {
        this.enterMouseEnterEv = () => {
            gsap.killTweensOf([DOM.enterBackground,this.DOM.circleText]);
            
            gsap.to(DOM.enterBackground, {
                duration: 1,
                ease: 'expo',
                scale: 1.4
            });
            gsap.to(this.DOM.circleText, {
                duration: 1,
                ease: 'expo',
                scale: 1.15,
                rotation: i => i%2 ? '-=90' : '+=90',
                opacity: 0.4,
                
            });
        };
        this.enterMouseLeaveEv = () => {
            // gsap.killTweensOf([DOM.enterBackground,this.DOM.circleText]);
            gsap.to(DOM.enterBackground, {
                duration: 1,
                ease: 'expo',
                scale: 1
            });
            gsap.to(this.DOM.circleText, {
                duration: 1,
                ease: 'expo',
                scale: 1,
                rotation: i => i%2 ? '+=120' : '-=120',
                opacity: 1,
                stagger: {
                    amount: -0.2
                }
            });
        };