animate = () => {

    // select random data-index of an image and its random neighbor to swap
    elems = document.querySelectorAll('[data-index]')
    // let imageToAnimate = Math.floor((Math.random() * elems.length) + 1)
    imageToAnimate = 1
    neighborToAnimateWith = [imageToAnimate + 1 === elems.length + 1 ? 1 : imageToAnimate + 1, imageToAnimate - 1 === 0 ? elems.length : imageToAnimate - 1][Math.floor((Math.random() * 2))]
    // neighborToAnimateWith = 2
    // get the html nodes

    imageToAnimate = document.querySelector(`[data-index='${imageToAnimate}']`)
    neighborToAnimateWith = document.querySelector(`[data-index='${neighborToAnimateWith}']`)

    console.log("before", imageToAnimate.style.transform, neighborToAnimateWith.style.transform)

    imageToAnimate.style.transition = 'transform 1000ms ease-in-out'
    neighborToAnimateWith.style.transition = 'transform 1000ms ease-in-out'

    // perform the animation
    let imgTemp = imageToAnimate.getAttribute('data-index')
    let nhbrTemp = neighborToAnimateWith.getAttribute('data-index')

    // imageToAnimate.style.transform = `translate(${-neighborToAnimateWith.clientWidth}px, ${0}px)`
    // neighborToAnimateWith.style.transform = `translate(${-imageToAnimate.clientWidth}px, ${0}px)`
    if(nhbrTemp == 2) {
        imageToAnimate.style.transform = `translate${imageToAnimate.clientWidth}px, 0px)`
        neighborToAnimateWith.style.transform = `translate${-imageToAnimate.clientWidth}px, 0px)`
        // console.log(imageToAnimate)
    } else {
        imageToAnimate.style.transform = `translate(0px, ${neighborToAnimateWith.clientWidth}px)`
        neighborToAnimateWith.style.transform = `translate(0px, ${-imageToAnimate.clientWidth}px)`
    }

    console.log("after", imageToAnimate.style.transform, neighborToAnimateWith.style.transform)

    // if(parseFloat(neighborToAnimateWith.style.left) > parseFloat(imageToAnimate.style.left)) {
        //     imageToAnimate.style.transform = `translate(${neighborToAnimateWith.clientWidth}px, ${0}px)`
        //     neighborToAnimateWith.style.transform = `translate(${-imageToAnimate.clientWidth}px, ${0}px)`
        //     console.log("first")
        // } else if(parseFloat(neighborToAnimateWith.style.left) < parseFloat(imageToAnimate.style.left)) {
            //     imageToAnimate.style.transform = `translate(${-neighborToAnimateWith.clientWidth}px, ${0}px)`
            //     neighborToAnimateWith.style.transform = `translate(${imageToAnimate.clientWidth}px, ${0}px)`
            //     console.log("second")
            // } else if(parseFloat(neighborToAnimateWith.style.top) > parseFloat(imageToAnimate.style.top)) {
                //     imageToAnimate.style.transform = `translate(${0}px, ${neighborToAnimateWith.clientWidth}px)`
                //     neighborToAnimateWith.style.transform = `translate(${0}px, ${-imageToAnimate.clientWidth}px)`
                //     console.log("third")
                // } else if(parseFloat(neighborToAnimateWith.style.top) > parseFloat(imageToAnimate.style.top)) {
                    //     imageToAnimate.style.transform = `translate(${0}px, ${-neighborToAnimateWith.clientWidth}px)`
                    //     neighborToAnimateWith.style.transform = `translate(${0}px, ${imageToAnimate.clientWidth}px)`
                    //     console.log("fourth")
                    // }
                    // let temp = imageToAnimate.style.left
                    // imageToAnimate.style.left = neighborToAnimateWith.style.left
                    // neighborToAnimateWith.style.left = temp

                    // temp = imageToAnimate.style.top
                    // imageToAnimate.style.top = neighborToAnimateWith.style.top
                    // neighborToAnimateWith.style.top = temp


                // imageToAnimate.style.removeProperty('transition');
                // neighborToAnimateWith.style.removeProperty('transition');

                imageToAnimate.setAttribute('data-index', `${nhbrTemp}`);
                neighborToAnimateWith.setAttribute('data-index', `${imgTemp}`)

                return
}