Company History Timeline<\/title>\r\n <style>\r\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@600&family=Inter:wght@400&display=swap');\r\n \r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n body {\r\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;\r\n background-color: #f5f5f5;\r\n color: #1d1d1f;\r\n line-height: 1.6;\r\n min-height: 100vh;\r\n }\r\n\r\n .container {\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n padding: 20px;\r\n }\r\n\r\n \/* Timeline Container - Liquid Glass Effect *\/\r\n .timeline-container {\r\n background: rgba(255, 255, 255, 0.25);\r\n backdrop-filter: blur(20px);\r\n -webkit-backdrop-filter: blur(20px);\r\n padding: 40px;\r\n border-radius: 24px;\r\n border: 1px solid rgba(255, 255, 255, 0.18);\r\n box-shadow: \r\n 0 8px 32px rgba(31, 38, 135, 0.37),\r\n inset 0 1px 0 rgba(255, 255, 255, 0.4);\r\n min-height: 600px;\r\n display: flex;\r\n flex-direction: column;\r\n position: relative;\r\n }\r\n\r\n \/* Year Navigation - Clean Glass Design *\/\r\n .year-navigation {\r\n margin-bottom: 40px;\r\n position: relative;\r\n flex-shrink: 0;\r\n }\r\n\r\n .years-row {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n margin-bottom: 20px;\r\n flex-wrap: wrap;\r\n gap: 12px;\r\n position: relative;\r\n }\r\n\r\n .year-button {\r\n background: rgba(255, 255, 255, 0.2);\r\n backdrop-filter: blur(10px);\r\n -webkit-backdrop-filter: blur(10px);\r\n font-size: 15px;\r\n font-weight: 500;\r\n color: #666;\r\n cursor: pointer;\r\n padding: 12px 20px;\r\n border-radius: 12px;\r\n transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);\r\n position: relative;\r\n flex: 0 0 auto;\r\n min-width: 70px;\r\n text-align: center;\r\n box-shadow: \r\n 0 4px 16px rgba(31, 38, 135, 0.15),\r\n 0 1px 0 rgba(255, 255, 255, 0.4) inset,\r\n 0 0 0 1px rgba(255, 255, 255, 0.1);\r\n border: none;\r\n overflow: hidden;\r\n white-space: nowrap;\r\n }\r\n\r\n \/* Ensure single line at full width *\/\r\n @media (min-width: 1024px) {\r\n .years-row {\r\n flex-wrap: nowrap;\r\n gap: 10px;\r\n }\r\n \r\n .year-button {\r\n padding: 12px 16px;\r\n min-width: 65px;\r\n }\r\n }\r\n\r\n .year-button:hover {\r\n background: rgba(255, 255, 255, 0.3);\r\n color: #8293C4;\r\n transform: translateY(-2px);\r\n box-shadow: \r\n 0 8px 24px rgba(31, 38, 135, 0.2),\r\n 0 1px 0 rgba(255, 255, 255, 0.5) inset,\r\n 0 0 0 1px rgba(255, 255, 255, 0.15);\r\n }\r\n\r\n .year-button.active {\r\n background: rgba(255, 255, 255, 0.9);\r\n color: #3552A4;\r\n font-weight: 600;\r\n box-shadow: \r\n 0 6px 20px rgba(31, 38, 135, 0.25),\r\n 0 1px 0 rgba(255, 255, 255, 0.8) inset,\r\n 0 0 0 1px rgba(255, 255, 255, 0.2);\r\n }\r\n\r\n .year-button.active:hover {\r\n transform: translateY(-2px);\r\n background: rgba(255, 255, 255, 0.95);\r\n color: #3552A4;\r\n }\r\n\r\n \/* Content Wrapper - Clean Glass Container *\/\r\n #timelineContent {\r\n position: relative;\r\n overflow: hidden;\r\n width: 100%;\r\n flex: 1;\r\n display: flex;\r\n align-items: center;\r\n min-height: 500px;\r\n }\r\n\r\n \/* Content Section - Clean Glass with Proper Corner Handling *\/\r\n .timeline-content {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n padding: 40px;\r\n border-radius: 20px;\r\n box-sizing: border-box;\r\n opacity: 0;\r\n transform: translateX(100%);\r\n transition: none;\r\n display: flex;\r\n align-items: center;\r\n overflow: hidden;\r\n isolation: isolate;\r\n background: transparent;\r\n }\r\n\r\n \/* Backdrop filter layer - properly contained within border-radius *\/\r\n .timeline-content::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background: rgba(255, 255, 255, 0.15);\r\n backdrop-filter: blur(20px);\r\n -webkit-backdrop-filter: blur(20px);\r\n border-radius: 20px;\r\n z-index: -1;\r\n box-shadow: \r\n 0 8px 32px rgba(31, 38, 135, 0.2),\r\n 0 1px 0 rgba(255, 255, 255, 0.3) inset,\r\n 0 0 0 1px rgba(255, 255, 255, 0.1);\r\n }\r\n\r\n \/* Slide positioning classes - Smooth Glass Transitions *\/\r\n .timeline-content.visible {\r\n opacity: 1;\r\n transform: translateX(0);\r\n }\r\n\r\n .timeline-content.animating {\r\n transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);\r\n }\r\n\r\n \/* Starting positions for entering content *\/\r\n .timeline-content.start-from-right {\r\n transform: translateX(100%);\r\n opacity: 0;\r\n }\r\n\r\n .timeline-content.start-from-left {\r\n transform: translateX(-100%);\r\n opacity: 0;\r\n }\r\n\r\n \/* Ending positions for exiting content *\/\r\n .timeline-content.exit-to-left {\r\n transform: translateX(-100%);\r\n opacity: 0;\r\n }\r\n\r\n .timeline-content.exit-to-right {\r\n transform: translateX(100%);\r\n opacity: 0;\r\n }\r\n\r\n \/* Ending position for entering content *\/\r\n .timeline-content.enter-center {\r\n transform: translateX(0);\r\n opacity: 1;\r\n }\r\n\r\n .content-grid {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 50px;\r\n align-items: center;\r\n width: 100%;\r\n }\r\n\r\n .content-text {\r\n padding-right: 30px;\r\n }\r\n\r\n .year-title {\r\n font-family: 'Montserrat', sans-serif;\r\n font-size: 2.8rem;\r\n font-weight: 700;\r\n color: #3552A4;\r\n margin-bottom: 15px;\r\n letter-spacing: -0.02em;\r\n }\r\n\r\n .milestone-title {\r\n font-family: 'Inter', sans-serif;\r\n font-size: 1.5rem;\r\n font-weight: 600;\r\n color: #1d1d1f;\r\n margin-bottom: 20px;\r\n letter-spacing: -0.01em;\r\n }\r\n\r\n .milestone-description {\r\n font-size: 1rem;\r\n color: #6e6e73;\r\n line-height: 1.6;\r\n font-weight: 400;\r\n }\r\n\r\n .content-image {\r\n width: 100%;\r\n height: 300px;\r\n border-radius: 16px;\r\n overflow: hidden;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n background: rgba(255, 255, 255, 0.15);\r\n backdrop-filter: blur(10px);\r\n -webkit-backdrop-filter: blur(10px);\r\n transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);\r\n box-shadow: \r\n 0 8px 24px rgba(31, 38, 135, 0.15),\r\n 0 1px 0 rgba(255, 255, 255, 0.2) inset,\r\n 0 0 0 1px rgba(255, 255, 255, 0.1);\r\n }\r\n\r\n .content-image:hover {\r\n transform: translateY(-4px);\r\n box-shadow: \r\n 0 16px 32px rgba(31, 38, 135, 0.2),\r\n 0 1px 0 rgba(255, 255, 255, 0.3) inset,\r\n 0 0 0 1px rgba(255, 255, 255, 0.15);\r\n }\r\n\r\n \/* Clean frame sizing *\/\r\n .content-image.horizontal {\r\n width: 100%;\r\n height: 300px;\r\n }\r\n\r\n .content-image.vertical {\r\n width: 75%;\r\n height: 400px;\r\n margin: 0 auto;\r\n }\r\n\r\n .content-image img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n }\r\n\r\n \/* Responsive Design - Clean Mobile Experience *\/\r\n @media (max-width: 768px) {\r\n .container {\r\n padding: 15px;\r\n }\r\n\r\n .timeline-container {\r\n padding: 25px;\r\n border-radius: 20px;\r\n backdrop-filter: blur(15px);\r\n -webkit-backdrop-filter: blur(15px);\r\n }\r\n\r\n #timelineContent {\r\n min-height: 400px;\r\n }\r\n\r\n .timeline-content {\r\n padding: 25px;\r\n border-radius: 16px;\r\n overflow: hidden;\r\n isolation: isolate;\r\n background: transparent;\r\n }\r\n\r\n .timeline-content::before {\r\n border-radius: 16px;\r\n }\r\n\r\n .content-grid {\r\n grid-template-columns: 1fr;\r\n gap: 30px;\r\n }\r\n\r\n .content-text {\r\n padding-right: 0;\r\n }\r\n\r\n .content-image {\r\n border-radius: 12px;\r\n overflow: hidden;\r\n box-shadow: \r\n 0 6px 20px rgba(31, 38, 135, 0.1),\r\n 0 1px 0 rgba(255, 255, 255, 0.2) inset,\r\n 0 0 0 1px rgba(255, 255, 255, 0.1);\r\n }\r\n\r\n .content-image:hover {\r\n transform: translateY(-2px);\r\n box-shadow: \r\n 0 10px 24px rgba(31, 38, 135, 0.15),\r\n 0 1px 0 rgba(255, 255, 255, 0.3) inset,\r\n 0 0 0 1px rgba(255, 255, 255, 0.15);\r\n }\r\n\r\n .content-image.vertical {\r\n width: 85%;\r\n }\r\n\r\n .years-row {\r\n justify-content: center;\r\n gap: 12px;\r\n }\r\n\r\n .year-button {\r\n font-size: 14px;\r\n padding: 10px 20px;\r\n border-radius: 10px;\r\n backdrop-filter: blur(8px);\r\n -webkit-backdrop-filter: blur(8px);\r\n border: none;\r\n overflow: hidden;\r\n flex: 0 0 auto;\r\n min-width: 70px;\r\n white-space: nowrap;\r\n }\r\n\r\n .year-title {\r\n font-size: 2.2rem;\r\n letter-spacing: -0.02em;\r\n }\r\n\r\n .milestone-title {\r\n font-size: 1.3rem;\r\n }\r\n\r\n .milestone-description {\r\n font-size: 0.95rem;\r\n line-height: 1.5;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"container\">\r\n \r\n <div class=\"timeline-container\">\r\n \r\n <div class=\"year-navigation\">\r\n <div class=\"years-row\" id=\"yearsRow\">\r\n \r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"timelineContent\">\r\n \r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ ====================================================================\r\n \/\/ TIMELINE DATA - Company history events with titles and descriptions\r\n \/\/ ====================================================================\r\n const comingsoon = \"https:\/\/www.usptmills.com\/06-18-25\/wp-content\/uploads\/2025\/08\/comingsoon.jpg.png\"\r\n const timelineData = [\r\n {\r\n year: 1999,\r\n title: \"Beginning Operations\",\r\n description: \"The manufacturing operation was relocated to Madison, Indiana, where production officially began with the commissioning of our first tube mill.\",\r\n image: \"https:\/\/www.usptmills.com\/06-18-25\/wp-content\/uploads\/2025\/08\/DSC_04311-scaled.jpg\"\r\n },\r\n {\r\n year: 2000,\r\n title: \"Production Capacity Enhancement\",\r\n description: \"Production capacity was enhanced through the commissioning of additional tube mills, reflecting a proactive response to increasing market demand.\",\r\n image: \"https:\/\/www.usptmills.com\/06-18-25\/wp-content\/uploads\/2025\/08\/DSC_04291-scaled.jpg\"\r\n },\r\n {\r\n year: 2001,\r\n title: \"Operational Expansion\",\r\n description: \"Operational capacity increased with the addition of a new tube mill, supporting both greater volume and a broader product portfolio.\",\r\n image: \"https:\/\/www.usptmills.com\/06-18-25\/wp-content\/uploads\/2025\/08\/5C5A0228.jpg\"\r\n },\r\n {\r\n year: 2007,\r\n title: \"Major Facility Expansion\",\r\n description: \"Operations expanded into a second facility on the Madison campus, more than doubling operational square footage\u2014from 189,000 to 412,000 square feet. Strategic relocation and modernization of key equipment within the expanded footprint improved workflow, efficiency, and scalability.\",\r\n image: \"https:\/\/www.usptmills.com\/06-18-25\/wp-content\/uploads\/2025\/08\/operational-expansion.png\"\r\n },\r\n {\r\n year: 2011,\r\n title: \"Powder Coating Innovation\",\r\n description: \"The installation of a new powder coat line expanded our in-house finishing capabilities, enhanced product durability, and launched our new product line by allowing us to offer tubing in industry-standard colors.\",\r\n image: \"https:\/\/www.usptmills.com\/06-18-25\/wp-content\/uploads\/2025\/08\/5C5A0259.jpg\"\r\n },\r\n {\r\n year: 2012,\r\n title: \"Corporate Headquarters Centralization\",\r\n description: \"Corporate headquarters and administrative functions were transitioned to plant two, centralizing key operations and strengthening interdepartmental integration.\",\r\n image: \"https:\/\/www.usptmills.com\/06-18-25\/wp-content\/uploads\/2025\/08\/5C5A0718.jpg\"\r\n },\r\n {\r\n year: 2017,\r\n title: \"Slitter Operations Launch\",\r\n description: \"Slitter operations were introduced to optimize raw material utilization and further streamline manufacturing workflows.\",\r\n image: \"https:\/\/www.usptmills.com\/06-18-25\/wp-content\/uploads\/2025\/08\/LG7L1040-scaled.jpg\"\r\n },\r\n {\r\n year: 2018,\r\n title: \"Enhanced Production Capabilities\",\r\n description: \"Production capabilities were improved with the acquisition of a new tube mill, increasing output and providing additional flexibility to support evolving customer requirements.\",\r\n image: \"https:\/\/www.usptmills.com\/06-18-25\/wp-content\/uploads\/2025\/08\/pipe-welder-scaled.jpg\"\r\n },\r\n {\r\n year: 2020,\r\n title: \"ITOCHU Corporation Acquisition\",\r\n description: \"The operation was acquired by ITOCHU Corporation and integrated into the Itochu Building Products group. This strategic acquisition marked the beginning of a transformative phase focused on modernization, integration, and long-term growth.\",\r\n image: \"https:\/\/www.usptmills.com\/06-18-25\/wp-content\/uploads\/2025\/07\/Copy-of-background-photo.png\"\r\n },\r\n {\r\n year: 2021,\r\n title: \"ERP System Implementation\",\r\n description: \"A comprehensive enterprise resource planning (ERP) system was implemented and successfully launched in August, enabling real-time operational visibility, data-driven decision-making, and cross-functional coordination.\",\r\n image: \"https:\/\/www.usptmills.com\/06-18-25\/wp-content\/uploads\/2025\/08\/5C5A0563-scaled.jpg\"\r\n },\r\n {\r\n year: 2023,\r\n title: \"Expanded Tube Production Capabilities\",\r\n description: \"A new 3.00-inch tube mill and welder were purchased and installed, boosting efficiency and expanding production capabilities to manufacture round tubing from 0.750 inches to 3.00 inches in outside diameter, with wall thicknesses up to 0.160 inches.\",\r\n image: \"https:\/\/www.usptmills.com\/06-18-25\/wp-content\/uploads\/2025\/08\/plant-photos-33.jpg\"\r\n },\r\n {\r\n year: \"Jan-2025\",\r\n title: \"Advanced Powder Coating Line\",\r\n description: \"A cutting-edge powder coating line was completed and became fully operational. In addition to expanding the overall finishing capacity, the new system supports longer tubing lengths and delivers enhanced consistency in finish quality.\",\r\n image: \"https:\/\/www.usptmills.com\/06-18-25\/wp-content\/uploads\/2025\/08\/LG7L1046.jpg\"\r\n },\r\n {\r\n year: \"May-2025\",\r\n title: \"Automated Packaging Integration\",\r\n description: \"The integration of automated packaging lines advanced both safety standards and throughput across the facility.\",\r\n image: \"https:\/\/www.usptmills.com\/06-18-25\/wp-content\/uploads\/2025\/08\/DSC_04561-scaled.jpg\"\r\n }\r\n ];\r\n\r\n \/\/ ====================================================================\r\n \/\/ APPLICATION CODE - Timeline slide animation system\r\n \/\/ ====================================================================\r\n let currentYearIndex = 0;\r\n let isAnimating = false;\r\n let animationTimeout = null;\r\n\r\n \/\/ Initialize the timeline on page load\r\n function initTimeline() {\r\n generateYearButtons();\r\n generateContentSections();\r\n showInitialContent(0); \/\/ Show first timeline item without animation\r\n }\r\n\r\n \/\/ Create clickable year buttons dynamically from timeline data\r\n function generateYearButtons() {\r\n const yearsRow = document.getElementById('yearsRow');\r\n yearsRow.innerHTML = '';\r\n \r\n timelineData.forEach((item, index) => {\r\n const button = document.createElement('button');\r\n button.className = 'year-button';\r\n button.textContent = item.year;\r\n button.onclick = () => setActiveYear(index);\r\n button.id = `year-btn-${index}`;\r\n yearsRow.appendChild(button);\r\n });\r\n }\r\n\r\n \/\/ Create timeline content sections from timeline data\r\n function generateContentSections() {\r\n const container = document.getElementById('timelineContent');\r\n container.innerHTML = '';\r\n \r\n timelineData.forEach((item, index) => {\r\n const section = document.createElement('div');\r\n section.className = 'timeline-content';\r\n section.id = `content-${index}`;\r\n \r\n section.innerHTML = `\r\n <div class=\"content-grid\">\r\n <div class=\"content-text\">\r\n <div class=\"year-title\">${item.year}<\/div>\r\n <div class=\"milestone-title\">${item.title}<\/div>\r\n <div class=\"milestone-description\">${item.description}<\/div>\r\n <\/div>\r\n <div class=\"content-image horizontal\" id=\"image-container-${index}\">\r\n <img decoding=\"async\" src=\"${item.image}\" alt=\"${item.title}\" loading=\"lazy\" onload=\"adjustImageFrame(this, ${index})\" \/>\r\n <\/div>\r\n <\/div>\r\n `;\r\n \r\n container.appendChild(section);\r\n });\r\n }\r\n\r\n \/\/ Automatically adjust image frame based on photo orientation\r\n function adjustImageFrame(img, index) {\r\n const container = document.getElementById(`image-container-${index}`);\r\n const aspectRatio = img.naturalWidth \/ img.naturalHeight;\r\n \r\n \/\/ If image is taller than it is wide (aspect ratio < 1), use vertical frame\r\n if (aspectRatio < 1) {\r\n container.classList.remove('horizontal');\r\n container.classList.add('vertical');\r\n } else {\r\n container.classList.remove('vertical');\r\n container.classList.add('horizontal');\r\n }\r\n }\r\n\r\n \/\/ Show initial content without animation (page load)\r\n function showInitialContent(index) {\r\n currentYearIndex = index;\r\n updateYearButtons(index);\r\n \r\n const contentSections = document.querySelectorAll('.timeline-content');\r\n contentSections.forEach((section, i) => {\r\n section.className = 'timeline-content';\r\n if (i === index) {\r\n section.classList.add('visible');\r\n }\r\n });\r\n }\r\n\r\n \/\/ Update active state of year buttons\r\n function updateYearButtons(activeIndex) {\r\n const yearButtons = document.querySelectorAll('.year-button');\r\n yearButtons.forEach((button, i) => {\r\n button.classList.toggle('active', i === activeIndex);\r\n });\r\n }\r\n\r\n \/\/ Main animation function with smooth glass transitions\r\n function setActiveYear(index) {\r\n \/\/ Skip if clicking the same year\r\n if (index === currentYearIndex) return;\r\n \r\n const oldIndex = currentYearIndex;\r\n currentYearIndex = index;\r\n isAnimating = true;\r\n\r\n \/\/ Clear any existing animation to allow interruption\r\n if (animationTimeout) {\r\n clearTimeout(animationTimeout);\r\n }\r\n\r\n updateYearButtons(index);\r\n\r\n const contentSections = document.querySelectorAll('.timeline-content');\r\n const currentSection = contentSections[oldIndex];\r\n const nextSection = contentSections[index];\r\n\r\n \/\/ Determine slide direction based on year progression\r\n const isMovingForward = index > oldIndex;\r\n\r\n \/\/ PHASE 1: Setup starting positions without transitions\r\n contentSections.forEach(section => {\r\n section.className = 'timeline-content';\r\n });\r\n\r\n if (isMovingForward) {\r\n \/\/ Forward: current exits left, next enters from right\r\n currentSection.classList.add('visible');\r\n nextSection.classList.add('start-from-right');\r\n } else {\r\n \/\/ Backward: current exits right, next enters from left\r\n currentSection.classList.add('visible');\r\n nextSection.classList.add('start-from-left');\r\n }\r\n\r\n \/\/ PHASE 2: Enable transitions and trigger smooth animations\r\n requestAnimationFrame(() => {\r\n currentSection.classList.add('animating');\r\n nextSection.classList.add('animating');\r\n\r\n if (isMovingForward) {\r\n currentSection.classList.add('exit-to-left');\r\n nextSection.classList.remove('start-from-right');\r\n nextSection.classList.add('enter-center');\r\n } else {\r\n currentSection.classList.add('exit-to-right');\r\n nextSection.classList.remove('start-from-left');\r\n nextSection.classList.add('enter-center');\r\n }\r\n\r\n \/\/ PHASE 3: Clean up after animation completes\r\n animationTimeout = setTimeout(() => {\r\n contentSections.forEach((section, i) => {\r\n section.className = 'timeline-content';\r\n if (i === index) {\r\n section.classList.add('visible');\r\n }\r\n });\r\n \r\n isAnimating = false;\r\n animationTimeout = null;\r\n }, 600); \/\/ Clean timing for glass effects\r\n });\r\n }\r\n\r\n \/\/ Initialize timeline when page loads\r\n document.addEventListener('DOMContentLoaded', initTimeline);\r\n\r\n \/\/ Arrow key navigation through timeline\r\n document.addEventListener('keydown', (e) => {\r\n if (e.key === 'ArrowLeft' && currentYearIndex > 0) {\r\n setActiveYear(currentYearIndex - 1);\r\n } else if (e.key === 'ArrowRight' && currentYearIndex < timelineData.length - 1) {\r\n setActiveYear(currentYearIndex + 1);\r\n }\r\n });\r\n\r\n \/\/ Clean up timeouts on page unload\r\n window.addEventListener('beforeunload', () => {\r\n if (animationTimeout) {\r\n clearTimeout(animationTimeout);\r\n }\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\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>Company History Timeline<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":245,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-2691","page","type-page","status-publish","hentry"],"acf":[],"rttpg_featured_image_url":null,"rttpg_author":{"display_name":"Scott Young","author_link":"https:\/\/www.usptmills.com\/06-18-25\/author\/syoungusptmills-com\/"},"rttpg_comment":0,"rttpg_category":null,"rttpg_excerpt":"Company History Timeline","_links":{"self":[{"href":"https:\/\/www.usptmills.com\/06-18-25\/wp-json\/wp\/v2\/pages\/2691","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.usptmills.com\/06-18-25\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.usptmills.com\/06-18-25\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.usptmills.com\/06-18-25\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.usptmills.com\/06-18-25\/wp-json\/wp\/v2\/comments?post=2691"}],"version-history":[{"count":22,"href":"https:\/\/www.usptmills.com\/06-18-25\/wp-json\/wp\/v2\/pages\/2691\/revisions"}],"predecessor-version":[{"id":2886,"href":"https:\/\/www.usptmills.com\/06-18-25\/wp-json\/wp\/v2\/pages\/2691\/revisions\/2886"}],"up":[{"embeddable":true,"href":"https:\/\/www.usptmills.com\/06-18-25\/wp-json\/wp\/v2\/pages\/245"}],"wp:attachment":[{"href":"https:\/\/www.usptmills.com\/06-18-25\/wp-json\/wp\/v2\/media?parent=2691"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t

