Animation tweaks. #4817 @0.5

diff --git a/resources/views/front/home.blade.php b/resources/views/front/home.blade.php
index ecb6c032066e977293d17c2edd3a38c7b1133a7e..d5fdf8c659adf8d518f707d3ddd99e5e238b002a 100644 (file)
--- a/resources/views/front/home.blade.php
+++ b/resources/views/front/home.blade.php
@@ -7,7 +7,7 @@
          class="flex flex-col flex-1 -mx-22 -mt-22 opacity-0">
 
         {{-- Main home content --}}
-        <div x-cloak x-data="{ shown: false }" x-intersect="shown = true"
+        <div x-cloak x-data="{ shown: false }" x-init="setTimeout(() => shown = true, 100)"
              class="flex flex-1 justify-center -mb-16">{{-- negative margin so image shadow sits under shortcuts --}}
 
             {{-- Left Column: logo + text + CTA --}}
@@ -29,18 +29,19 @@
             {{-- Right Column: Illustration image --}}
             <div class="home-right flex-1 max-w-[550px]">
                 <div class="w-full h-full
-                            bg-contain bg-center bg-no-repeat
-                            transform transition duration-300"
+                            bg-contain bg-center bg-no-repeat"
                      x-show="shown"
-                     x-transition.opacity.scale.50.duration.1000ms.delay.100ms
+                     x-transition.opacity.scale.50.duration.1000ms.delay.400ms
                      style="background-image:url({{ $home->getImageURLbyCollection($home->get('illustration')) }})">
                 </div>
             </div>
         </div>
 
         {{-- Link blocks --}}
-        <div class="grid grid-cols-3 gap-6 text-center lg:text-left" x-data="{ shown: false }"
-             x-intersect="shown = true">
+        <div class="grid grid-cols-3 gap-6 text-center lg:text-left opacity-0"
+             :class="{ 'opacity-0': !shown }"
+             x-data="{ shown: false }"
+             x-init="setTimeout(() => shown = true, 150)">
             @if (null !== $home->get('raccourcis'))
                 @foreach ($home->get('raccourcis') as $shortcut)
                     <x-link :href="$shortcut['link']"
@@ -58,7 +59,7 @@
                         {{-- Initial Mask --}}
                         <div
                             class="absolute top-0 left-0 w-full h-full bg-white z-1 transition-transform transform origin-top ease-out duration-500"
-                            :class="{ 'scale-y-0': shown }"
+                            :class="{ 'translate-y-[-100%]': shown }"
                             style="transition-delay: {{ 300 + $loop->index * 100 }}ms"
                         >
                         </div>