Class Slideshow

src/js/demo1/slideshow.js:5–171

import { gsap } from 'gsap';

export class Slideshow extends EventEmitter {
    constructor(el) {
        super();
        // the main wrapper <div class="slideshow">
        this.DOM = {el};
        // the slides
        this.DOM.slides = [...this.DOM.el.querySelectorAll('.slide')];
        // array of Slide obj instances
        this.slides = [];
        this.DOM.slides.forEach(slide => this.slides.push(new Slide(slide)));
        // total number of Slides
        this.slidesTotal = this.slides.length;
        // current position
        this.current = 0;
        // some settings, like the clip paths
        this.config = {
            clipPath: {
                initial: 'circle(55% at 70% 50%)',
                final: 'circle(15% at 70% 50%)',
                hover: 'circle(20% at 30% 50%)'
            }
        };
        this.init();
    }
    init() {
        // start with the first slide as the current slide
        this.DOM.slides[this.current].classList.add('slide--current');
        // set the initial clip path
        gsap.set(this.slides[this.current].DOM.imgWrap, {clipPath: this.config.clipPath.initial});
        // when hovering over the "explore" link on each slide, we animate the clip path from this.config.clipPath.initial to this.config.clipPath.hover
        for (const slide of this.slides) {
            slide.DOM.link.addEventListener('mouseenter', () => {
                gsap.killTweensOf(slide.DOM.imgWrap);
                gsap.to(slide.DOM.imgWrap, {
                    duration: 1,
                    ease: 'expo',
                    clipPath: this.config.clipPath.hover
                });
            });
            slide.DOM.link.addEventListener('mouseleave', () => {
                gsap.killTweensOf(slide.DOM.imgWrap);
                gsap.to(slide.DOM.imgWrap, {
                    duration: 1,
                    ease: 'expo',
                    clipPath: this.config.clipPath.initial
                });
            });
        }
    }
    // navigate to the next slide
    next() {
        this.navigate('next');
    }
    // navigate to the previous slide
    prev() {
        this.navigate('prev');
    }
    navigate(direction) {