✨ Add animations to v4 features section

Author: HassanZahirnia

resources/js/app.js

@@ -14,7 +14,20 @@ import '../../docs/src/styles/docsearch.css'
 import 'swiper/css'
 import 'swiper/css/navigation'
 import 'swiper/css/pagination'
-import { animate, inView } from 'motion'
+import {
+    animate,
+    inView,
+    easeIn,
+    easeOut,
+    easeInOut,
+    backIn,
+    backOut,
+    backInOut,
+    circIn,
+    circOut,
+    circInOut,
+    anticipate,
+} from 'motion'
 
 // Swiper
 Swiper.use([Navigation, Pagination])
@@ -44,6 +57,16 @@ window.MiniSearch = MiniSearch
 window.motion = {
     animate: animate,
     inView: inView,
+    easeIn: easeIn,
+    easeOut: easeOut,
+    easeInOut: easeInOut,
+    backOut: backOut,
+    backIn: backIn,
+    backInOut: backInOut,
+    circIn: circIn,
+    circOut: circOut,
+    circInOut: circInOut,
+    anticipate: anticipate,
 }
 
 // Alpine

resources/views/components/home/v4-features.blade.php

@@ -1,5 +1,38 @@
 <section class="mx-auto w-full max-w-screen-lg px-5 pt-20">
-    <div class="isolate grid place-items-center">
+    <div
+        x-init="
+            () => {
+                if (reducedMotion) return
+                const timeline = gsap
+                    .timeline({
+                        paused: true,
+                    })
+                    .fromTo(
+                        $el,
+                        {
+                            autoAlpha: 0,
+                            y: -20,
+                        },
+                        {
+                            autoAlpha: 1,
+                            y: 0,
+                            duration: 0.7,
+                            ease: 'power2.out',
+                        },
+                    )
+                motion.inView(
+                    $el,
+                    (element) => {
+                        timeline.play()
+                    },
+                    {
+                        amount: 1,
+                    },
+                )
+            }
+        "
+        class="isolate grid place-items-center"
+    >
         <div
             class="isolate grid self-center justify-self-center [grid-area:1/-1]"
         >
@@ -136,16 +169,79 @@ class="relative -z-50 -my-14 -ml-10 w-[28rem] self-center justify-self-center [g
         />
     </div>
     <h3
+        x-init="
+            () => {
+                if (reducedMotion) return
+                const timeline = gsap
+                    .timeline({
+                        paused: true,
+                    })
+                    .fromTo(
+                        $el,
+                        {
+                            autoAlpha: 0,
+                            y: 20,
+                        },
+                        {
+                            autoAlpha: 1,
+                            y: 0,
+                            duration: 0.7,
+                            ease: 'power2.out',
+                        },
+                    )
+                motion.inView(
+                    $el,
+                    (element) => {
+                        timeline.play()
+                    },
+                    {
+                        amount: 1,
+                    },
+                )
+            }
+        "
         class="mx-auto max-w-3xl pt-3 text-center font-afacad text-2xl leading-normal text-gray-500"
     >
         Filament 4 brings powerful new tools and flexibility, simplifying
         development and enabling more dynamic, efficient, and customizable web
         applications.
     </h3>
     <div
+        x-init="
+            () => {
+                if (reducedMotion) return
+                const timeline = gsap
+                    .timeline({
+                        paused: true,
+                    })
+                    .fromTo(
+                        $refAll('slide-in-left'),
+                        {
+                            autoAlpha: 0,
+                            x: -20,
+                        },
+                        {
+                            autoAlpha: 1,
+                            x: 0,
+                            duration: 0.7,
+                            stagger: 0.1,
+                            ease: 'power2.out',
+                        },
+                    )
+                motion.inView(
+                    $el,
+                    (element) => {
+                        timeline.play()
+                    },
+                    {
+                        amount: 0.25,
+                    },
+                )
+            }
+        "
         class="grid grid-cols-[repeat(auto-fill,minmax(20rem,1fr))] items-center gap-5 pt-10 *:flex *:items-center *:gap-5 *:rounded-2xl *:bg-white *:px-5 *:py-7 *:ring-1 *:ring-black/5"
     >
-        <div>
+        <div x-ref="slide-in-left">
             {{-- Icon --}}
             <svg
                 xmlns="http://www.w3.org/2000/svg"
@@ -240,13 +336,14 @@ class="size-12 shrink-0"
                     Nested resources
                 </h4>
                 {{-- Description --}}
+
                 <p class="font-afacad text-lg leading-snug text-gray-500">
                     Open modals and slide-overs from any button, even nest them
                     with full state preservation.
                 </p>
             </div>
         </div>
-        <div>
+        <div x-ref="slide-in-left">
             {{-- Icon --}}
             <svg
                 xmlns="http://www.w3.org/2000/svg"
@@ -375,7 +472,7 @@ class="size-12 shrink-0"
                 </p>
             </div>
         </div>
-        <div>
+        <div x-ref="slide-in-left">
             {{-- Icon --}}
             <svg
                 xmlns="http://www.w3.org/2000/svg"
@@ -569,7 +666,7 @@ interface when changes occur.
                 </p>
             </div>
         </div>
-        <div>
+        <div x-ref="slide-in-left">
             {{-- Icon --}}
             <svg
                 xmlns="http://www.w3.org/2000/svg"
@@ -637,7 +734,7 @@ class="size-12 shrink-0"
                 </p>
             </div>
         </div>
-        <div>
+        <div x-ref="slide-in-left">
             {{-- Icon --}}
             <svg
                 xmlns="http://www.w3.org/2000/svg"
@@ -745,7 +842,7 @@ class="size-12 shrink-0"
                 </p>
             </div>
         </div>
-        <div>
+        <div x-ref="slide-in-left">
             {{-- Icon --}}
             <svg
                 xmlns="http://www.w3.org/2000/svg"