Class Intro

src/js/demo3/intro.js:11–143

};

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 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.3,
                ease: 'expo',
                scale: 1.4
            });
            gsap.to(this.DOM.circleText, {
                duration: 0.5,
                ease: 'expo',
                rotation: '+=120',
                scale: 0.5,
                opacity: 0.2,
                stagger: {
                    amount: -0.15
                }
            });
        };
        this.enterMouseLeaveEv = () => {
            //gsap.killTweensOf([DOM.enterBackground,this.DOM.circleText]);
            
            gsap.to(DOM.enterBackground, {
                duration: 2,
                ease: 'elastic.out(1, 0.4)',
                scale: 1
            });
            gsap.to(this.DOM.circleText, {
                duration: 2,
                ease: 'elastic.out(1, 0.4)',
                scale: 1,
                rotation: '-=120',
                opacity: 1,
                stagger: {
                    amount: 0.15
                }