\n\t\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Company History Timeline<\/title>\r\n <style>\r\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@600&family=Inter:wght@400&display=swap');\r\n \r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n body {\r\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;\r\n background-color: #f5f5f5;\r\n color: #1d1d1f;\r\n line-height: 1.6;\r\n min-height: 100vh;\r\n }\r\n\r\n .container {\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n padding: 20px;\r\n }\r\n\r\n \/* Timeline Container - Liquid Glass Effect *\/\r\n .timeline-container {\r\n background: rgba(255, 255, 255, 0.25);\r\n backdrop-filter: blur(20px);\r\n -webkit-backdrop-filter: blur(20px);\r\n padding: 40px;\r\n border-radius: 24px;\r\n border: 1px solid rgba(255, 255, 255, 0.18);\r\n box-shadow: \r\n 0 8px 32px rgba(31, 38, 135, 0.37),\r\n inset 0 1px 0 rgba(255, 255, 255, 0.4);\r\n min-height: 600px;\r\n display: flex;\r\n flex-direction: column;\r\n position: relative;\r\n }\r\n\r\n \/* Year Navigation - Clean Glass Design *\/\r\n .year-navigation {\r\n margin-bottom: 40px;\r\n position: relative;\r\n flex-shrink: 0;\r\n }\r\n\r\n .years-row {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n margin-bottom: 20px;\r\n flex-wrap: wrap;\r\n gap: 12px;\r\n position: relative;\r\n }\r\n\r\n .year-button {\r\n background: rgba(255, 255, 255, 0.2);\r\n backdrop-filter: blur(10px);\r\n -webkit-backdrop-filter: blur(10px);\r\n font-size: 15px;\r\n font-weight: 500;\r\n color: #666;\r\n cursor: pointer;\r\n padding: 12px 20px;\r\n border-radius: 12px;\r\n transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);\r\n position: relative;\r\n flex: 0 0 auto;\r\n min-width: 70px;\r\n text-align: center;\r\n box-shadow: \r\n 0 4px 16px rgba(31, 38, 135, 0.15),\r\n 0 1px 0 rgba(255, 255, 255, 0.4) inset,\r\n 0 0 0 1px rgba(255, 255, 255, 0.1);\r\n border: none;\r\n overflow: hidden;\r\n white-space: nowrap;\r\n }\r\n\r\n \/* Ensure single line at full width *\/\r\n @media (min-width: 1024px) {\r\n .years-row {\r\n flex-wrap: nowrap;\r\n gap: 10px;\r\n }\r\n \r\n .year-button {\r\n padding: 12px 16px;\r\n min-width: 65px;\r\n }\r\n }\r\n\r\n .year-button:hover {\r\n background: rgba(255, 255, 255, 0.3);\r\n color: #8293C4;\r\n transform: translateY(-2px);\r\n box-shadow: \r\n 0 8px 24px rgba(31, 38, 135, 0.2),\r\n 0 1px 0 rgba(255, 255, 255, 0.5) inset,\r\n 0 0 0 1px rgba(255, 255, 255, 0.15);\r\n }\r\n\r\n .year-button.active {\r\n background: rgba(255, 255, 255, 0.9);\r\n color: #3552A4;\r\n font-weight: 600;\r\n box-shadow: \r\n 0 6px 20px rgba(31, 38, 135, 0.25),\r\n 0 1px 0 rgba(255, 255, 255, 0.8) inset,\r\n 0 0 0 1px rgba(255, 255, 255, 0.2);\r\n }\r\n\r\n .year-button.active:hover {\r\n transform: translateY(-2px);\r\n background: rgba(255, 255, 255, 0.95);\r\n color: #3552A4;\r\n }\r\n\r\n \/* Content Wrapper - Clean Glass Container *\/\r\n #timelineContent {\r\n position: relative;\r\n overflow: hidden;\r\n width: 100%;\r\n flex: 1;\r\n display: flex;\r\n align-items: center;\r\n min-height: 500px;\r\n }\r\n\r\n \/* Content Section - Clean Glass with Proper Corner Handling *\/\r\n .timeline-content {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n padding: 40px;\r\n border-radius: 20px;\r\n box-sizing: border-box;\r\n opacity: 0;\r\n transform: translateX(100%);\r\n transition: none;\r\n display: flex;\r\n align-items: center;\r\n overflow: hidden;\r\n isolation: isolate;\r\n background: transparent;\r\n }\r\n\r\n \/* Backdrop filter layer - properly contained within border-radius *\/\r\n .timeline-content::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background: rgba(255, 255, 255, 0.15);\r\n backdrop-filter: blur(20px);\r\n -webkit-backdrop-filter: blur(20px);\r\n border-radius: 20px;\r\n z-index: -1;\r\n box-shadow: \r\n 0 8px 32px rgba(31, 38, 135, 0.2),\r\n 0 1px 0 rgba(255, 255, 255, 0.3) inset,\r\n 0 0 0 1px rgba(255, 255, 255, 0.1);\r\n }\r\n\r\n \/* Slide positioning classes - Smooth Glass Transitions *\/\r\n .timeline-content.visible {\r\n opacity: 1;\r\n transform: translateX(0);\r\n }\r\n\r\n .timeline-content.animating {\r\n transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);\r\n }\r\n\r\n \/* Starting positions for entering content *\/\r\n .timeline-content.start-from-right {\r\n transform: translateX(100%);\r\n opacity: 0;\r\n }\r\n\r\n .timeline-content.start-from-left {\r\n transform: translateX(-100%);\r\n opacity: 0;\r\n }\r\n\r\n \/* Ending positions for exiting content *\/\r\n .timeline-content.exit-to-left {\r\n transform: translateX(-100%);\r\n opacity: 0;\r\n }\r\n\r\n .timeline-content.exit-to-right {\r\n transform: translateX(100%);\r\n opacity: 0;\r\n }\r\n\r\n \/* Ending position for entering content *\/\r\n .timeline-content.enter-center {\r\n transform: translateX(0);\r\n opacity: 1;\r\n }\r\n\r\n .content-grid {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 50px;\r\n align-items: center;\r\n width: 100%;\r\n }\r\n\r\n .content-text {\r\n padding-right: 30px;\r\n }\r\n\r\n .year-title {\r\n font-family: 'Montserrat', sans-serif;\r\n font-size: 2.8rem;\r\n font-weight: 700;\r\n color: #3552A4;\r\n margin-bottom: 15px;\r\n letter-spacing: -0.02em;\r\n }\r\n\r\n .milestone-title {\r\n font-family: 'Inter', sans-serif;\r\n font-size: 1.5rem;\r\n font-weight: 600;\r\n color: #1d1d1f;\r\n margin-bottom: 20px;\r\n letter-spacing: -0.01em;\r\n }\r\n\r\n .milestone-description {\r\n font-size: 1rem;\r\n color: #6e6e73;\r\n line-height: 1.6;\r\n font-weight: 400;\r\n }\r\n\r\n .content-image {\r\n width: 100%;\r\n height: 300px;\r\n border-radius: 16px;\r\n overflow: hidden;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n background: rgba(255, 255, 255, 0.15);\r\n backdrop-filter: blur(10px);\r\n -webkit-backdrop-filter: blur(10px);\r\n transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);\r\n box-shadow: \r\n 0 8px 24px rgba(31, 38, 135, 0.15),\r\n 0 1px 0 rgba(255, 255, 255, 0.2) inset,\r\n 0 0 0 1px rgba(255, 255, 255, 0.1);\r\n }\r\n\r\n .content-image:hover {\r\n transform: translateY(-4px);\r\n box-shadow: \r\n 0 16px 32px rgba(31, 38, 135, 0.2),\r\n 0 1px 0 rgba(255, 255, 255, 0.3) inset,\r\n 0 0 0 1px rgba(255, 255, 255, 0.15);\r\n }\r\n\r\n \/* Clean frame sizing *\/\r\n .content-image.horizontal {\r\n width: 100%;\r\n height: 300px;\r\n }\r\n\r\n .content-image.vertical {\r\n width: 75%;\r\n height: 400px;\r\n margin: 0 auto;\r\n }\r\n\r\n .content-image img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n }\r\n\r\n \/* Responsive Design - Clean Mobile Experience *\/\r\n @media (max-width: 768px) {\r\n .container {\r\n padding: 15px;\r\n }\r\n\r\n .timeline-container {\r\n padding: 25px;\r\n border-radius: 20px;\r\n backdrop-filter: blur(15px);\r\n -webkit-backdrop-filter: blur(15px);\r\n }\r\n\r\n #timelineContent {\r\n min-height: 400px;\r\n }\r\n\r\n .timeline-content {\r\n padding: 25px;\r\n border-radius: 16px;\r\n overflow: hidden;\r\n isolation: isolate;\r\n background: transparent;\r\n }\r\n\r\n .timeline-content::before {\r\n border-radius: 16px;\r\n }\r\n\r\n .content-grid {\r\n grid-template-columns: 1fr;\r\n gap: 30px;\r\n }\r\n\r\n .content-text {\r\n padding-right: 0;\r\n }\r\n\r\n .content-image {\r\n border-radius: 12px;\r\n overflow: hidden;\r\n box-shadow: \r\n 0 6px 20px rgba(31, 38, 135, 0.1),\r\n 0 1px 0 rgba(255, 255, 255, 0.2) inset,\r\n 0 0 0 1px rgba(255, 255, 255, 0.1);\r\n }\r\n\r\n .content-image:hover {\r\n transform: translateY(-2px);\r\n box-shadow: \r\n 0 10px 24px rgba(31, 38, 135, 0.15),\r\n 0 1px 0 rgba(255, 255, 255, 0.3) inset,\r\n 0 0 0 1px rgba(255, 255, 255, 0.15);\r\n }\r\n\r\n .content-image.vertical {\r\n width: 85%;\r\n }\r\n\r\n .years-row {\r\n justify-content: center;\r\n gap: 12px;\r\n }\r\n\r\n .year-button {\r\n font-size: 14px;\r\n padding: 10px 20px;\r\n border-radius: 10px;\r\n backdrop-filter: blur(8px);\r\n -webkit-backdrop-filter: blur(8px);\r\n border: none;\r\n overflow: hidden;\r\n flex: 0 0 auto;\r\n min-width: 70px;\r\n white-space: nowrap;\r\n }\r\n\r\n .year-title {\r\n font-size: 2.2rem;\r\n letter-spacing: -0.02em;\r\n }\r\n\r\n .milestone-title {\r\n font-size: 1.3rem;\r\n }\r\n\r\n .milestone-description {\r\n font-size: 0.95rem;\r\n line-height: 1.5;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"container\">\r\n \r\n <div class=\"timeline-container\">\r\n \r\n <div class=\"year-navigation\">\r\n <div class=\"years-row\" id=\"yearsRow\">\r\n \r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"timelineContent\">\r\n \r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ ====================================================================\r\n \/\/ TIMELINE DATA - Company history events with titles and descriptions\r\n \/\/ ====================================================================\r\n const comingsoon = \"https:\/\/www.usptmills.com\/06-18-25\/wp-content\/uploads\/2025\/08\/comingsoon.jpg.png\"\r\n const timelineData = [\r\n {\r\n year: 1999,\r\n title: \"Beginning Operations\",\r\n description: \"The manufacturing operation was relocated to Madison, Indiana, where production officially began with the commissioning of our first tube mill.\",\r\n image: \"https:\/\/www.usptmills.com\/06-18-25\/wp-content\/uploads\/2025\/08\/DSC_04311-scaled.jpg\"\r\n },\r\n {\r\n year: 2000,\r\n title: \"Production Capacity Enhancement\",\r\n description: \"Production capacity was enhanced through the commissioning of additional tube mills, reflecting a proactive response to increasing market demand.\",\r\n image: \"https:\/\/www.usptmills.com\/06-18-25\/wp-content\/uploads\/2025\/08\/DSC_04291-scaled.jpg\"\r\n },\r\n {\r\n year: 2001,\r\n title: \"Operational Expansion\",\r\n description: \"Operational capacity increased with the addition of a new tube mill, supporting both greater volume and a broader product portfolio.\",\r\n image: \"https:\/\/www.usptmills.com\/06-18-25\/wp-content\/uploads\/2025\/08\/5C5A0228.jpg\"\r\n },\r\n {\r\n year: 2007,\r\n title: \"Major Facility Expansion\",\r\n description: \"Operations expanded into a second facility on the Madison campus, more than doubling operational square footage\u2014from 189,000 to 412,000 square feet. Strategic relocation and modernization of key equipment within the expanded footprint improved workflow, efficiency, and scalability.\",\r\n image: \"https:\/\/www.usptmills.com\/06-18-25\/wp-content\/uploads\/2025\/08\/operational-expansion.png\"\r\n },\r\n {\r\n year: 2011,\r\n title: \"Powder Coating Innovation\",\r\n description: \"The installation of a new powder coat line expanded our in-house finishing capabilities, enhanced product durability, and launched our new product line by allowing us to offer tubing in industry-standard colors.\",\r\n image: \"https:\/\/www.usptmills.com\/06-18-25\/wp-content\/uploads\/2025\/08\/5C5A0259.jpg\"\r\n },\r\n {\r\n year: 2012,\r\n title: \"Corporate Headquarters Centralization\",\r\n description: \"Corporate headquarters and administrative functions were transitioned to plant two, centralizing key operations and strengthening interdepartmental integration.\",\r\n image: \"https:\/\/www.usptmills.com\/06-18-25\/wp-content\/uploads\/2025\/08\/5C5A0718.jpg\"\r\n },\r\n {\r\n year: 2017,\r\n title: \"Slitter Operations Launch\",\r\n description: \"Slitter operations were introduced to optimize raw material utilization and further streamline manufacturing workflows.\",\r\n image: \"https:\/\/www.usptmills.com\/06-18-25\/wp-content\/uploads\/2025\/08\/LG7L1040-scaled.jpg\"\r\n },\r\n {\r\n year: 2018,\r\n title: \"Enhanced Production Capabilities\",\r\n description: \"Production capabilities were improved with the acquisition of a new tube mill, increasing output and providing additional flexibility to support evolving customer requirements.\",\r\n image: \"https:\/\/www.usptmills.com\/06-18-25\/wp-content\/uploads\/2025\/08\/pipe-welder-scaled.jpg\"\r\n },\r\n {\r\n year: 2020,\r\n title: \"ITOCHU Corporation Acquisition\",\r\n description: \"The operation was acquired by ITOCHU Corporation and integrated into the Itochu Building Products group. This strategic acquisition marked the beginning of a transformative phase focused on modernization, integration, and long-term growth.\",\r\n image: \"https:\/\/www.usptmills.com\/06-18-25\/wp-content\/uploads\/2025\/07\/Copy-of-background-photo.png\"\r\n },\r\n {\r\n year: 2021,\r\n title: \"ERP System Implementation\",\r\n description: \"A comprehensive enterprise resource planning (ERP) system was implemented and successfully launched in August, enabling real-time operational visibility, data-driven decision-making, and cross-functional coordination.\",\r\n image: \"https:\/\/www.usptmills.com\/06-18-25\/wp-content\/uploads\/2025\/08\/5C5A0563-scaled.jpg\"\r\n },\r\n {\r\n year: 2023,\r\n title: \"Expanded Tube Production Capabilities\",\r\n description: \"A new 3.00-inch tube mill and welder were purchased and installed, boosting efficiency and expanding production capabilities to manufacture round tubing from 0.750 inches to 3.00 inches in outside diameter, with wall thicknesses up to 0.160 inches.\",\r\n image: \"https:\/\/www.usptmills.com\/06-18-25\/wp-content\/uploads\/2025\/08\/plant-photos-33.jpg\"\r\n },\r\n {\r\n year: \"Jan-2025\",\r\n title: \"Advanced Powder Coating Line\",\r\n description: \"A cutting-edge powder coating line was completed and became fully operational. In addition to expanding the overall finishing capacity, the new system supports longer tubing lengths and delivers enhanced consistency in finish quality.\",\r\n image: \"https:\/\/www.usptmills.com\/06-18-25\/wp-content\/uploads\/2025\/08\/LG7L1046.jpg\"\r\n },\r\n {\r\n year: \"May-2025\",\r\n title: \"Automated Packaging Integration\",\r\n description: \"The integration of automated packaging lines advanced both safety standards and throughput across the facility.\",\r\n image: \"https:\/\/www.usptmills.com\/06-18-25\/wp-content\/uploads\/2025\/08\/DSC_04561-scaled.jpg\"\r\n }\r\n ];\r\n\r\n \/\/ ====================================================================\r\n \/\/ APPLICATION CODE - Timeline slide animation system\r\n \/\/ ====================================================================\r\n let currentYearIndex = 0;\r\n let isAnimating = false;\r\n let animationTimeout = null;\r\n\r\n \/\/ Initialize the timeline on page load\r\n function initTimeline() {\r\n generateYearButtons();\r\n generateContentSections();\r\n showInitialContent(0); \/\/ Show first timeline item without animation\r\n }\r\n\r\n \/\/ Create clickable year buttons dynamically from timeline data\r\n function generateYearButtons() {\r\n const yearsRow = document.getElementById('yearsRow');\r\n yearsRow.innerHTML = '';\r\n \r\n timelineData.forEach((item, index) => {\r\n const button = document.createElement('button');\r\n button.className = 'year-button';\r\n button.textContent = item.year;\r\n button.onclick = () => setActiveYear(index);\r\n button.id = `year-btn-${index}`;\r\n yearsRow.appendChild(button);\r\n });\r\n }\r\n\r\n \/\/ Create timeline content sections from timeline data\r\n function generateContentSections() {\r\n const container = document.getElementById('timelineContent');\r\n container.innerHTML = '';\r\n \r\n timelineData.forEach((item, index) => {\r\n const section = document.createElement('div');\r\n section.className = 'timeline-content';\r\n section.id = `content-${index}`;\r\n \r\n section.innerHTML = `\r\n <div class=\"content-grid\">\r\n <div class=\"content-text\">\r\n <div class=\"year-title\">${item.year}<\/div>\r\n <div class=\"milestone-title\">${item.title}<\/div>\r\n <div class=\"milestone-description\">${item.description}<\/div>\r\n <\/div>\r\n <div class=\"content-image horizontal\" id=\"image-container-${index}\">\r\n <img decoding=\"async\" src=\"${item.image}\" alt=\"${item.title}\" loading=\"lazy\" onload=\"adjustImageFrame(this, ${index})\" \/>\r\n <\/div>\r\n <\/div>\r\n `;\r\n \r\n container.appendChild(section);\r\n });\r\n }\r\n\r\n \/\/ Automatically adjust image frame based on photo orientation\r\n function adjustImageFrame(img, index) {\r\n const container = document.getElementById(`image-container-${index}`);\r\n const aspectRatio = img.naturalWidth \/ img.naturalHeight;\r\n \r\n \/\/ If image is taller than it is wide (aspect ratio < 1), use vertical frame\r\n if (aspectRatio < 1) {\r\n container.classList.remove('horizontal');\r\n container.classList.add('vertical');\r\n } else {\r\n container.classList.remove('vertical');\r\n container.classList.add('horizontal');\r\n }\r\n }\r\n\r\n \/\/ Show initial content without animation (page load)\r\n function showInitialContent(index) {\r\n currentYearIndex = index;\r\n updateYearButtons(index);\r\n \r\n const contentSections = document.querySelectorAll('.timeline-content');\r\n contentSections.forEach((section, i) => {\r\n section.className = 'timeline-content';\r\n if (i === index) {\r\n section.classList.add('visible');\r\n }\r\n });\r\n }\r\n\r\n \/\/ Update active state of year buttons\r\n function updateYearButtons(activeIndex) {\r\n const yearButtons = document.querySelectorAll('.year-button');\r\n yearButtons.forEach((button, i) => {\r\n button.classList.toggle('active', i === activeIndex);\r\n });\r\n }\r\n\r\n \/\/ Main animation function with smooth glass transitions\r\n function setActiveYear(index) {\r\n \/\/ Skip if clicking the same year\r\n if (index === currentYearIndex) return;\r\n \r\n const oldIndex = currentYearIndex;\r\n currentYearIndex = index;\r\n isAnimating = true;\r\n\r\n \/\/ Clear any existing animation to allow interruption\r\n if (animationTimeout) {\r\n clearTimeout(animationTimeout);\r\n }\r\n\r\n updateYearButtons(index);\r\n\r\n const contentSections = document.querySelectorAll('.timeline-content');\r\n const currentSection = contentSections[oldIndex];\r\n const nextSection = contentSections[index];\r\n\r\n \/\/ Determine slide direction based on year progression\r\n const isMovingForward = index > oldIndex;\r\n\r\n \/\/ PHASE 1: Setup starting positions without transitions\r\n contentSections.forEach(section => {\r\n section.className = 'timeline-content';\r\n });\r\n\r\n if (isMovingForward) {\r\n \/\/ Forward: current exits left, next enters from right\r\n currentSection.classList.add('visible');\r\n nextSection.classList.add('start-from-right');\r\n } else {\r\n \/\/ Backward: current exits right, next enters from left\r\n currentSection.classList.add('visible');\r\n nextSection.classList.add('start-from-left');\r\n }\r\n\r\n \/\/ PHASE 2: Enable transitions and trigger smooth animations\r\n requestAnimationFrame(() => {\r\n currentSection.classList.add('animating');\r\n nextSection.classList.add('animating');\r\n\r\n if (isMovingForward) {\r\n currentSection.classList.add('exit-to-left');\r\n nextSection.classList.remove('start-from-right');\r\n nextSection.classList.add('enter-center');\r\n } else {\r\n currentSection.classList.add('exit-to-right');\r\n nextSection.classList.remove('start-from-left');\r\n nextSection.classList.add('enter-center');\r\n }\r\n\r\n \/\/ PHASE 3: Clean up after animation completes\r\n animationTimeout = setTimeout(() => {\r\n contentSections.forEach((section, i) => {\r\n section.className = 'timeline-content';\r\n if (i === index) {\r\n section.classList.add('visible');\r\n }\r\n });\r\n \r\n isAnimating = false;\r\n animationTimeout = null;\r\n }, 600); \/\/ Clean timing for glass effects\r\n });\r\n }\r\n\r\n \/\/ Initialize timeline when page loads\r\n document.addEventListener('DOMContentLoaded', initTimeline);\r\n\r\n \/\/ Arrow key navigation through timeline\r\n document.addEventListener('keydown', (e) => {\r\n if (e.key === 'ArrowLeft' && currentYearIndex > 0) {\r\n setActiveYear(currentYearIndex - 1);\r\n } else if (e.key === 'ArrowRight' && currentYearIndex < timelineData.length - 1) {\r\n setActiveYear(currentYearIndex + 1);\r\n }\r\n });\r\n\r\n \/\/ Clean up timeouts on page unload\r\n window.addEventListener('beforeunload', () => {\r\n if (animationTimeout) {\r\n clearTimeout(animationTimeout);\r\n }\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\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>Company History Timeline<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":245,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-2691","page","type-page","status-publish","hentry"],"acf":[],"rttpg_featured_image_url":null,"rttpg_author":{"display_name":"Scott Young","author_link":"https:\/\/www.usptmills.com\/06-18-25\/author\/syoungusptmills-com\/"},"rttpg_comment":0,"rttpg_category":null,"rttpg_excerpt":"Company History Timeline","_links":{"self":[{"href":"https:\/\/www.usptmills.com\/06-18-25\/wp-json\/wp\/v2\/pages\/2691","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.usptmills.com\/06-18-25\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.usptmills.com\/06-18-25\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.usptmills.com\/06-18-25\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.usptmills.com\/06-18-25\/wp-json\/wp\/v2\/comments?post=2691"}],"version-history":[{"count":22,"href":"https:\/\/www.usptmills.com\/06-18-25\/wp-json\/wp\/v2\/pages\/2691\/revisions"}],"predecessor-version":[{"id":2886,"href":"https:\/\/www.usptmills.com\/06-18-25\/wp-json\/wp\/v2\/pages\/2691\/revisions\/2886"}],"up":[{"embeddable":true,"href":"https:\/\/www.usptmills.com\/06-18-25\/wp-json\/wp\/v2\/pages\/245"}],"wp:attachment":[{"href":"https:\/\/www.usptmills.com\/06-18-25\/wp-json\/wp\/v2\/media?parent=2691"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}