Flip Image with Greensock

flip-image.js

/**
 * Polaroid Flip 
 *
 */
const polaroidFlip = function () {
    const flipSection = document.querySelectorAll('section');

    for (var i = 0; i < flipSection.length; i++) {
        // cardBack = document.createElement('div')
        // cardBack.classList.add('content-block-back')
        // flipSection[i].appendChild(cardBack)

        const cardFront = document.querySelector('.content-block');
        const cardBack = document.querySelector('.content-block-back');
        const flipImages = document.querySelector('.swiper-polaroid');
        const flipButton = document.querySelector('.flip-button');
        const flipBackButton = document.querySelector('.flip-back-button');



        // .classList.add('content-block');

        // flipSection.appendChild(cardBack)

        var tl = new TimelineMax({ paused: true });
        tl.to(cardFront, 1, { rotationY: '180', zIndex: 0 })
            .to(cardBack, 1, { rotationY: '0', zIndex: 10 }, 0)


        flipButton.addEventListener(
            "click",
            function (event) {
                tl.play(0)
                event.preventDefault()
            },
            false
        )

        flipBackButton.addEventListener(
            "click",
            function (event) {
                tl.reverse(0)
                event.preventDefault()
            },
            false
        )


    }
};

polaroidFlip();