{"id":14465,"date":"2026-10-07T22:03:48","date_gmt":"2026-10-07T22:03:48","guid":{"rendered":"https:\/\/academy.filio.io\/?p=14465"},"modified":"2026-10-07T22:37:35","modified_gmt":"2026-10-07T22:37:35","slug":"how-to-create-and-compare-before-after-photos-in-filio-data-collector","status":"publish","type":"post","link":"https:\/\/academy.filio.io\/how-to-create-and-compare-before-after-photos-in-filio-data-collector\/","title":{"rendered":"How to Create and Compare Before &#038; After Photos in Filio Data Collector?"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"14465\" class=\"elementor elementor-14465\" data-elementor-post-type=\"post\">\n\t\t\t\t<div class=\"elementor-element elementor-element-83d39d8 e-flex e-con-boxed e-con e-parent\" data-id=\"83d39d8\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-924abc6 elementor-widget elementor-widget-html\" data-id=\"924abc6\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\n<style id=\"filio-before-after-final-style\">.ff-academy.ff-before-after-final{color:#2f353a;font-family:inherit;max-width:1120px;margin:auto}.ff-academy.ff-before-after-final p,.ff-academy.ff-before-after-final li{font-size:17px;line-height:1.7}.ff-academy.ff-before-after-final p,.ff-academy.ff-before-after-final ul,.ff-academy.ff-before-after-final ol{max-width:74ch}.ff-academy.ff-before-after-final h2{font-size:28px;line-height:1.3;margin:48px 0 18px}.ff-academy.ff-before-after-final h3{font-size:23px;line-height:1.4;margin:36px 0 14px}.ff-academy.ff-before-after-final figure{margin:26px auto 38px;width:100%}.ff-academy.ff-before-after-final video{display:block;width:100%;height:auto;object-fit:contain;background:#fff}.ff-academy.ff-before-after-final .ff-portrait{max-width:576px}.ff-academy.ff-before-after-final figcaption{font-size:15px;line-height:1.6;margin-top:12px;color:#52565a}.ff-academy.ff-before-after-final a{color:inherit;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}.ff-academy.ff-before-after-final .ff-next{display:inline-block;background:#eaaa00;color:#2f353a;padding:12px 20px;border-radius:6px;font-weight:600;text-decoration:none}.ff-academy.ff-before-after-final details{padding:14px 18px;border:1px solid #b8b8b8;margin:18px 0 32px}.ff-academy.ff-before-after-final summary{font-weight:600;cursor:pointer}.ff-academy.ff-before-after-final .ff-notes{border-left:4px solid #eaaa00;padding-left:20px;margin:30px 0}.ff-academy.ff-before-after-final h2,.ff-academy.ff-before-after-final h3{scroll-margin-top:180px}\n.ff-academy.ff-before-after-final figure.ff-step-media{max-width:310px;width:100%;margin:26px auto 38px;border:1px solid #b8b8b8;padding:4px;border-radius:12px;box-sizing:border-box;background:#fff}\n.ff-before-after-final .ff-product-crop{position:relative;width:100%;aspect-ratio:720\/1390;overflow:hidden;background:#fff;border-radius:7px}\n.ff-before-after-final .ff-product-crop>video,.ff-before-after-final .ff-product-crop>img,.ff-before-after-final .ff-product-crop>canvas{position:absolute;display:block;left:0;top:0;width:100%;max-width:none;height:auto;transform:translateY(-7.1794871795%);object-fit:contain;margin:0;border:0}\n.ff-before-after-final .ff-product-crop>video{pointer-events:none}\n.ff-before-after-final .ff-product-crop>video::-webkit-media-controls{display:none!important}\n.ff-before-after-final .ff-product-crop>.ff-motion-poster{display:none}\n.ff-before-after-final nav li{margin:8px 0}\n.ff-before-after-final.is-reduced-motion .ff-product-crop>video,.ff-before-after-final.is-reduced-motion .ff-product-crop>.ff-loop-reset{display:none!important}.ff-before-after-final.is-reduced-motion .ff-product-crop>.ff-motion-poster{display:block}\n@media(prefers-reduced-motion:reduce){.ff-before-after-final .ff-product-crop>video,.ff-before-after-final .ff-product-crop>.ff-loop-reset{display:none!important}.ff-before-after-final .ff-product-crop>.ff-motion-poster{display:block}}\n<\/style>\n<style id=\"filio-before-after-micro-cues\">\n.ff-before-after-final [data-step=\"2\"] .ff-control-cue,.ff-before-after-final [data-step=\"3\"] .ff-control-cue{position:absolute;z-index:3;pointer-events:none;box-sizing:border-box;border:2px solid #eaaa00;box-shadow:0 0 0 2px rgba(234,170,0,.16)}\n.ff-before-after-final [data-step=\"2\"] .ff-control-cue{left:26.33%;top:92.4%;width:11.33%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);animation:ff-ba-icon-cue 3.2s ease-in-out infinite}\n.ff-before-after-final [data-step=\"3\"] .ff-control-cue{left:7.33%;top:79%;width:85.34%;height:6.5%;border-radius:10px;border-color:#fff0bb;opacity:0}\n.ff-before-after-final [data-step=\"3\"] .ff-control-cue.is-visible{opacity:1;animation:ff-ba-button-cue .8s ease-in-out 1}\n@keyframes ff-ba-icon-cue{0%,28%,100%{opacity:.65;box-shadow:0 0 0 2px rgba(234,170,0,.12)}14%{opacity:1;box-shadow:0 0 0 4px rgba(234,170,0,.24)}}\n@keyframes ff-ba-button-cue{0%,100%{box-shadow:0 0 0 2px rgba(234,170,0,.2)}50%{box-shadow:0 0 0 4px rgba(234,170,0,.32)}}\n.ff-before-after-final.is-reduced-motion [data-step=\"2\"] .ff-control-cue,.ff-before-after-final.is-reduced-motion [data-step=\"3\"] .ff-control-cue{animation:none;opacity:.85}\n@media(prefers-reduced-motion:reduce){.ff-before-after-final [data-step=\"2\"] .ff-control-cue,.ff-before-after-final [data-step=\"3\"] .ff-control-cue{animation:none;opacity:.85}}\n<\/style>\n<!-- Existing draft14465 only; manual upload pending; no publication. -->\n<div class=\"ff-academy ff-before-after-final\">\n<p>Use Before &amp; After to connect an earlier project photo with a later view, follow capture guidance when taking a new photo, and review the paired conditions with the comparison slider.<\/p>\n<h2>Before you start<\/h2>\n<p>Choose an earlier photo of the correct project area. Keep recognizable landmarks in view, and check that you can revisit the viewpoint safely. A change in framing, lighting or visibility can affect the comparison.<\/p>\n<nav aria-label=\"In this guide\"><h2>In this guide<\/h2><ol>\n<li><a href=\"#select-project\">Select the intended project<\/a><\/li>\n<li><a href=\"#choose-reference\">Select the earlier photo<\/a><\/li>\n<li><a href=\"#create-pair\">Open Before &amp; After<\/a><\/li>\n<li><a href=\"#capture-guidance\">Follow the capture guidance<\/a><\/li>\n<li><a href=\"#capture-review\">Capture the later photo<\/a><\/li>\n<li><a href=\"#compare-view\">Compare Before and After<\/a><\/li>\n<li><a href=\"#save-replace\">Save the After photo<\/a><\/li>\n<li><a href=\"#sequence-review\">Review the paired sequence<\/a><\/li>\n<\/ol><\/nav>\n<section class=\"ff-primary-workflow\" aria-labelledby=\"ba-step-by-step\"><h2 id=\"ba-step-by-step\">Step-by-step guide<\/h2>\n<h3 id=\"select-project\">1. Select the intended project<\/h3>\n<p>Select the intended project.<\/p>\n<h3 id=\"choose-reference\">2. Select the earlier photo<\/h3>\n<p>Open the photo that will serve as the Before reference. Check that it shows the area you intend to revisit.<\/p>\n<figure class=\"ff-motion ff-step-media\" data-step=\"2\" data-asset-key=\"select-earlier-photo\"><div class=\"ff-product-crop\"><img loading=\"lazy\" src=\"https:\/\/academy.filio.io\/wp-content\/uploads\/2026\/10\/filio-before-after-select-earlier-photo-1.jpg\" width=\"720\" height=\"1560\" loading=\"lazy\" decoding=\"async\" alt=\"The earlier Before reference photo already open in Filio\"><span class=\"ff-control-cue\" aria-hidden=\"true\"><\/span><\/div><\/figure>\n<h3 id=\"create-pair\">3. Open Before &amp; After<\/h3>\n<p>Select the <strong>Before &amp; After<\/strong> control. In <strong>Create Before &amp; After<\/strong>, choose <strong>Capture After Photo<\/strong> to take a new view.<\/p>\n<figure class=\"ff-motion ff-step-media\" data-step=\"3\" data-asset-key=\"choose-after\"><div class=\"ff-product-crop\"><video id=\"ba-choose-after\" autoplay muted loop playsinline preload=\"metadata\" width=\"720\" height=\"1560\" poster=\"https:\/\/academy.filio.io\/wp-content\/uploads\/2026\/10\/filio-before-after-choose-after-poster.jpg\" data-loop-end=\"2.0\" data-loop-dwell=\"1000\" data-mid-hold-at=\"0.4\" data-mid-hold-ms=\"800\" disablepictureinpicture disableremoteplayback aria-label=\"Open Before &amp; After\"><source src=\"https:\/\/academy.filio.io\/wp-content\/uploads\/2026\/10\/filio-before-after-choose-after.mp4\" type=\"video\/mp4\"><\/video>\n<img fetchpriority=\"high\" class=\"ff-motion-poster\" src=\"https:\/\/academy.filio.io\/wp-content\/uploads\/2026\/10\/filio-before-after-choose-after-poster.jpg\" width=\"720\" height=\"1560\" loading=\"eager\" decoding=\"async\" alt=\"Open Before &amp; After\"><span class=\"ff-control-cue\" aria-hidden=\"true\"><\/span><\/div><\/figure>\n<h3 id=\"capture-guidance\">4. Follow the capture guidance<\/h3>\n<p>Keep the same area in view and follow the prompt shown on your device. The current example shows <strong>Move up<\/strong> and <strong>Step backward<\/strong>. Review the framing as you move. Move only where it is safe.<\/p>\n<figure class=\"ff-motion ff-step-media\" data-step=\"4\" data-asset-key=\"guidance\"><div class=\"ff-product-crop\"><video id=\"ba-guidance\" autoplay muted loop playsinline preload=\"metadata\" width=\"720\" height=\"1560\" poster=\"https:\/\/academy.filio.io\/wp-content\/uploads\/2026\/10\/filio-before-after-guidance-poster.jpg\" data-loop-end=\"7.933333\" data-loop-dwell=\"1000\" disablepictureinpicture disableremoteplayback aria-label=\"Follow the capture guidance\"><source src=\"https:\/\/academy.filio.io\/wp-content\/uploads\/2026\/10\/filio-before-after-guidance.mp4\" type=\"video\/mp4\"><\/video>\n<img class=\"ff-motion-poster\" src=\"https:\/\/academy.filio.io\/wp-content\/uploads\/2026\/10\/filio-before-after-guidance-poster.jpg\" width=\"720\" height=\"1560\" loading=\"eager\" decoding=\"async\" alt=\"Follow the capture guidance\"><\/div><\/figure>\n<h3 id=\"capture-review\">5. Capture the later photo<\/h3>\n<p>When you are ready, use the shutter control to capture the After photo.<\/p>\n<figure class=\"ff-motion ff-step-media\" data-step=\"5\" data-asset-key=\"capture-later\"><div class=\"ff-product-crop\"><video id=\"ba-capture-later\" autoplay muted loop playsinline preload=\"metadata\" width=\"720\" height=\"1560\" poster=\"https:\/\/academy.filio.io\/wp-content\/uploads\/2026\/10\/filio-before-after-capture-later-poster.jpg\" data-loop-end=\"4.533333\" data-loop-dwell=\"1000\" disablepictureinpicture disableremoteplayback aria-label=\"Capture the later photo\"><source src=\"https:\/\/academy.filio.io\/wp-content\/uploads\/2026\/10\/filio-before-after-capture-later.mp4\" type=\"video\/mp4\"><\/video>\n<img class=\"ff-motion-poster\" src=\"https:\/\/academy.filio.io\/wp-content\/uploads\/2026\/10\/filio-before-after-capture-later-poster.jpg\" width=\"720\" height=\"1560\" loading=\"eager\" decoding=\"async\" alt=\"Capture the later photo\"><\/div><\/figure>\n<h3 id=\"compare-view\">6. Compare Before and After<\/h3>\n<p>Review the Before and After images together. Drag the yellow comparison handle to inspect each side, checking the area, framing and visible conditions.<\/p>\n<figure class=\"ff-motion ff-step-media\" data-step=\"6\" data-asset-key=\"compare\"><div class=\"ff-product-crop\"><video id=\"ba-compare\" autoplay muted loop playsinline preload=\"metadata\" width=\"720\" height=\"1560\" poster=\"https:\/\/academy.filio.io\/wp-content\/uploads\/2026\/10\/filio-before-after-compare-poster.jpg\" data-loop-end=\"5.233333\" data-loop-dwell=\"1000\" disablepictureinpicture disableremoteplayback aria-label=\"Compare Before and After\"><source src=\"https:\/\/academy.filio.io\/wp-content\/uploads\/2026\/10\/filio-before-after-compare.mp4\" type=\"video\/mp4\"><\/video>\n<img class=\"ff-motion-poster\" src=\"https:\/\/academy.filio.io\/wp-content\/uploads\/2026\/10\/filio-before-after-compare-poster.jpg\" width=\"720\" height=\"1560\" loading=\"eager\" decoding=\"async\" alt=\"Compare Before and After\"><\/div><\/figure>\n<h3 id=\"save-replace\">7. Save the After photo<\/h3>\n<p>Choose <strong>Save After<\/strong> to keep the later photo in the comparison.<\/p>\n<figure class=\"ff-motion ff-step-media\" data-step=\"7\" data-asset-key=\"save-after\"><div class=\"ff-product-crop\"><video id=\"ba-save-after\" autoplay muted loop playsinline preload=\"metadata\" width=\"720\" height=\"1560\" poster=\"https:\/\/academy.filio.io\/wp-content\/uploads\/2026\/10\/filio-before-after-save-after-poster.jpg\" data-loop-end=\"2.333333\" data-loop-dwell=\"1000\" disablepictureinpicture disableremoteplayback aria-label=\"Save the After photo\"><source src=\"https:\/\/academy.filio.io\/wp-content\/uploads\/2026\/10\/filio-before-after-save-after-1.mp4\" type=\"video\/mp4\"><\/video>\n<img class=\"ff-motion-poster\" src=\"https:\/\/academy.filio.io\/wp-content\/uploads\/2026\/10\/filio-before-after-save-after-poster.jpg\" width=\"720\" height=\"1560\" loading=\"eager\" decoding=\"async\" alt=\"Save the After photo\"><\/div><\/figure>\n<h3 id=\"sequence-review\">8. Review the paired sequence<\/h3>\n<p>Open the paired record to review <strong>Sequence 1<\/strong>. The screen labels the two records <strong>Before Reference<\/strong> and <strong>After Update<\/strong>. Move the divider to review the comparison again.<\/p>\n<figure class=\"ff-motion ff-step-media\" data-step=\"8\" data-asset-key=\"review-sequence\"><div class=\"ff-product-crop\"><video id=\"ba-review-sequence\" autoplay muted loop playsinline preload=\"metadata\" width=\"720\" height=\"1560\" poster=\"https:\/\/academy.filio.io\/wp-content\/uploads\/2026\/10\/filio-before-after-review-sequence-poster.jpg\" data-loop-end=\"4.7\" data-loop-dwell=\"1000\" disablepictureinpicture disableremoteplayback aria-label=\"Review the paired sequence\"><source src=\"https:\/\/academy.filio.io\/wp-content\/uploads\/2026\/10\/filio-before-after-review-sequence.mp4\" type=\"video\/mp4\"><\/video>\n<img class=\"ff-motion-poster\" src=\"https:\/\/academy.filio.io\/wp-content\/uploads\/2026\/10\/filio-before-after-review-sequence-poster.jpg\" width=\"720\" height=\"1560\" loading=\"eager\" decoding=\"async\" alt=\"Review the paired sequence\"><\/div><\/figure>\n<\/section>\n<aside class=\"ff-notes\" role=\"note\"><h2>Important note<\/h2><p>Before &amp; After supports visual review. It does not provide automatic change detection, and this guide makes no claim of automatic or certified alignment, measurement accuracy, or a guaranteed identical viewpoint. Interpret the comparison using project dates and context. <strong>Save After<\/strong> is demonstrated; the <strong>Replace After<\/strong> workflow is not covered.<\/p><\/aside>\n<h2>Common questions<\/h2>\n<h3>Can I use an existing After photo?<\/h3>\n<p>Yes. Choose from Filio Gallery is shown alongside Capture After Photo. Confirm that the selected photo represents the intended area and later condition.<\/p>\n<h3>What should I check before saving?<\/h3>\n<p>Check the project area, recognizable landmarks, viewpoint, framing and known capture dates. Keep uncertainty visible when the two photos do not show comparable conditions.<\/p>\n<h2>Related Academy guides<\/h2>\n<p>For plan-linked photo positions and directions, see <a href=\"https:\/\/www.filio.io\/academy\/set-up-walking-placement-filio-data-collector\" target=\"_blank\" rel=\"noopener\">Walking Placement setup and review<\/a>. For a room representation connected to a Plan Sheet, see <a href=\"https:\/\/www.filio.io\/academy\/create-interior-scan-plan-sheet-filio-data-collector\" target=\"_blank\" rel=\"noopener\">Interior Scan<\/a>.<\/p><p>For navigation, distance measurement and rectangular-area review in a separate completed model, see <a href=\"https:\/\/www.filio.io\/academy\/how-do-i-review-and-measure-a-3d-model-in-filio\" target=\"_blank\" rel=\"noopener\">review and measure a 3D model<\/a>.<\/p>\n<\/div>\n<script id=\"filio-before-after-teaching-loops\" data-nowprocket data-cfasync=\"false\">\/* Before & After 14465 only: restrained, source-faithful teaching loops. *\/\n(() => {\n  'use strict';\n  const init = () => {\n    const reduced = window.matchMedia('(prefers-reduced-motion: reduce)');\n    document.querySelectorAll('.ff-before-after-final').forEach(root => {\n      const controllers = [];\n      const setReduced = () => {\n        root.classList.toggle('is-reduced-motion', reduced.matches);\n        controllers.forEach(sync => sync());\n      };\n      root.querySelectorAll('video[data-loop-end]').forEach(video => {\n        if (video.dataset.ffLoopReady === '1') return;\n        video.dataset.ffLoopReady = '1';\n        const frame = video.closest('.ff-product-crop');\n        if (!frame) return;\n        const canvas = document.createElement('canvas');\n        canvas.className = 'ff-loop-reset';\n        canvas.setAttribute('aria-hidden', 'true');\n        Object.assign(canvas.style, {\n          position: 'absolute', pointerEvents: 'none', zIndex: '2',\n          opacity: '0', transition: 'none'\n        });\n        frame.appendChild(canvas);\n        const ctx = canvas.getContext('2d');\n        const number = (key, fallback) => {\n          const value = Number(video.dataset[key]);\n          return Number.isFinite(value) && value >= 0 ? value : fallback;\n        };\n        const requestedEnd = number('loopEnd', 3);\n        const dwell = number('loopDwell', 700);\n        const midAt = number('midHoldAt', 0);\n        const midDwell = number('midHoldMs', 0);\n        let state = 'playing', midDone = false, seen = true;\n        let timer = 0, timerDue = 0, remaining = 0, afterTimer = null;\n        let frameCallback = 0, fadeTimer = 0;\n        const rect = frame.getBoundingClientRect();\n        seen = rect.bottom > 0 && rect.top < window.innerHeight;\n        const active = () => seen && !document.hidden && !reduced.matches;\n        const end = () => Number.isFinite(video.duration)\n          ? Math.min(requestedEnd, Math.max(0, video.duration - 0.04))\n          : requestedEnd;\n        const clearClock = () => {\n          if (timer) {\n            remaining = Math.max(0, timerDue - performance.now());\n            clearTimeout(timer);\n            timer = 0;\n          }\n        };\n        const resumeClock = () => {\n          if (!afterTimer || timer || !active()) return;\n          timerDue = performance.now() + remaining;\n          timer = setTimeout(() => {\n            timer = 0;\n            const callback = afterTimer;\n            afterTimer = null;\n            callback();\n          }, remaining);\n        };\n        const wait = (ms, callback) => {\n          clearClock();\n          remaining = ms;\n          afterTimer = callback;\n          resumeClock();\n        };\n        const cancelFrame = () => {\n          if (frameCallback && video.cancelVideoFrameCallback) video.cancelVideoFrameCallback(frameCallback);\n          else if (frameCallback) cancelAnimationFrame(frameCallback);\n          frameCallback = 0;\n        };\n        const play = () => {\n          if (!active()) return;\n          const promise = video.play();\n          if (promise && promise.catch) promise.catch(() => {});\n        };\n        const snapshot = () => {\n          if (!ctx || !video.videoWidth || !video.videoHeight) return;\n          canvas.width = video.videoWidth;\n          canvas.height = video.videoHeight;\n          try {\n            ctx.drawImage(video, 0, 0, canvas.width, canvas.height);\n            canvas.style.transition = 'none';\n            canvas.style.opacity = '1';\n          } catch (_) { canvas.style.opacity = '0'; }\n        };\n        const reveal = () => {\n          if (state !== 'reveal' || !active()) return;\n          state = 'playing';\n          canvas.style.transition = 'opacity 160ms linear';\n          requestAnimationFrame(() => { canvas.style.opacity = '0'; });\n          clearTimeout(fadeTimer);\n          fadeTimer = setTimeout(() => {\n            if (state === 'playing') canvas.style.transition = 'none';\n          }, 180);\n          watch();\n        };\n        const resetReady = () => {\n          state = 'reveal';\n          if (!active()) return;\n          play();\n          if (video.requestVideoFrameCallback) {\n            frameCallback = video.requestVideoFrameCallback(() => {\n              frameCallback = 0;\n              reveal();\n            });\n          } else requestAnimationFrame(reveal);\n        };\n        const reset = () => {\n          state = 'reset-seek';\n          midDone = false;\n          video.currentTime = 0;\n        };\n        const holdEnd = () => {\n          state = 'dwell';\n          snapshot();\n          wait(dwell, reset);\n        };\n        const finish = () => {\n          state = 'end-seek';\n          video.pause();\n          cancelFrame();\n          const target = end();\n          if (Math.abs(video.currentTime - target) > 0.01) video.currentTime = target;\n          else holdEnd();\n        };\n        const tick = time => {\n          if (state !== 'playing' || !active() || video.seeking) return;\n          if (time >= end()) { finish(); return; }\n          if (!midDone && midAt > 0 && midDwell > 0 && time >= midAt) {\n            midDone = true;\n            state = 'mid-dwell';\n            video.pause();\n            cancelFrame();\n            wait(midDwell, () => { state = 'playing'; play(); watch(); });\n          }\n        };\n        function watch() {\n          if (frameCallback || state !== 'playing' || !active()) return;\n          if (video.requestVideoFrameCallback) {\n            frameCallback = video.requestVideoFrameCallback((_, metadata) => {\n              frameCallback = 0;\n              tick(metadata.mediaTime);\n              watch();\n            });\n          } else {\n            frameCallback = requestAnimationFrame(() => {\n              frameCallback = 0;\n              tick(video.currentTime);\n              watch();\n            });\n          }\n        }\n        const sync = () => {\n          if (!active()) {\n            video.pause();\n            clearClock();\n            cancelFrame();\n            return;\n          }\n          if (afterTimer) resumeClock();\n          else if (state === 'reveal') resetReady();\n          else if (state === 'playing') { play(); watch(); }\n        };\n        controllers.push(sync);\n        ['autoplay', 'muted', 'loop', 'playsinline'].forEach(name => video.setAttribute(name, ''));\n        video.autoplay = video.muted = video.defaultMuted = video.loop = video.playsInline = true;\n        video.controls = false;\n        video.removeAttribute('controls');\n        video.addEventListener('timeupdate', () => tick(video.currentTime));\n        video.addEventListener('seeked', () => {\n          if (state === 'end-seek') holdEnd();\n          else if (state === 'reset-seek') resetReady();\n        });\n        video.addEventListener('loadedmetadata', sync);\n        video.addEventListener('canplay', sync);\n        document.addEventListener('visibilitychange', sync);\n        if ('IntersectionObserver' in window) {\n          const observer = new IntersectionObserver(entries => {\n            seen = entries[0].isIntersecting;\n            sync();\n          }, { threshold: 0.01 });\n          observer.observe(frame);\n        }\n        sync();\n      });\n      setReduced();\n      if (reduced.addEventListener) reduced.addEventListener('change', setReduced);\n      else reduced.addListener(setReduced);\n    });\n  };\n  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', init, { once: true });\n  else init();\n})();\n<\/script>\n<script id=\"filio-before-after-micro-cues-controller\" data-nowprocket data-cfasync=\"false\">\n(() => {\n  'use strict';\n  const init = () => {\n    const root = document.querySelector('.ff-before-after-final');\n    const video = root && root.querySelector('#ba-choose-after');\n    const cue = root && root.querySelector('[data-step=\"3\"] .ff-control-cue');\n    if (!video || !cue || video.dataset.ffCueReady === '1') return;\n    video.dataset.ffCueReady = '1';\n    let pending = 0;\n    const update = () => cue.classList.toggle('is-visible', !video.seeking && video.currentTime <= 1.02);\n    const watch = () => {\n      if (pending || video.paused || video.ended || !video.requestVideoFrameCallback) return;\n      pending = video.requestVideoFrameCallback(() => { pending = 0; update(); watch(); });\n    };\n    ['loadeddata', 'timeupdate', 'seeked', 'seeking'].forEach(event => video.addEventListener(event, update));\n    video.addEventListener('pause', () => {\n      if (pending && video.cancelVideoFrameCallback) video.cancelVideoFrameCallback(pending);\n      pending = 0;\n      update();\n    });\n    video.addEventListener('playing', () => { update(); watch(); });\n    update();\n    watch();\n  };\n  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', init, {once:true});\n  else init();\n})();\n<\/script>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Use Before &#038; After to connect an earlier project photo with a later photo and visually compare the documented conditions.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[227,130],"tags":[],"class_list":["post-14465","post","type-post","status-publish","format-standard","hentry","category-advanced-media-tools","category-filio-mobile-app"],"acf":[],"_links":{"self":[{"href":"https:\/\/academy.filio.io\/wp-json\/wp\/v2\/posts\/14465","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/academy.filio.io\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/academy.filio.io\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/academy.filio.io\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/academy.filio.io\/wp-json\/wp\/v2\/comments?post=14465"}],"version-history":[{"count":53,"href":"https:\/\/academy.filio.io\/wp-json\/wp\/v2\/posts\/14465\/revisions"}],"predecessor-version":[{"id":15124,"href":"https:\/\/academy.filio.io\/wp-json\/wp\/v2\/posts\/14465\/revisions\/15124"}],"wp:attachment":[{"href":"https:\/\/academy.filio.io\/wp-json\/wp\/v2\/media?parent=14465"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/academy.filio.io\/wp-json\/wp\/v2\/categories?post=14465"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/academy.filio.io\/wp-json\/wp\/v2\/tags?post=14465"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}