{"id":2154,"date":"2019-04-11T22:53:19","date_gmt":"2019-04-11T16:53:19","guid":{"rendered":"http:\/\/themestrace.com\/tracem\/?page_id=2154"},"modified":"2019-04-11T22:53:19","modified_gmt":"2019-04-11T16:53:19","slug":"home-flip-layout","status":"publish","type":"page","link":"https:\/\/vol.cool\/index.php\/home-flip-layout\/","title":{"rendered":"Home  Flip Layout"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"2154\" class=\"elementor elementor-2154\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-9550784 elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"9550784\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-c3e533c\" data-id=\"c3e533c\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-79cf876 elementor-widget elementor-widget-tracem-slider\" data-id=\"79cf876\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"tracem-slider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- ============================================================================ -->\r\n<!-- =============================== Flip Slider ================================ -->\r\n<!-- ============================================================================ -->\r\n\r\n<div class=\"page-flip-slideshow\">\r\n        <div class=\"page-flip-slide page-flip-slide--layout-1 page-flip-slide--current\">\r\n                <figure class=\"page-flip-slide__figure\">\r\n            <div class=\"page-flip-slide__figure-inner\">\r\n                <div class=\"page-flip-slide__figure-img\" style=\"background-image: url(https:\/\/vol.cool\/wp-content\/uploads\/2019\/02\/tport-13.jpg)\"><\/div>\r\n                <div class=\"page-flip-slide__figure-reveal\"><\/div>\r\n            <\/div>\r\n            <figcaption>\r\n                <h3 class=\"page-flip-slide__figure-title\">The Weeping Waves<\/h3>                <p class=\"page-flip-slide__figure-description\">Where you got inspired<\/p>                \r\n            <\/figcaption>\r\n        <\/figure>\r\n                <figure class=\"page-flip-slide__figure\">\r\n            <div class=\"page-flip-slide__figure-inner\">\r\n                <div class=\"page-flip-slide__figure-img\" style=\"background-image: url(https:\/\/vol.cool\/wp-content\/uploads\/2019\/02\/tport-22.jpg)\"><\/div>\r\n                <div class=\"page-flip-slide__figure-reveal\"><\/div>\r\n            <\/div>\r\n            <figcaption>\r\n                <h3 class=\"page-flip-slide__figure-title\">Door in the Snow<\/h3>                <p class=\"page-flip-slide__figure-description\">Where you got inspired<\/p>                \r\n            <\/figcaption>\r\n        <\/figure>\r\n                <figure class=\"page-flip-slide__figure\">\r\n            <div class=\"page-flip-slide__figure-inner\">\r\n                <div class=\"page-flip-slide__figure-img\" style=\"background-image: url(https:\/\/vol.cool\/wp-content\/uploads\/2019\/02\/tport-19.jpg)\"><\/div>\r\n                <div class=\"page-flip-slide__figure-reveal\"><\/div>\r\n            <\/div>\r\n            <figcaption>\r\n                <h3 class=\"page-flip-slide__figure-title\">The Healer of the Cloud<\/h3>                <p class=\"page-flip-slide__figure-description\">Where you got inspired<\/p>                \r\n            <\/figcaption>\r\n        <\/figure>\r\n                <figure class=\"page-flip-slide__figure\">\r\n            <div class=\"page-flip-slide__figure-inner\">\r\n                <div class=\"page-flip-slide__figure-img\" style=\"background-image: url(https:\/\/vol.cool\/wp-content\/uploads\/2019\/02\/tport-24.jpg)\"><\/div>\r\n                <div class=\"page-flip-slide__figure-reveal\"><\/div>\r\n            <\/div>\r\n            <figcaption>\r\n                <h3 class=\"page-flip-slide__figure-title\">The Word&#8217;s Healing<\/h3>                <p class=\"page-flip-slide__figure-description\">Where you got inspired<\/p>                \r\n            <\/figcaption>\r\n        <\/figure>\r\n            <\/div>\r\n        <div class=\"page-flip-slide page-flip-slide--layout-2 \">\r\n                <figure class=\"page-flip-slide__figure\">\r\n            <div class=\"page-flip-slide__figure-inner\">\r\n                <div class=\"page-flip-slide__figure-img\" style=\"background-image: url(https:\/\/vol.cool\/wp-content\/uploads\/2019\/03\/image-caro-6.jpg)\"><\/div>\r\n                <div class=\"page-flip-slide__figure-reveal\"><\/div>\r\n            <\/div>\r\n            <figcaption>\r\n                <h3 class=\"page-flip-slide__figure-title\">Girl in hustler<\/h3>                <p class=\"page-flip-slide__figure-description\">The Ashes of the Blade<\/p>                \r\n            <\/figcaption>\r\n        <\/figure>\r\n                <figure class=\"page-flip-slide__figure\">\r\n            <div class=\"page-flip-slide__figure-inner\">\r\n                <div class=\"page-flip-slide__figure-img\" style=\"background-image: url(https:\/\/vol.cool\/wp-content\/uploads\/2019\/03\/image-caro-5.jpg)\"><\/div>\r\n                <div class=\"page-flip-slide__figure-reveal\"><\/div>\r\n            <\/div>\r\n            <figcaption>\r\n                <h3 class=\"page-flip-slide__figure-title\">Bridge of dying<\/h3>                <p class=\"page-flip-slide__figure-description\">The Slave in the Rainbow<\/p>                \r\n            <\/figcaption>\r\n        <\/figure>\r\n                <figure class=\"page-flip-slide__figure\">\r\n            <div class=\"page-flip-slide__figure-inner\">\r\n                <div class=\"page-flip-slide__figure-img\" style=\"background-image: url(https:\/\/vol.cool\/wp-content\/uploads\/2019\/03\/image-caro-4.jpg)\"><\/div>\r\n                <div class=\"page-flip-slide__figure-reveal\"><\/div>\r\n            <\/div>\r\n            <figcaption>\r\n                <h3 class=\"page-flip-slide__figure-title\">Theft of flame<\/h3>                <p class=\"page-flip-slide__figure-description\">The Flames of the Secret<\/p>                \r\n            <\/figcaption>\r\n        <\/figure>\r\n            <\/div>\r\n        <div class=\"page-flip-slide page-flip-slide--layout-3 \">\r\n                <figure class=\"page-flip-slide__figure\">\r\n            <div class=\"page-flip-slide__figure-inner\">\r\n                <div class=\"page-flip-slide__figure-img\" style=\"background-image: url(https:\/\/vol.cool\/wp-content\/uploads\/2019\/02\/tport-2.jpg)\"><\/div>\r\n                <div class=\"page-flip-slide__figure-reveal\"><\/div>\r\n            <\/div>\r\n            <figcaption>\r\n                <h3 class=\"page-flip-slide__figure-title\">The Search of the Abyss<\/h3>                <p class=\"page-flip-slide__figure-description\">Where you got inspired<\/p>                \r\n            <\/figcaption>\r\n        <\/figure>\r\n                <figure class=\"page-flip-slide__figure\">\r\n            <div class=\"page-flip-slide__figure-inner\">\r\n                <div class=\"page-flip-slide__figure-img\" style=\"background-image: url(https:\/\/vol.cool\/wp-content\/uploads\/2019\/02\/tport-19.jpg)\"><\/div>\r\n                <div class=\"page-flip-slide__figure-reveal\"><\/div>\r\n            <\/div>\r\n            <figcaption>\r\n                <h3 class=\"page-flip-slide__figure-title\">The Cloud&#8217;s Planet<\/h3>                <p class=\"page-flip-slide__figure-description\">Willow in the Obsession<\/p>                \r\n            <\/figcaption>\r\n        <\/figure>\r\n                <figure class=\"page-flip-slide__figure\">\r\n            <div class=\"page-flip-slide__figure-inner\">\r\n                <div class=\"page-flip-slide__figure-img\" style=\"background-image: url(https:\/\/vol.cool\/wp-content\/uploads\/2019\/02\/tport-16.jpg)\"><\/div>\r\n                <div class=\"page-flip-slide__figure-reveal\"><\/div>\r\n            <\/div>\r\n            <figcaption>\r\n                <h3 class=\"page-flip-slide__figure-title\">The Ragged Servant<\/h3>                <p class=\"page-flip-slide__figure-description\">The Flying of the Time<\/p>                \r\n            <\/figcaption>\r\n        <\/figure>\r\n                <figure class=\"page-flip-slide__figure\">\r\n            <div class=\"page-flip-slide__figure-inner\">\r\n                <div class=\"page-flip-slide__figure-img\" style=\"background-image: url(https:\/\/vol.cool\/wp-content\/uploads\/2019\/02\/tport-18.jpg)\"><\/div>\r\n                <div class=\"page-flip-slide__figure-reveal\"><\/div>\r\n            <\/div>\r\n            <figcaption>\r\n                <h3 class=\"page-flip-slide__figure-title\">The Words of the Time<\/h3>                <p class=\"page-flip-slide__figure-description\">Willow in the Obsession<\/p>                \r\n            <\/figcaption>\r\n        <\/figure>\r\n            <\/div>\r\n        <div class=\"page-flip-slide page-flip-slide--layout-4 \">\r\n                <figure class=\"page-flip-slide__figure\">\r\n            <div class=\"page-flip-slide__figure-inner\">\r\n                <div class=\"page-flip-slide__figure-img\" style=\"background-image: url(https:\/\/vol.cool\/wp-content\/uploads\/2019\/02\/tport-16.jpg)\"><\/div>\r\n                <div class=\"page-flip-slide__figure-reveal\"><\/div>\r\n            <\/div>\r\n            <figcaption>\r\n                <h3 class=\"page-flip-slide__figure-title\">Thoughts in the Women<\/h3>                <p class=\"page-flip-slide__figure-description\">The Silk of the Night<\/p>                \r\n            <\/figcaption>\r\n        <\/figure>\r\n                <figure class=\"page-flip-slide__figure\">\r\n            <div class=\"page-flip-slide__figure-inner\">\r\n                <div class=\"page-flip-slide__figure-img\" style=\"background-image: url(https:\/\/vol.cool\/wp-content\/uploads\/2019\/02\/tport-15.jpg)\"><\/div>\r\n                <div class=\"page-flip-slide__figure-reveal\"><\/div>\r\n            <\/div>\r\n            <figcaption>\r\n                <h3 class=\"page-flip-slide__figure-title\">The Search of the Slave<\/h3>                <p class=\"page-flip-slide__figure-description\">The witch in the Nobody<\/p>                \r\n            <\/figcaption>\r\n        <\/figure>\r\n                <figure class=\"page-flip-slide__figure\">\r\n            <div class=\"page-flip-slide__figure-inner\">\r\n                <div class=\"page-flip-slide__figure-img\" style=\"background-image: url(https:\/\/vol.cool\/wp-content\/uploads\/2019\/02\/tport-13.jpg)\"><\/div>\r\n                <div class=\"page-flip-slide__figure-reveal\"><\/div>\r\n            <\/div>\r\n            <figcaption>\r\n                <h3 class=\"page-flip-slide__figure-title\">The Scent of the Touch<\/h3>                <p class=\"page-flip-slide__figure-description\">The Silk of the Night<\/p>                \r\n            <\/figcaption>\r\n        <\/figure>\r\n                <figure class=\"page-flip-slide__figure\">\r\n            <div class=\"page-flip-slide__figure-inner\">\r\n                <div class=\"page-flip-slide__figure-img\" style=\"background-image: url(https:\/\/vol.cool\/wp-content\/uploads\/2019\/02\/tport-14.jpg)\"><\/div>\r\n                <div class=\"page-flip-slide__figure-reveal\"><\/div>\r\n            <\/div>\r\n            <figcaption>\r\n                <h3 class=\"page-flip-slide__figure-title\">The No Servants<\/h3>                <p class=\"page-flip-slide__figure-description\">The witch in the Nobody<\/p>                \r\n            <\/figcaption>\r\n        <\/figure>\r\n            <\/div>\r\n        <div class=\"page-flip-slide page-flip-slide--layout-5 \">\r\n                <figure class=\"page-flip-slide__figure\">\r\n            <div class=\"page-flip-slide__figure-inner\">\r\n                <div class=\"page-flip-slide__figure-img\" style=\"background-image: url(https:\/\/vol.cool\/wp-content\/uploads\/2019\/03\/tport-32.jpg)\"><\/div>\r\n                <div class=\"page-flip-slide__figure-reveal\"><\/div>\r\n            <\/div>\r\n            <figcaption>\r\n                <h3 class=\"page-flip-slide__figure-title\">Eye in the Tower<\/h3>                <p class=\"page-flip-slide__figure-description\">The Tower of the Name<\/p>                \r\n            <\/figcaption>\r\n        <\/figure>\r\n                <figure class=\"page-flip-slide__figure\">\r\n            <div class=\"page-flip-slide__figure-inner\">\r\n                <div class=\"page-flip-slide__figure-img\" style=\"background-image: url(https:\/\/vol.cool\/wp-content\/uploads\/2019\/02\/tport-21.jpg)\"><\/div>\r\n                <div class=\"page-flip-slide__figure-reveal\"><\/div>\r\n            <\/div>\r\n            <figcaption>\r\n                <h3 class=\"page-flip-slide__figure-title\">The Vision of the Ashes<\/h3>                <p class=\"page-flip-slide__figure-description\">The flames in the Search<\/p>                \r\n            <\/figcaption>\r\n        <\/figure>\r\n            <\/div>\r\n        <!-- revealer -->\r\n    <div class=\"page_flip_revealer\">\r\n        <div class=\"page_flip_revealer__item page_flip_revealer__item--left\"><\/div>\r\n        <div class=\"page_flip_revealer__item page_flip_revealer__item--right\"><\/div>\r\n    <\/div>\r\n    <nav class=\"page-flip-arrow-nav\">\r\n        <button class=\"page-flip-arrow-nav__item page-flip-arrow-nav__item--prev\">\r\n            <span class=\"ti-arrow-left\"><\/span>\r\n        <\/button>\r\n        <button class=\"page-flip-arrow-nav__item page-flip-arrow-nav__item--next\">\r\n            <span class=\"ti-arrow-right\"><\/span>\r\n        <\/button>\r\n    <\/nav>\r\n<\/div>\t    <script>\r\n\t        ;(function($){\r\n\t            \"use strict\";\r\n\t            $(document).ready(function () {\r\n\t\t\t\t\tif( document.querySelector('.page-flip-slideshow') !== null )\r\n\t\t\t\t\t{\r\n\t\t\t\t\t    \/\/ Lighter to darker.\r\n\t\t\t\t\t    const colors = ['#f6f6f6','#f0f0f0','#e3e3e3','#d7d7d7','#d0d0d0'];\r\n\r\n\t\t\t\t\t    \/\/ The page turning animations.\r\n\t\t\t\t\t    class PageTurn {\r\n\t\t\t\t\t        constructor(el, pagesTotal) {\r\n\t\t\t\t\t            this.DOM = {el: el};\r\n\t\t\t\t\t            this.config = {\r\n\t\t\t\t\t                \/\/ Duration for each page turn animation.\r\n\t\t\t\t\t                duration: 1.6,\r\n\t\t\t\t\t                \/\/ Delay between the pages. Need to be tuned correctly together with the duration, so that there are no gaps between the pages, otherwise the content switch would be visible.\r\n\t\t\t\t\t                pagesDelay: 0.15,\r\n\t\t\t\t\t                \/\/ Ease for each page turn animation. Needs to be easeInOut\r\n\t\t\t\t\t                ease: Quint.easeInOut\r\n\t\t\t\t\t            };\r\n\t\t\t\t\t            \/\/ Both sides.\r\n\t\t\t\t\t            this.DOM.pagesWrap = {\r\n\t\t\t\t\t                left: this.DOM.el.querySelector('.page_flip_revealer__item--left'),\r\n\t\t\t\t\t                right: this.DOM.el.querySelector('.page_flip_revealer__item--right')\r\n\t\t\t\t\t            };\r\n\t\t\t\t\t            \/\/ Create the turning pages.\r\n\t\t\t\t\t            let pagesHTML = '';\r\n\t\t\t\t\t            for (let i = 0; i <= pagesTotal; ++i) {\r\n\t\t\t\t\t                \/\/ Setting the color of the turning page based on the colors array\r\n\t\t\t\t\t                \/\/ todo: Need to find a better way to do this..\r\n\t\t\t\t\t                const color = colors[i] || colors[0];\r\n\t\t\t\t\t                pagesHTML += `<div class=\"page_flip_revealer__item-inner\" style=\"background-color:${color};\"><\/div>`;\r\n\t\t\t\t\t            }\r\n\t\t\t\t\t            this.DOM.pagesWrap.left.innerHTML = this.DOM.pagesWrap.right.innerHTML = pagesHTML;\r\n\t\t\t\t\t            \/\/ All the turning pages.\r\n\t\t\t\t\t            this.DOM.pages = {\r\n\t\t\t\t\t                left: Array.from(this.DOM.pagesWrap.left.querySelectorAll('.page_flip_revealer__item-inner')),\r\n\t\t\t\t\t                right: Array.from(this.DOM.pagesWrap.right.querySelectorAll('.page_flip_revealer__item-inner'))\r\n\t\t\t\t\t            };\r\n\t\t\t\t\t        }\r\n\t\t\t\t\t        \/\/ The pages will be initially translated to the right or left (100% or -100% on the x-axis) and then animated to the opposite side.\r\n\t\t\t\t\t        addTween(side, direction, nmbPages) {\r\n\t\t\t\t\t            const pages = this.DOM.pages[side];\r\n\t\t\t\t\t            for (let i = 0, len = nmbPages-1; i <= len; ++i) {\r\n\t\t\t\t\t                const page = pages[i];\r\n\t\t\t\t\t                this.tl.to(page, this.config.duration, {\r\n\t\t\t\t\t                    ease: this.config.ease,\r\n\t\t\t\t\t                    startAt: {x: direction === 'next' ? '100%' : '-100%'},\r\n\t\t\t\t\t                    x: direction === 'next' ? '-100%' : '100%'\r\n\t\t\t\t\t                }, i * this.config.pagesDelay);\r\n\t\t\t\t\t            }\r\n\t\t\t\t\t        }\r\n\t\t\t\t\t        createTweens(direction, nmbPages) {\r\n\t\t\t\t\t            this.addTween('left', direction, nmbPages);\r\n\t\t\t\t\t            this.addTween('right', direction, nmbPages);\r\n\t\t\t\t\t        }\r\n\t\t\t\t\t        turn(direction, nmbPages, middleAnimationCallback) {\r\n\t\t\t\t\t            return new Promise((resolve, reject) => {\r\n\t\t\t\t\t                this.tl = new TimelineMax({onComplete: resolve, paused: true});\r\n\t\t\t\t\t                \/\/ Add a callback for the middle of the animation.\r\n\t\t\t\t\t                if ( middleAnimationCallback ) {\r\n\t\t\t\t\t                    this.tl.addCallback(middleAnimationCallback, (this.config.duration + (nmbPages-1)*this.config.pagesDelay)\/2);\r\n\t\t\t\t\t                }\r\n\t\t\t\t\t                this.createTweens(direction, nmbPages);\r\n\t\t\t\t\t                this.tl.resume();\r\n\t\t\t\t\t            });\r\n\t\t\t\t\t        }\r\n\t\t\t\t\t    }\r\n\r\n\t\t\t\t\t    \/\/ Window sizes.\r\n\t\t\t\t\t    let winsize;\r\n\t\t\t\t\t    const calcWinsize = () => winsize = {width: window.innerWidth, height: window.innerHeight};\r\n\t\t\t\t\t    calcWinsize();\r\n\t\t\t\t\t    window.addEventListener('resize', calcWinsize);\r\n\t\t\t\t\t    \r\n\t\t\t\t\t    \/\/ Class for a content item.\r\n\t\t\t\t\t    class Item {\r\n\t\t\t\t\t        constructor(el) {\r\n\t\t\t\t\t            this.DOM = {el: el};\r\n\t\t\t\t\t            \/\/ The inner contains both the image and reveal elements.\r\n\t\t\t\t\t            this.DOM.inner = this.DOM.el.querySelector('.page-flip-slide__figure-inner');\r\n\t\t\t\t\t            \/\/ The image.\r\n\t\t\t\t\t            this.DOM.image = this.DOM.inner.querySelector('.page-flip-slide__figure-img');\r\n\t\t\t\t\t            \/\/ The reveal element (element that is on top of the image and moves away to reveal the image).\r\n\t\t\t\t\t            this.DOM.reveal = this.DOM.inner.querySelector('.page-flip-slide__figure-reveal');\r\n\t\t\t\t\t            \/\/ Title and description.\r\n\t\t\t\t\t            this.DOM.title = this.DOM.el.querySelector('.page-flip-slide__figure-title');\r\n\t\t\t\t\t            this.DOM.description = this.DOM.el.querySelector('.page-flip-slide__figure-description');\r\n\r\n\t\t\t\t\t            const calcRect = () => this.rect = this.DOM.el.getBoundingClientRect();\r\n\t\t\t\t\t            window.addEventListener('resize', calcRect);\r\n\t\t\t\t\t            calcRect();\r\n\t\t\t\t\t        }\r\n\t\t\t\t\t        \/\/ Gets the side where the item is on the slideshow\/viewport (left or right).\r\n\t\t\t\t\t        getSide() {\r\n\t\t\t\t\t            \/\/ Item\u00b4s center point.\r\n\t\t\t\t\t            const center = {x: this.rect.left+this.rect.width\/2, y: this.rect.top+this.rect.height\/2};\r\n\t\t\t\t\t            return center.x >= winsize.width\/2 ? 'right' : 'left';\r\n\t\t\t\t\t        }\r\n\t\t\t\t\t    }\r\n\r\n\t\t\t\t\t    \/\/ A slide is the two \"pages\" that are currently visible.\r\n\t\t\t\t\t    class Slide {\r\n\t\t\t\t\t        constructor(el) {\r\n\t\t\t\t\t            this.DOM = {el: el};\r\n\t\t\t\t\t            \/\/ Content item instances.\r\n\t\t\t\t\t            this.items = [];\r\n\t\t\t\t\t            \/\/ The figures\r\n\t\t\t\t\t            Array.from(this.DOM.el.querySelectorAll('.page-flip-slide__figure')).forEach((item) => this.items.push(new Item(item)));\r\n\t\t\t\t\t        }\r\n\t\t\t\t\t        \/\/ Show its content items.\r\n\t\t\t\t\t        showItems(direction) {\r\n\t\t\t\t\t            return new Promise((resolve, reject) => {\r\n\t\t\t\t\t                const duration = 1;\r\n\t\t\t\t\t                const ease = Expo.easeOut;\r\n\t\t\t\t\t                this.tl = new TimelineMax({onComplete: resolve}).add('begin');\r\n\t\t\t\t\t                for (const item of this.items) {\r\n\t\t\t\t\t                    \/\/ Animate the main element (translation of the whole item).\r\n\t\t\t\t\t                    this.tl.to(item.DOM.el, duration, { \r\n\t\t\t\t\t                        ease: ease,\r\n\t\t\t\t\t                        startAt: {x: direction === 'next' ? 60 : -60, opacity: 1},\r\n\t\t\t\t\t                        x: '0%',\r\n\t\t\t\t\t                    }, 'begin')\r\n\t\t\t\t\t                    \/\/ Animate the rotationZ for the elements that are inside the turning side.\r\n\t\t\t\t\t                    if ( direction === 'next' && item.getSide() === 'left' || direction === 'prev' && item.getSide() === 'right' ) {\r\n\t\t\t\t\t                        \/\/ Animate the perspective element\r\n\t\t\t\t\t                        TweenMax.set(item.DOM.inner, {'transform-origin': direction === 'next' ? '100% 50%' : '0% 50%'});\r\n\t\t\t\t\t                        this.tl.to(item.DOM.inner, duration, { \r\n\t\t\t\t\t                            ease: ease,\r\n\t\t\t\t\t                            startAt: {\r\n\t\t\t\t\t                                rotationY: direction === 'next' ? 30 : -30, \r\n\t\t\t\t\t                                \/\/rotationZ: direction === 'next' ?  5 : -5\r\n\t\t\t\t\t                            },\r\n\t\t\t\t\t                            rotationY: 0.1,\r\n\t\t\t\t\t                            \/\/rotationZ: 0\r\n\t\t\t\t\t                        }, 'begin');\r\n\t\t\t\t\t                    }\r\n\t\t\t\t\t                    \/\/ Animate the reveal element away from the image.\r\n\t\t\t\t\t                    this.tl.to(item.DOM.reveal, duration, { \r\n\t\t\t\t\t                        ease: ease,\r\n\t\t\t\t\t                        startAt: {x: '0%'},\r\n\t\t\t\t\t                        x: direction === 'next' ? '-100%' : '100%'\r\n\t\t\t\t\t                    }, 'begin')\r\n\t\t\t\t\t                    \/\/ Animate the scale of the image.\r\n\t\t\t\t\t                    .to(item.DOM.image, duration, {\r\n\t\t\t\t\t                        ease: ease,\r\n\t\t\t\t\t                        startAt: {\r\n\t\t\t\t\t                            scale: 1.5, \r\n\t\t\t\t\t                            \/\/rotationZ: direction === 'next' ?  -5 : 5\r\n\t\t\t\t\t                        },\r\n\t\t\t\t\t                        scale: 1\r\n\t\t\t\t\t                        \/\/rotationZ: 0\r\n\t\t\t\t\t                    }, 'begin')\r\n\t\t\t\t\t                    \/\/ Animate the title in.\r\n\t\t\t\t\t                    .to(item.DOM.title, duration*0.8, {\r\n\t\t\t\t\t                        ease: Quart.easeOut,\r\n\t\t\t\t\t                        startAt: {x: direction === 'next' ? 15 : -15, opacity: 0},\r\n\t\t\t\t\t                        x: '0%',\r\n\t\t\t\t\t                        opacity: 1\r\n\t\t\t\t\t                    }, 'begin+=0.25')\r\n\t\t\t\t\t                    \/\/ Animate the description in.\r\n\t\t\t\t\t                    .to(item.DOM.description, duration*0.8, {\r\n\t\t\t\t\t                        ease: Quart.easeOut,\r\n\t\t\t\t\t                        startAt: {x: direction === 'next' ? 20 : -20, opacity: 0},\r\n\t\t\t\t\t                        x: '0%',\r\n\t\t\t\t\t                        opacity: 1\r\n\t\t\t\t\t                    }, 'begin+=0.3');\r\n\t\t\t\t\t                }\r\n\t\t\t\t\t            });\r\n\t\t\t\t\t        }\r\n\t\t\t\t\t        \/\/ Reset items after the page turns.\r\n\t\t\t\t\t        resetItems() {\r\n\t\t\t\t\t            for (const item of this.items) {\r\n\t\t\t\t\t                TweenMax.set(item.DOM.el, {opacity: 0});\r\n\t\t\t\t\t                TweenMax.set([item.DOM.title,item.DOM.description], {opacity: 0});\r\n\t\t\t\t\t            }\r\n\t\t\t\t\t        }\r\n\t\t\t\t\t    }\r\n\r\n\t\t\t\t\t    class Slideshow {\r\n\t\t\t\t\t        constructor(el) {\r\n\t\t\t\t\t            this.DOM = {el: el};\r\n\t\t\t\t\t            \/\/ Current slide\u00b4s index.\r\n\t\t\t\t\t            this.current = 0;\r\n\t\t\t\t\t            \/\/ Slide instances.\r\n\t\t\t\t\t            this.slides = [];\r\n\t\t\t\t\t            Array.from(this.DOM.el.querySelectorAll('.page-flip-slide')).forEach((slide) => this.slides.push(new Slide(slide)));\r\n\t\t\t\t\t            this.slidesTotal = this.slides.length;\r\n\t\t\t\t\t            \/\/ Set the first slide as current.\r\n\t\t\t\t\t            this.slides[this.current].DOM.el.classList.add('page-flip-slide--current');\r\n\t\t\t\t\t            \/\/ The page turning animations.\r\n\t\t\t\t\t            this.pageturn = new PageTurn(this.DOM.el.querySelector('.page_flip_revealer'), this.slidesTotal);\r\n\t\t\t\t\t            \/\/ The arrows to navigate the slideshow.\r\n\t\t\t\t\t            this.pagination = {\r\n\t\t\t\t\t                prevCtrl: this.DOM.el.querySelector('.page-flip-arrow-nav__item--prev'),\r\n\t\t\t\t\t                nextCtrl: this.DOM.el.querySelector('.page-flip-arrow-nav__item--next')\r\n\t\t\t\t\t            };\r\n\r\n\t\t\t\t\t            this.initEvents();\r\n\t\t\t\t\t        }\r\n\t\t\t\t\t        initEvents() {\r\n\t\t\t\t\t            \/\/ Clicking on the next and previous arrows will turn the page to right or left.\r\n\t\t\t\t\t            const arrowClickPrevFn = () => this.pagethrough('prev');\r\n\t\t\t\t\t            const arrowClickNextFn = () => this.pagethrough('next');\r\n\t\t\t\t\t            this.pagination.prevCtrl.addEventListener('click', arrowClickPrevFn);\r\n\t\t\t\t\t            this.pagination.nextCtrl.addEventListener('click', arrowClickNextFn);\r\n\t\t\t\t\t            \r\n\r\n\t\t\t\t\t        }\r\n\t\t\t\t\t        \/\/ This function is executed at the middle point of the turning pages animation.\r\n\t\t\t\t\t        switchPage(newPagePos, direction = 'next') {\r\n\t\t\t\t\t            const currentSlide = this.slides[this.current];\r\n\t\t\t\t\t            const upcomingSlide = this.slides[newPagePos];\r\n\t\t\t\t\t            \/\/ Set the upcoming slide as current.\r\n\t\t\t\t\t            currentSlide.DOM.el.classList.remove('page-flip-slide--current');\r\n\t\t\t\t\t            currentSlide.resetItems();\r\n\t\t\t\t\t            upcomingSlide.DOM.el.style.zIndex = 100;\r\n\t\t\t\t\t            upcomingSlide.showItems(direction).then(() => {\r\n\t\t\t\t\t                upcomingSlide.DOM.el.classList.add('page-flip-slide--current');\r\n\t\t\t\t\t                upcomingSlide.DOM.el.style.zIndex = '';\r\n\t\t\t\t\t                this.isAnimating = false;\r\n\t\t\t\t\t            });\r\n\r\n\t\t\t\t\t            this.current = newPagePos;\r\n\t\t\t\t\t            \/\/ Update pagination ctrls visibility.\r\n\t\t\t\t\t            this.pagination.nextCtrl.style.visibility = this.current === this.slidesTotal-1 ? 'hidden' : 'visible';\r\n\t\t\t\t\t            this.pagination.prevCtrl.style.visibility = this.current === 0 ? 'hidden' : 'visible';\r\n\t\t\t\t\t        }\r\n\t\t\t\t\t        \/\/ Go to the next or previous page.\r\n\t\t\t\t\t        pagethrough(direction) {\r\n\t\t\t\t\t            if ( this.isAnimating || direction === 'next' && this.current === this.slidesTotal-1 || direction === 'prev' && this.current === 0 ) {\r\n\t\t\t\t\t                return false;\r\n\t\t\t\t\t            }\r\n\t\t\t\t\t            this.isAnimating = true;\r\n\t\t\t\t\t            const newPagePos = direction === 'next' ? this.current + 1 : this.current - 1;\r\n\t\t\t\t\t            this.pageturn.turn(direction, 1, () => this.switchPage(newPagePos, direction));\r\n\t\t\t\t\t        }\r\n\r\n\t\t\t\t\t        \/\/ Clicking a link inside the TOC will turn as many pages needed and jump to the specified page.\r\n\t\t\t\t\t        navigate(newPagePos) {\r\n\t\t\t\t\t            if ( this.isAnimating || newPagePos === this.current ) {\r\n\t\t\t\t\t                return false;\r\n\t\t\t\t\t            }\r\n\t\t\t\t\t            this.isAnimating = true;\r\n\t\t\t\t\t            \/\/ Close after clicking.\r\n\t\t\t\t\t            this.toggleToc();\r\n\t\t\t\t\t            const direction = newPagePos > this.current ? 'next' : 'prev';\r\n\t\t\t\t\t            \/\/ Turn [this.current-newPagePos] pages.\r\n\t\t\t\t\t            this.pageturn.turn(direction, Math.abs(this.current-newPagePos), () => this.switchPage(newPagePos, direction));\r\n\t\t\t\t\t        }\r\n\t\t\t\t\t    }\r\n\r\n\t\t\t\t\t    \/\/ Initialize the slideshow.\r\n\t\t\t\t\t    const slideshow = new Slideshow(document.querySelector('.page-flip-slideshow'));\r\n\t\t\t\t\t    \r\n\t\t\t\t\t    \/\/ Preload all the images in the page.\r\n\t\t\t\t\t    imagesLoaded(document.querySelectorAll('.page-flip-slide__figure-img'), {background: true}, () => document.body.classList.remove('loading'));\r\n\t\t\t\t\t}\r\n\t            });\r\n\t        })(jQuery)\r\n\t    <\/script>\r\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>The Weeping Waves Where you got inspired &hellip; <\/p>\n<div class=\"blogger-more-holder\"><a href=\"https:\/\/vol.cool\/index.php\/portfolio\/the-vision-of-the-ashes\/\" class=\"more-link\">Continue reading<\/a><\/div>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-fullwidth.php","meta":{"footnotes":""},"class_list":["post-2154","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/vol.cool\/index.php\/wp-json\/wp\/v2\/pages\/2154","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/vol.cool\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/vol.cool\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/vol.cool\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/vol.cool\/index.php\/wp-json\/wp\/v2\/comments?post=2154"}],"version-history":[{"count":0,"href":"https:\/\/vol.cool\/index.php\/wp-json\/wp\/v2\/pages\/2154\/revisions"}],"wp:attachment":[{"href":"https:\/\/vol.cool\/index.php\/wp-json\/wp\/v2\/media?parent=2154"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}