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();