{"id":2154,"date":"2019-04-11T22:53:19","date_gmt":"2019-04-11T16:53:19","guid":{"rendered":"https:\/\/themestrace.com\/tracem\/?page_id=2154"},"modified":"2019-04-11T23:01:18","modified_gmt":"2019-04-11T17:01:18","slug":"home-flip-layout","status":"publish","type":"page","link":"https:\/\/themestrace.com\/tracem\/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\">\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\">\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-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:\/\/themestrace.com\/tracem\/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:\/\/themestrace.com\/tracem\/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:\/\/themestrace.com\/tracem\/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:\/\/themestrace.com\/tracem\/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:\/\/themestrace.com\/tracem\/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:\/\/themestrace.com\/tracem\/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:\/\/themestrace.com\/tracem\/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:\/\/themestrace.com\/tracem\/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:\/\/themestrace.com\/tracem\/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:\/\/themestrace.com\/tracem\/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:\/\/themestrace.com\/tracem\/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:\/\/themestrace.com\/tracem\/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:\/\/themestrace.com\/tracem\/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:\/\/themestrace.com\/tracem\/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:\/\/themestrace.com\/tracem\/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:\/\/themestrace.com\/tracem\/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:\/\/themestrace.com\/tracem\/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 Door in the Snow Where you got inspired The Healer of the Cloud Where you got inspired The Word\u2019s Healing Where you got inspired Girl in hustler The Ashes of the Blade Bridge of dying The Slave in the Rainbow Theft of flame The Flames of the Secret<\/p>\n","protected":false},"author":2,"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:\/\/themestrace.com\/tracem\/wp-json\/wp\/v2\/pages\/2154","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themestrace.com\/tracem\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/themestrace.com\/tracem\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/themestrace.com\/tracem\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/themestrace.com\/tracem\/wp-json\/wp\/v2\/comments?post=2154"}],"version-history":[{"count":0,"href":"https:\/\/themestrace.com\/tracem\/wp-json\/wp\/v2\/pages\/2154\/revisions"}],"wp:attachment":[{"href":"https:\/\/themestrace.com\/tracem\/wp-json\/wp\/v2\/media?parent=2154"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}