Class Slideshow

src/js/demo2/slideshow.js:5–164

import { gsap } from 'gsap';

export class Slideshow extends EventEmitter {
    constructor(el) {
        super();
        this.DOM = {el};

        this.DOM.slides = [...this.DOM.el.querySelectorAll('.slide')];
        this.slides = [];
        this.DOM.slides.forEach(slide => this.slides.push(new Slide(slide)));
        this.slidesTotal = this.slides.length;

        this.current = 0;

        this.config = {
            clipPath: {
                initial: 'inset(10% 30.1% 0% 30% round 25vw 25vw 0vw 0vw)', //two equal values cause problems because browser uses shorthand
                final: 'inset(15% 40.1% 15% 40% round 25vw 25vw 25.01vw 25.01vw)',
                hover: 'inset(20% 40% 20.01% 40.01% round 25vw 25vw 25.01vw 25.01vw)'
            }
        };

        this.init();
    }
    init() {
        this.DOM.slides[this.current].classList.add('slide--current');
        gsap.set(this.slides[this.current].DOM.imgWrap, {clipPath: this.config.clipPath.initial});
        
        for (const slide of this.slides) {
            slide.DOM.link.addEventListener('mouseenter', () => {
                gsap.killTweensOf(slide.DOM.imgWrap);
                gsap.to(slide.DOM.imgWrap, {
                    duration: 0.7,
                    ease: 'expo',
                    clipPath: this.config.clipPath.hover
                });
            });
            slide.DOM.link.addEventListener('mouseleave', () => {
                gsap.killTweensOf(slide.DOM.imgWrap);
                gsap.to(slide.DOM.imgWrap, {
                    duration: 0.7,
                    ease: 'expo',
                    clipPath: this.config.clipPath.initial
                });
            });
        }
    }
    next() {
        this.navigate('next');
    }
    prev() {
        this.navigate('prev');
    }
    navigate(direction) {
        if ( this.isAnimating ) {
            return false;
        }
        this.isAnimating = true;

        const currentSlide = this.slides[this.current];