\n\t\t\t\t
\n\t\t\t\t\t\n\n\n \n \n
GSAP Scroll Sequence<\/title>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/gsap.min.js\"><\/script>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/ScrollTrigger.min.js\"><\/script>\n\n <style>\n \/* --- CONFIGURATION SETTINGS (CSS Variables) --- *\/\n #custom-scroll-sequence-root2 {\n --seq-width: 100%; \n --seq-height: 100vh; \n --seq-scroll-depth: 600vh; \/* Determines scroll duration (6x viewport height) *\/\n margin-bottom: 0px;\n }\n\n \/* --- CORE SEQUENCE STYLES --- *\/\n #custom-scroll-sequence-root2 {\n position: relative;\n width: 100%;\n height: var(--seq-scroll-depth);\n }\n\n .seq-sticky-wrapper2 {\n position: sticky;\n top: 0px; \n width: var(--seq-width);\n height: var(--seq-height);\n margin: 0 auto; \n background: #000;\n overflow: hidden;\n display: flex;\n justify-content: center;\n align-items: center;\n z-index: 10;\n }\n\n #seq-canvas2 {\n position: absolute;\n top: 0; left: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n z-index: 1;\n }\n\n \/* --- LOADER STYLES --- *\/\n .seq-loader-overlay {\n position: absolute;\n top: 0; \n left: 0;\n width: 100%;\n height: 100vh; \n background: #000;\n z-index: 100; \/* Sit on top of everything *\/\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n transition: opacity 0.5s ease-out; \/* Smooth fade out *\/\n }\n\n .seq-spinner {\n width: 120px;\n height: 20px;\n background: \n linear-gradient(#25b09b 0 0) left -40px top 0\/40px 20px,\n linear-gradient(#ddd 0 0) center\/100% 50%; \n background-repeat: no-repeat;\n animation: l5 1s infinite linear;\n margin-bottom: 15px;\n }\n @keyframes l5 {\n 100% {background-position: right -40px top 0,center}\n }\n\n .seq-loading-text {\n color: #fff;\n font-family: sans-serif;\n font-size: 14px;\n font-weight: 600;\n letter-spacing: 1px;\n }\n\n \/* --- TEXT STYLES (currently empty, but kept for future expansion) --- *\/\n .seq-text-slide {\n position: absolute;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n opacity: 0;\n padding: 20px;\n box-sizing: border-box;\n pointer-events: none;\n z-index: 20;\n }\n\n .seq-text-slide h2 {\n font-size: clamp(20px, 5vw, 50px);\n line-height: 1.2;\n color: white;\n margin: 0;\n font-weight: 700;\n text-shadow: 0 2px 10px rgba(0,0,0,0.8);\n }\n\n .seq-char2 {\n opacity: 0.15;\n color: #777;\n transition: opacity 0.1s;\n display: inline-block;\n }\n \n \/* --- MEDIA QUERIES --- *\/\n @media (max-width: 991.98px) {\n #custom-scroll-sequence-root2 {\n --seq-width: 100%;\n --seq-height: 90vh;\n }\n }\n <\/style>\n<\/head>\n<body>\n\n <div id=\"custom-scroll-sequence-root2\">\n <div class=\"seq-loader-overlay\" id=\"seq-loader\">\n <div class=\"seq-spinner\"><\/div>\n <div class=\"seq-loading-text\" id=\"seq-loading-text\">LOADING 0%<\/div>\n <\/div>\n\n <div class=\"seq-sticky-wrapper2\" id=\"seq-wrapper2\">\n <canvas id=\"seq-canvas2\"><\/canvas>\n \n <div class=\"seq-text-overlay\">\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n document.addEventListener(\"DOMContentLoaded\", function() {\n \n \/\/ --- 1. CONFIGURATION ---\n const frameCount = 268; \n\n \/\/ URL GENERATOR: Creates the file path for each frame (0001.webp to 0268.webp)\n const currentFrame = index => \n `http:\/\/tarzantransport.zaledigital.com\/wp-content\/uploads\/2025\/12\/Hero-Video-2jpg${(index + 1).toString().padStart(4, '0')}.webp`;\n\n \/\/ ----------------------------------------------\n\n \/\/ SAFETY CHECK\n if (typeof gsap === 'undefined' || typeof ScrollTrigger === 'undefined') {\n console.error(\"GSAP or ScrollTrigger not loaded.\");\n return;\n }\n\n gsap.registerPlugin(ScrollTrigger);\n\n const canvas = document.getElementById(\"seq-canvas2\");\n const context = canvas.getContext(\"2d\");\n const wrapper = document.getElementById(\"seq-wrapper2\");\n \n \/\/ LOADER ELEMENTS\n const loaderOverlay = document.getElementById(\"seq-loader\");\n const loaderText = document.getElementById(\"seq-loading-text\");\n\n const images = [];\n const sequenceState = { frame: 0 };\n let imagesLoaded = 0;\n\n \/\/ --- LOAD IMAGES ---\n for (let i = 0; i < frameCount; i++) {\n const img = new Image();\n img.src = currentFrame(i);\n \n img.onload = () => {\n imagesLoaded++;\n \n \/\/ Update Percentage Text\n const percent = Math.round((imagesLoaded \/ frameCount) * 100);\n if(loaderText) loaderText.innerText = `LOADING ${percent}%`;\n\n if (imagesLoaded === frameCount) {\n \/\/ All images loaded:\n \/\/ 1. Initial Render\n render(); \n \/\/ 2. Hide Loader (The spinner is inside this element)\n gsap.to(loaderOverlay, { \n opacity: 0, \n duration: 0.5, \n onComplete: () => loaderOverlay.style.display = \"none\" \n });\n \/\/ 3. Start Animation Logic\n startAnimation();\n }\n };\n \n img.onerror = () => {\n console.error(\"Could not load image:\", img.src);\n \/\/ Crucial: Count failed image so the loader doesn't get stuck forever\n imagesLoaded++; \n\n \/\/ Update percentage for error too\n const percent = Math.round((imagesLoaded \/ frameCount) * 100);\n if(loaderText) loaderText.innerText = `LOADING ${percent}%`;\n };\n \n images.push(img);\n }\n\n \/\/ --- RENDER FUNCTION ---\n function render() {\n canvas.width = wrapper.clientWidth;\n canvas.height = wrapper.clientHeight;\n \n \/\/ Ensure integer frame\n let frameIndex = Math.min(frameCount - 1, Math.floor(sequenceState.frame));\n \n const img = images[frameIndex];\n if (img) {\n \/\/ Calculate aspect ratio for object-fit: cover behavior\n const hRatio = canvas.width \/ img.width;\n const vRatio = canvas.height \/ img.height;\n const ratio = Math.max(hRatio, vRatio); \/\/ Use max ratio for \"cover\"\n \n const centerShift_x = (canvas.width - img.width * ratio) \/ 2;\n const centerShift_y = (canvas.height - img.height * ratio) \/ 2;\n \n context.clearRect(0, 0, canvas.width, canvas.height);\n context.drawImage(img, \n 0, 0, img.width, img.height, \/\/ Source dimensions\n centerShift_x, centerShift_y, img.width * ratio, img.height * ratio \/\/ Destination dimensions\n );\n }\n }\n\n \/\/ --- ANIMATION SETUP ---\n function startAnimation() {\n \n gsap.to(sequenceState, {\n frame: frameCount - 1,\n snap: \"frame\", \/\/ Ensure we land on whole frame numbers\n ease: \"none\",\n scrollTrigger: {\n trigger: \"#custom-scroll-sequence-root2\",\n start: \"top top\", \/\/ Start when the top of the container hits the top of the viewport\n end: \"bottom bottom\", \/\/ End when the bottom of the container hits the bottom of the viewport\n scrub: 0, \/\/ Link the animation to the scroll position\n },\n onUpdate: render \/\/ Call the render function on every frame update\n });\n\n }\n\n \/\/ Handle resizing to keep the canvas filling the sticky wrapper\n window.addEventListener(\"resize\", render);\n });\n <\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-f53f4b1 elementor-hidden-desktop elementor-hidden-tablet e-flex e-con-boxed e-con e-parent\" data-id=\"f53f4b1\" data-element_type=\"container\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1b39b88 elementor-widget elementor-widget-video\" data-id=\"1b39b88\" data-element_type=\"widget\" data-settings=\"{"video_type":"hosted","autoplay":"yes","play_on_mobile":"yes","mute":"yes","loop":"yes"}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"e-hosted-video elementor-wrapper elementor-open-inline\">\n\t\t\t\t\t<video class=\"elementor-video\" src=\"http:\/\/tarzantransport.zaledigital.com\/wp-content\/uploads\/2025\/12\/Tarzan-hero-video-1.mp4\" autoplay=\"\" loop=\"\" muted=\"muted\" playsinline=\"\" controlsList=\"nodownload\"><\/video>\n\t\t\t\t<\/div>\n\t\t\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<div class=\"elementor-element elementor-element-107d30c e-flex e-con-boxed e-con e-parent\" data-id=\"107d30c\" data-element_type=\"container\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2c7022d elementor-widget elementor-widget-heading\" data-id=\"2c7022d\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">We Ship Everywhere<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9c573bc elementor-widget elementor-widget-heading\" data-id=\"9c573bc\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<p class=\"elementor-heading-title elementor-size-default\">Serving Every State in the USA including <span style=\"font-weight: bold;color: #ffd336\">Alaska and Mexico<\/span> & All Provinces in Canada with Flatbed Hauling<\/p>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0cfec37 elementor-widget elementor-widget-image\" data-id=\"0cfec37\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"1920\" height=\"1080\" src=\"https:\/\/tarzantransport.zaledigital.com\/wp-content\/uploads\/2025\/12\/ezgif-frame-080.jpg\" class=\"attachment-full size-full wp-image-2491\" alt=\"\" srcset=\"https:\/\/tarzantransport.zaledigital.com\/wp-content\/uploads\/2025\/12\/ezgif-frame-080.jpg 1920w, https:\/\/tarzantransport.zaledigital.com\/wp-content\/uploads\/2025\/12\/ezgif-frame-080-300x169.jpg 300w, https:\/\/tarzantransport.zaledigital.com\/wp-content\/uploads\/2025\/12\/ezgif-frame-080-1024x576.jpg 1024w, https:\/\/tarzantransport.zaledigital.com\/wp-content\/uploads\/2025\/12\/ezgif-frame-080-768x432.jpg 768w, https:\/\/tarzantransport.zaledigital.com\/wp-content\/uploads\/2025\/12\/ezgif-frame-080-1536x864.jpg 1536w\" sizes=\"(max-width: 1920px) 100vw, 1920px\" \/>\t\t\t\t\t\t\t\t\t\t\t\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<div class=\"elementor-element elementor-element-c239d3b e-con-full elementor-hidden-desktop elementor-hidden-tablet elementor-hidden-mobile e-flex e-con e-child\" data-id=\"c239d3b\" data-element_type=\"container\" data-settings=\"{"background_background":"classic"}\">\n\t\t<div class=\"elementor-element elementor-element-842799e e-flex e-con-boxed e-con e-child\" data-id=\"842799e\" 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-00f93b0 elementor-widget elementor-widget-html\" data-id=\"00f93b0\" 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<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/gsap.min.js\"><\/script>\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/ScrollTrigger.min.js\"><\/script>\n\n<style>\n \/* --- CONFIGURATION SETTINGS --- *\/\n #custom-scroll-sequence-root {\n \/* Width of your video box (80% of screen width, or use pixels like 800px) *\/\n --seq-width: 80%; \n \n \/* Height of your video box *\/\n --seq-height: 500px; \n \n \/* How long the scroll lasts (Higher number = Slower video) *\/\n --seq-scroll-depth: 600vh; \n }\n\n \/* --- STYLES --- *\/\n \/* Root container to scope styles so they don't break your theme *\/\n #custom-scroll-sequence-root {\n position: relative;\n width: 100%;\n height: var(--seq-scroll-depth); \/* Defines the scroll track length *\/\n margin-bottom: 100px; \/* Spacing after the section *\/\n }\n\n \/* The Sticky Box (The Video Player) *\/\n .seq-sticky-wrapper {\n position: sticky;\n top: 200px; \/* Distance from top of screen *\/\n width: var(--seq-width);\n height: var(--seq-height);\n margin: 0 auto; \/* Centers the box *\/\n background: #000;\n border-radius: 15px;\n overflow: hidden;\n box-shadow: 0 20px 50px rgba(0,0,0,0.4);\n display: flex;\n justify-content: center;\n align-items: center;\n z-index: 10;\n }\n\n \/* The Canvas (Video) *\/\n #seq-canvas {\n position: absolute;\n top: 0; left: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n z-index: 1;\n }\n\n \/* Text Overlay Area *\/\n .seq-text-overlay {\n position: absolute;\n top: 0; left: 0;\n width: 100%;\n height: 100%;\n z-index: 20;\n pointer-events: none; \/* Let clicks pass through *\/\n }\n\n \/* Individual Text Slides *\/\n .seq-text-slide {\n position: absolute;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n opacity: 0; \/* Hidden initially *\/\n padding: 20px;\n box-sizing: border-box;\n }\n\n \/* Typography *\/\n .seq-text-slide h2 {\n \/* Smart sizing: Min 20px, Max 50px, otherwise 5% of screen width *\/\n font-size: clamp(20px, 5vw, 50px);\n line-height: 1.2;\n color: white; \/* Default color if animation fails *\/\n margin: 0;\n font-weight: 700;\n text-shadow: 0 2px 10px rgba(0,0,0,0.8);\n }\n\n \/* Animation Chars *\/\n .seq-char {\n opacity: 0.15; \/* Dimmed state *\/\n color: #777;\n transition: opacity 0.1s;\n display: inline-block; \/* Fixes some spacing issues *\/\n }\n \n \/* Loading Indicator *\/\n .seq-loader {\n position: absolute;\n top: 50%; left: 50%;\n transform: translate(-50%, -50%);\n color: #ccff00;\n font-family: sans-serif;\n font-weight: bold;\n z-index: 50;\n }\n \n @media (max-width: 991.98px) {\n .seq-sticky-wrapper {\n width: 95%;\n height: 400px;\n top: min(30vh,250px);\n }\n }\n\n @media (max-width: 575.98px) {\n .seq-sticky-wrapper {\n height: 300px;\n }\n }\n<\/style>\n\n<div id=\"custom-scroll-sequence-root\">\n \n <!--<div class=\"seq-loader\">Loading Video...<\/div>-->\n\n <div class=\"seq-sticky-wrapper\" id=\"seq-wrapper\">\n <canvas id=\"seq-canvas\"><\/canvas>\n <\/div>\n<\/div>\n\n<script>\ndocument.addEventListener(\"DOMContentLoaded\", function() {\n \n \/\/ --- 1. CONFIGURATION (UPDATE THIS SECTION) ---\n \n \/\/ Total number of images in your sequence\n const frameCount = 80; \n\n \/\/ URL GENERATOR\n \/\/ REPLACE the URL below with your WordPress Media Library URL.\n \/\/ Ensure the filename part matches your pattern (e.g., frame_001.jpg).\n const currentFrame = index => \n `https:\/\/tarzantransport.ca\/wp-content\/uploads\/2025\/12\/ezgif-frame-${(index + 1).toString().padStart(3, '0')}.jpg`;\n\n \/\/ ----------------------------------------------\n\n \/\/ SAFETY CHECK: Ensure GSAP is loaded\n if (typeof gsap === 'undefined' || typeof ScrollTrigger === 'undefined') {\n console.error(\"GSAP not loaded yet. Waiting...\");\n setTimeout(initSequence, 500); \/\/ Retry after 500ms\n return;\n } else {\n initSequence();\n }\n\n function initSequence() {\n gsap.registerPlugin(ScrollTrigger);\n\n const canvas = document.getElementById(\"seq-canvas\");\n const context = canvas.getContext(\"2d\");\n const wrapper = document.getElementById(\"seq-wrapper\");\n \/\/ const loader = document.querySelector(\".seq-loader\");\n \n const images = [];\n const sequenceState = { frame: 0 };\n let imagesLoaded = 0;\n\n \/\/ --- LOAD IMAGES ---\n for (let i = 0; i < frameCount; i++) {\n const img = new Image();\n img.src = currentFrame(i);\n img.onload = () => {\n imagesLoaded++;\n if (imagesLoaded === frameCount) {\n \/\/ if(loader) loader.style.display = \"none\";\n render();\n startAnimation();\n }\n };\n img.onerror = () => {\n console.error(\"Could not load image:\", img.src);\n };\n images.push(img);\n }\n\n \/\/ --- RENDER ---\n function render() {\n \/\/ Match canvas size to the CSS wrapper size\n canvas.width = wrapper.clientWidth;\n canvas.height = wrapper.clientHeight;\n \n const img = images[sequenceState.frame];\n if (img) {\n \/\/ Calculate \"cover\" fit\n const hRatio = canvas.width \/ img.width;\n const vRatio = canvas.height \/ img.height;\n const ratio = Math.max(hRatio, vRatio);\n const centerShift_x = (canvas.width - img.width * ratio) \/ 2;\n const centerShift_y = (canvas.height - img.height * ratio) \/ 2;\n \n context.clearRect(0, 0, canvas.width, canvas.height);\n context.drawImage(img, 0, 0, img.width, img.height, centerShift_x, centerShift_y, img.width * ratio, img.height * ratio);\n }\n }\n\n \/\/ --- ANIMATION ---\n function startAnimation() {\n \n \/\/ 1. Video Scrub\n gsap.to(sequenceState, {\n frame: frameCount - 1,\n snap: \"frame\",\n ease: \"none\",\n scrollTrigger: {\n trigger: \"#custom-scroll-sequence-root\",\n start: \"top center\", \n end: \"bottom bottom\",\n scrub: 0,\n },\n onUpdate: render\n });\n\n \/\/ 2. Text Logic\n const slides = document.querySelectorAll(\".seq-text-slide\");\n const timeline = gsap.timeline({\n scrollTrigger: {\n trigger: \"#custom-scroll-sequence-root\",\n start: \"top center\",\n end: \"bottom bottom\",\n scrub: true\n }\n });\n\n slides.forEach((slide, i) => {\n const textEl = slide.querySelector(\".seq-anim-text\");\n const targetColor = textEl.getAttribute(\"data-color\") || \"#ccff00\"; \/\/ Default Lime\n\n \/\/ Split text\n const chars = textEl.innerText.split(\"\");\n textEl.innerHTML = \"\";\n chars.forEach(char => {\n const span = document.createElement(\"span\");\n span.innerText = char;\n span.classList.add(\"seq-char\");\n if (char === \" \") span.style.marginRight = \"0.3em\";\n textEl.appendChild(span);\n });\n\n \/\/ Calculate Timing Slots\n const duration = 1 \/ slides.length;\n const startTime = i * duration;\n const endTime = (i + 1) * duration;\n\n \/\/ Animation Sequence\n \/\/ A. Fade In Container\n timeline.to(slide, { opacity: 1, duration: 0.05 }, startTime);\n\n \/\/ B. Light up characters\n timeline.to(textEl.querySelectorAll(\".seq-char\"), {\n color: targetColor,\n opacity: 1,\n stagger: 0.02, \n }, startTime);\n\n \/\/ C. Fade Out Container (at the end of its slot)\n timeline.to(slide, { opacity: 0, duration: 0.05 }, endTime - 0.05);\n });\n }\n\n \/\/ Handle Resizing\n window.addEventListener(\"resize\", render);\n }\n});\n<\/script>\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<div class=\"elementor-element elementor-element-621ac48 e-con-full e-flex e-con e-parent\" data-id=\"621ac48\" data-element_type=\"container\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-faf6356 elementor-widget elementor-widget-heading\" data-id=\"faf6356\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">OUR COMPREHENSIVE TRANSPORTATION SOLUTIONS<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-498cec1 e-con-full animation-section e-flex e-con e-child\" data-id=\"498cec1\" data-element_type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-d31848b e-con-full e-flex e-con e-child\" data-id=\"d31848b\" data-element_type=\"container\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7b3e707 elementor-widget elementor-widget-heading\" data-id=\"7b3e707\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Flatbed Trucking<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-71b92e7 elementor-widget elementor-widget-text-editor\" data-id=\"71b92e7\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Reliable, secure transportation for all types of cargo, ensuring your shipment reaches safely and on time.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-3520a66 e-con-full e-flex e-con e-child\" data-id=\"3520a66\" data-element_type=\"container\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-439e818 elementor-widget elementor-widget-heading\" data-id=\"439e818\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Heavy Haul Services<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0d6e24f elementor-widget elementor-widget-text-editor\" data-id=\"0d6e24f\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Oversized and heavy items are expertly handled and delivered across long distances with precision and care.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-bc253d4 e-con-full e-flex e-con e-child\" data-id=\"bc253d4\" data-element_type=\"container\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ad563b3 elementor-widget elementor-widget-heading\" data-id=\"ad563b3\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Oversized Load Transport<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ac275b7 elementor-widget elementor-widget-text-editor\" data-id=\"ac275b7\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Specialized solutions for huge, complex goods to ensure safe, efficient, and timely delivery.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-1fc3c8c e-con-full e-flex e-con e-child\" data-id=\"1fc3c8c\" data-element_type=\"container\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-913a440 elementor-widget elementor-widget-heading\" data-id=\"913a440\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Regional & Long haul Transport<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e3c1dcd elementor-widget elementor-widget-text-editor\" data-id=\"e3c1dcd\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>From local deliveries to cross-country hauls, we provide trusted, on-time service wherever you need it.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-df54464 elementor-widget elementor-widget-html\" data-id=\"df54464\" 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<style>\n\/* Desktop styles (Default) *\/\n.animation-section .elementor-widget {\n width: 400px;\n opacity: 0;\n transition: all 0.5s ease;\n}\n\n.animation-section .elementor-container {\n display: flex;\n flex-wrap: nowrap;\n}\n\n.animation-section .elementor-widget-wrap {\n display: flex;\n flex-direction: column;\n gap: 20px;\n transition: all 0.3s linear !important;\n}\n\n.animation-section .e-child {\n min-width: 1px;\n overflow: hidden;\n transition: all 0.5s ease;\n}\n\n.animation-section .e-child:hover {\n width: 100%;\n}\n\n.animation-section .e-child:hover .elementor-widget {\n opacity: 1;\n}\n\n\/* Tablet *\/\n@media (max-width: 1024px) {\n .animation-section .elementor-widget {\n width: 300px;\n }\n}\n\n\/* Mobile (Overrides desktop hover behavior) *\/\n@media (max-width: 767px) {\n .animation-section .elementor-container {\n flex-wrap: wrap;\n }\n\n .animation-section .elementor-widget {\n opacity: 0;\n max-height: 0;\n overflow: hidden;\n transition: all 0.5s ease;\n }\n\n .animation-section .e-child:hover .elementor-widget {\n opacity: 0; \/* prevent accidental hover on mobile *\/\n }\n\n .animation-section .e-child.active .elementor-widget {\n opacity: 1;\n max-height: 1000px;\n overflow: visible;\n }\n}\n<\/style>\n\n\n<script>\ndocument.addEventListener(\"DOMContentLoaded\", function () {\n const children = document.querySelectorAll(\".animation-section .e-child\");\n\n children.forEach(child => {\n child.addEventListener(\"click\", function () {\n \/\/ Optional: remove active from all others if you want accordion-like behavior\n children.forEach(c => {\n if (c !== child) c.classList.remove(\"active\");\n });\n child.classList.toggle(\"active\");\n });\n });\n});\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-9a4fabe e-con-full e-flex e-con e-parent\" data-id=\"9a4fabe\" data-element_type=\"container\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-98b76a2 elementor-widget elementor-widget-heading\" data-id=\"98b76a2\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Certifications<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-7fe7aaf e-flex e-con-boxed e-con e-child\" data-id=\"7fe7aaf\" 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-4ae7299 elementor-widget elementor-widget-image\" data-id=\"4ae7299\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"300\" height=\"150\" src=\"https:\/\/tarzantransport.zaledigital.com\/wp-content\/uploads\/2025\/12\/Group-9.webp\" class=\"attachment-large size-large wp-image-3255\" alt=\"\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8c5d2d5 elementor-widget elementor-widget-image\" data-id=\"8c5d2d5\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"300\" height=\"150\" src=\"https:\/\/tarzantransport.zaledigital.com\/wp-content\/uploads\/2025\/12\/gsjhjm1ekhyxiunjl6w0.webp\" class=\"attachment-large size-large wp-image-3219\" alt=\"\" \/>\t\t\t\t\t\t\t\t\t\t\t\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 class=\"elementor-element elementor-element-8551b05 elementor-hidden-desktop elementor-hidden-tablet elementor-hidden-mobile elementor-widget elementor-widget-heading\" data-id=\"8551b05\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">COMPANIES WORKED WITH<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-72f28f7 elementor-hidden-desktop elementor-hidden-tablet elementor-hidden-mobile elementor-widget elementor-widget-html\" data-id=\"72f28f7\" 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<div class=\"infinite-slider\">\n <div class=\"infinite-track\">\n\n <!-- IMAGES (duplicate each once for perfect infinite loop) -->\n <img decoding=\"async\" src=\"https:\/\/tarzantransport.ca\/wp-content\/uploads\/2025\/12\/zcwjljpgyksxxfaallsd.webp\">\n <img decoding=\"async\" src=\"https:\/\/tarzantransport.ca\/wp-content\/uploads\/2025\/12\/rrb4vcbzsy9wc3xxoogt.webp\">\n <img decoding=\"async\" src=\"https:\/\/tarzantransport.ca\/wp-content\/uploads\/2025\/12\/qm6tkc693riyrf7gigz5.webp\">\n <img decoding=\"async\" src=\"https:\/\/tarzantransport.ca\/wp-content\/uploads\/2025\/12\/gsro3sfgtw4is3dyfxew.webp\">\n <img decoding=\"async\" src=\"https:\/\/tarzantransport.ca\/wp-content\/uploads\/2025\/12\/gsjhjm1ekhyxiunjl6w0.webp\">\n <img decoding=\"async\" src=\"https:\/\/tarzantransport.ca\/wp-content\/uploads\/2025\/12\/cix2w0elzruw0vyprwle.webp\">\n <img decoding=\"async\" src=\"https:\/\/tarzantransport.ca\/wp-content\/uploads\/2025\/12\/Group-9.webp\">\n\n <!-- DUPLICATE FOR LOOP -->\n <img decoding=\"async\" src=\"https:\/\/tarzantransport.ca\/wp-content\/uploads\/2025\/12\/zcwjljpgyksxxfaallsd.webp\">\n <img decoding=\"async\" src=\"https:\/\/tarzantransport.ca\/wp-content\/uploads\/2025\/12\/rrb4vcbzsy9wc3xxoogt.webp\">\n <img decoding=\"async\" src=\"https:\/\/tarzantransport.ca\/wp-content\/uploads\/2025\/12\/qm6tkc693riyrf7gigz5.webp\">\n <img decoding=\"async\" src=\"https:\/\/tarzantransport.ca\/wp-content\/uploads\/2025\/12\/gsro3sfgtw4is3dyfxew.webp\">\n <img decoding=\"async\" src=\"https:\/\/tarzantransport.ca\/wp-content\/uploads\/2025\/12\/gsjhjm1ekhyxiunjl6w0.webp\">\n <img decoding=\"async\" src=\"https:\/\/tarzantransport.ca\/wp-content\/uploads\/2025\/12\/cix2w0elzruw0vyprwle.webp\">\n <img decoding=\"async\" src=\"https:\/\/tarzantransport.ca\/wp-content\/uploads\/2025\/12\/Group-9.webp\">\n\n <\/div>\n<\/div>\n\n<style>\n.infinite-slider {\n width: 100%;\n overflow: hidden;\n padding: 20px 0;\n}\n\n.infinite-track {\n display: flex;\n width: max-content;\n animation: scrollSlider 30s linear infinite;\n}\n\n.infinite-track img {\n \n height: 150px;\n object-fit: cover;\n margin-right: 20px;\n border-radius: 15px;\n transition: transform 0.4s ease;\n}\n\n.infinite-track img:hover {\n transform: scale(1.05); \/* zoom on hover *\/\n}\n\n@keyframes scrollSlider {\n 0% { transform: translateX(0); }\n 100% { transform: translateX(-50%); }\n}\n\n\/* RESPONSIVE *\/\n@media (max-width: 768px) {\n .infinite-track img {\n width: 180px;\n height: 110px;\n }\n}\n<\/style>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-847a7a4 e-con-full e-flex e-con e-parent\" data-id=\"847a7a4\" data-element_type=\"container\" data-settings=\"{"background_background":"classic"}\">\n\t\t<div class=\"elementor-element elementor-element-c3e3370 e-con-full e-flex e-con e-child\" data-id=\"c3e3370\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-28dad9b elementor-widget-mobile__width-inherit elementor-widget elementor-widget-counter\" data-id=\"28dad9b\" data-element_type=\"widget\" data-widget_type=\"counter.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-counter\">\n\t\t\t<div class=\"elementor-counter-title\">Miles Driven<\/div>\t\t\t<div class=\"elementor-counter-number-wrapper\">\n\t\t\t\t<span class=\"elementor-counter-number-prefix\"><\/span>\n\t\t\t\t<span class=\"elementor-counter-number\" data-duration=\"4000\" data-to-value=\"20\" data-from-value=\"0\" data-delimiter=\",\">0<\/span>\n\t\t\t\t<span class=\"elementor-counter-number-suffix\">M<\/span>\n\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-e19043a e-con-full e-flex e-con e-child\" data-id=\"e19043a\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-755b146 elementor-widget-mobile__width-inherit elementor-widget elementor-widget-counter\" data-id=\"755b146\" data-element_type=\"widget\" data-widget_type=\"counter.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-counter\">\n\t\t\t<div class=\"elementor-counter-title\">Deliveries<\/div>\t\t\t<div class=\"elementor-counter-number-wrapper\">\n\t\t\t\t<span class=\"elementor-counter-number-prefix\"><\/span>\n\t\t\t\t<span class=\"elementor-counter-number\" data-duration=\"2000\" data-to-value=\"40\" data-from-value=\"0\" data-delimiter=\",\">0<\/span>\n\t\t\t\t<span class=\"elementor-counter-number-suffix\">K+<\/span>\n\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-ba1fb7d e-con-full e-flex e-con e-child\" data-id=\"ba1fb7d\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-96256aa elementor-widget-mobile__width-inherit elementor-widget elementor-widget-counter\" data-id=\"96256aa\" data-element_type=\"widget\" data-widget_type=\"counter.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-counter\">\n\t\t\t<div class=\"elementor-counter-title\">Trucks<\/div>\t\t\t<div class=\"elementor-counter-number-wrapper\">\n\t\t\t\t<span class=\"elementor-counter-number-prefix\"><\/span>\n\t\t\t\t<span class=\"elementor-counter-number\" data-duration=\"2000\" data-to-value=\"30\" data-from-value=\"0\" data-delimiter=\",\">0<\/span>\n\t\t\t\t<span class=\"elementor-counter-number-suffix\">+<\/span>\n\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\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>GSAP Scroll Sequence LOADING 0% http:\/\/tarzantransport.zaledigital.com\/wp-content\/uploads\/2025\/12\/Tarzan-hero-video-1.mp4 We Ship Everywhere Serving Every State in the USA including Alaska and Mexico & All Provinces in Canada with Flatbed Hauling OUR COMPREHENSIVE TRANSPORTATION SOLUTIONS Flatbed Trucking Reliable, secure transportation for all types of cargo, ensuring your shipment reaches safely and on time. Heavy Haul Services Oversized and heavy […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-1193","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/tarzantransport.zaledigital.com\/index.php?rest_route=\/wp\/v2\/pages\/1193","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tarzantransport.zaledigital.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tarzantransport.zaledigital.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tarzantransport.zaledigital.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tarzantransport.zaledigital.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1193"}],"version-history":[{"count":455,"href":"https:\/\/tarzantransport.zaledigital.com\/index.php?rest_route=\/wp\/v2\/pages\/1193\/revisions"}],"predecessor-version":[{"id":3392,"href":"https:\/\/tarzantransport.zaledigital.com\/index.php?rest_route=\/wp\/v2\/pages\/1193\/revisions\/3392"}],"wp:attachment":[{"href":"https:\/\/tarzantransport.zaledigital.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1193"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}