feat: enhance company history timeline with reveal animations and improved accessibility, optimizing user engagement and visual appeal

resources/views/components/company-history/timeline.blade.php

@@ -19,23 +19,23 @@
 <section class="company-history-timeline-section company-history-fonts wrapper !bg-[#f4f6f8] !pt-8 xl:!pt-12 lg:!pt-12 md:!pt-12">
     <div class="container py-20 xl:py-28 lg:py-28 md:py-28">
         @if($showHeader)
-        <div class="flex flex-wrap mx-[-15px] !mb-14 !text-center">
+        <div class="flex flex-wrap mx-[-15px] !mb-14 !text-center company-history-timeline__header">
             <div class="w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
-                <span class="company-history-timeline__section-badge inline-block text-[0.75rem] tracking-[0.12rem] uppercase font-bold !mb-3" style="color: #e31e24;">
+                <span class="company-history-timeline__section-badge company-history-timeline__reveal inline-block text-[0.75rem] tracking-[0.12rem] uppercase font-bold !mb-3" style="color: #e31e24;">
                     {{ __('company_history.timeline_section_badge') }}
                 </span>
-                <h2 class="company-history-timeline__section-title !text-[calc(1.345rem_+_1.14vw)] font-bold !leading-[1.2] xl:!text-[2.2rem] !mb-3">
+                <h2 class="company-history-timeline__section-title company-history-timeline__reveal !text-[calc(1.345rem_+_1.14vw)] font-bold !leading-[1.2] xl:!text-[2.2rem] !mb-3">
                     {{ __('company_history.timeline_section_title') }}
                 </h2>
-                <p class="company-history-timeline__section-subtitle lead text-[1.05rem] !leading-[1.6] !text-[#60697b] max-w-[42rem] !mx-auto">
+                <p class="company-history-timeline__section-subtitle company-history-timeline__reveal lead text-[1.05rem] !leading-[1.6] !text-[#60697b] max-w-[42rem] !mx-auto">
                     {{ __('company_history.timeline_section_subtitle') }}
                 </p>
             </div>
         </div>
         @endif
 
-        <div class="company-history-timeline">
+        <div class="company-history-timeline" data-timeline-animate>
-            <div class="company-history-timeline__start">
+            <div class="company-history-timeline__start company-history-timeline__reveal">
                 <span>{{ __('company_history.timeline_start') }}</span>
             </div>
 
@@ -51,7 +51,7 @@
                         $content = method_exists($item, 'translate') ? ($item->translate('content') ?: $item->content) : $item->content;
                     @endphp
                     <article
-                        class="company-history-timeline__item company-history-timeline__item--{{ $position }}"
+                        class="company-history-timeline__item company-history-timeline__item--{{ $position }} company-history-timeline__reveal"
                         style="--item-color: {{ $color }};"
                     >
                         <div class="company-history-timeline__side company-history-timeline__side--outer">
@@ -84,7 +84,7 @@
                 @endforeach
             </div>
 
-            <div class="company-history-timeline__finish">
+            <div class="company-history-timeline__finish company-history-timeline__reveal">
                 <span>{{ __('company_history.timeline_finish') }}</span>
             </div>
         </div>
@@ -320,6 +320,49 @@
             margin-left: auto;
         }
 
+        .company-history-timeline__reveal {
+            opacity: 0;
+            transform: translate3d(0, 32px, 0);
+            transition:
+                opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
+                transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
+            transition-delay: var(--reveal-delay, 0s);
+            will-change: opacity, transform;
+        }
+
+        .company-history-timeline__item--left.company-history-timeline__reveal {
+            transform: translate3d(-36px, 28px, 0);
+        }
+
+        .company-history-timeline__item--right.company-history-timeline__reveal {
+            transform: translate3d(36px, 28px, 0);
+        }
+
+        .company-history-timeline__reveal.is-visible {
+            opacity: 1;
+            transform: translate3d(0, 0, 0);
+        }
+
+        .company-history-timeline__header .company-history-timeline__section-badge {
+            --reveal-delay: 0s;
+        }
+
+        .company-history-timeline__header .company-history-timeline__section-title {
+            --reveal-delay: 0.08s;
+        }
+
+        .company-history-timeline__header .company-history-timeline__section-subtitle {
+            --reveal-delay: 0.16s;
+        }
+
+        @media (prefers-reduced-motion: reduce) {
+            .company-history-timeline__reveal {
+                opacity: 1;
+                transform: none;
+                transition: none;
+            }
+        }
+
         @media (max-width: 767px) {
             .company-history-timeline__track::before {
                 left: 24px;
@@ -371,8 +414,57 @@
             .company-history-timeline__item--left .company-history-timeline__text {
                 margin-left: 0;
             }
+
+            .company-history-timeline__item--left.company-history-timeline__reveal,
+            .company-history-timeline__item--right.company-history-timeline__reveal {
+                transform: translate3d(0, 28px, 0);
+            }
         }
     </style>
     @endpush
+
+    @push('scripts')
+    <script>
+        (function () {
+            const timeline = document.querySelector('[data-timeline-animate]');
+            if (!timeline) {
+                return;
+            }
+
+            const revealElements = timeline.closest('.company-history-timeline-section')
+                ?.querySelectorAll('.company-history-timeline__reveal');
+
+            if (!revealElements || revealElements.length === 0) {
+                return;
+            }
+
+            if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+                revealElements.forEach(function (element) {
+                    element.classList.add('is-visible');
+                });
+                return;
+            }
+
+            const observer = new IntersectionObserver(function (entries) {
+                entries.forEach(function (entry) {
+                    if (!entry.isIntersecting) {
+                        return;
+                    }
+
+                    entry.target.classList.add('is-visible');
+                    observer.unobserve(entry.target);
+                });
+            }, {
+                root: null,
+                rootMargin: '0px 0px -10% 0px',
+                threshold: 0.12,
+            });
+
+            revealElements.forEach(function (element) {
+                observer.observe(element);
+            });
+        })();
+    </script>
+    @endpush
 @endonce
 @endif