Skip to content

Commit 8c837c0

Browse files
HassanZahirniaHassanZahirnia
committed
✨ Add reveal animations to footer
1 parent 319cea8 commit 8c837c0

File tree

2 files changed

+168
-61
lines changed

2 files changed

+168
-61
lines changed

‎resources/views/components/footer.blade.php

+90-13
Original file line numberDiff line numberDiff line change
@@ -4,21 +4,60 @@ class="2xl:max-w-8xl mx-auto max-w-5xl px-5 pb-5 pt-20 xl:max-w-7xl"
44
>
55
<div class="flex flex-wrap items-center justify-between gap-6">
66
{{-- Logo --}}
7-
<a
8-
href="/"
9-
class="transition duration-200 will-change-transform hover:scale-[1.02]"
10-
aria-label="NativePHP homepage"
7+
<div
8+
x-init="
9+
() => {
10+
motion.inView($el, (element) => {
11+
motion.animate(
12+
$el,
13+
{
14+
opacity: [0, 1],
15+
x: [-10, 0],
16+
},
17+
{
18+
duration: 0.7,
19+
ease: motion.circOut,
20+
},
21+
)
22+
})
23+
}
24+
"
25+
class="opacity-0"
1126
>
12-
<x-logo
13-
class="h-5"
14-
aria-hidden="true"
15-
alt="NativePHP Logo"
16-
/>
17-
<span class="sr-only">NativePHP homepage</span>
18-
</a>
27+
<a
28+
href="/"
29+
class="transition duration-200 will-change-transform hover:scale-[1.02]"
30+
aria-label="NativePHP homepage"
31+
>
32+
<x-logo
33+
class="h-5"
34+
aria-hidden="true"
35+
alt="NativePHP Logo"
36+
/>
37+
<span class="sr-only">NativePHP homepage</span>
38+
</a>
39+
</div>
1940

2041
{{-- Social links --}}
2142
<nav
43+
x-init="
44+
() => {
45+
motion.inView($el, (element) => {
46+
motion.animate(
47+
$refAll('socialLink'),
48+
{
49+
y: [10, 0],
50+
opacity: [0, 1],
51+
},
52+
{
53+
duration: 0.7,
54+
ease: motion.backOut,
55+
delay: motion.stagger(0.1),
56+
},
57+
)
58+
})
59+
}
60+
"
2261
class="flex flex-wrap items-center justify-center gap-2.5"
2362
aria-label="Social networks"
2463
>
@@ -41,7 +80,26 @@ class="flex items-center pb-3 pt-5"
4180
class="flex flex-wrap items-center justify-between gap-x-5 gap-y-3 text-sm text-gray-500 dark:text-gray-400/80"
4281
aria-label="Credits and copyright information"
4382
>
44-
<div>
83+
<div
84+
x-init="
85+
() => {
86+
motion.inView($el, (element) => {
87+
motion.animate(
88+
$el,
89+
{
90+
opacity: [0, 1],
91+
x: [-10, 0],
92+
},
93+
{
94+
duration: 0.7,
95+
ease: motion.circOut,
96+
},
97+
)
98+
})
99+
}
100+
"
101+
class="opacity-0"
102+
>
45103
<span>Logo by</span>
46104
<a
47105
href="https://twitter.com/caneco"
@@ -54,7 +112,26 @@ class="transition duration-200 hover:text-black dark:hover:text-white"
54112
</a>
55113
<span>.</span>
56114
</div>
57-
<div>
115+
<div
116+
x-init="
117+
() => {
118+
motion.inView($el, (element) => {
119+
motion.animate(
120+
$el,
121+
{
122+
opacity: [0, 1],
123+
x: [10, 0],
124+
},
125+
{
126+
duration: 0.7,
127+
ease: motion.circOut,
128+
},
129+
)
130+
})
131+
}
132+
"
133+
class="opacity-0"
134+
>
58135
<span>© {{ date('Y') }} Maintained by</span>
59136
<a
60137
href="https://twitter.com/marcelpociot"

‎resources/views/components/social-networks-all.blade.php

+78-48
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,89 @@
1-
<a
2-
href="https://bsky.app/profile/nativephp.bsky.social"
3-
title="Bluesky"
4-
class="group inline-grid size-10 place-items-center rounded-xl bg-gray-100 transition duration-200 hover:bg-gray-200/70 dark:bg-gray-900/80 dark:hover:bg-gray-900/60"
1+
<div
2+
x-ref="socialLink"
3+
class="opacity-0"
54
>
6-
<x-icons.bluesky
7-
class="size-[1.1rem] text-black transition duration-200 group-hover:text-violet-400 dark:text-white"
8-
/>
9-
</a>
5+
<a
6+
href="https://bsky.app/profile/nativephp.bsky.social"
7+
title="Bluesky"
8+
class="group inline-grid size-10 place-items-center rounded-xl bg-gray-100 transition duration-200 hover:bg-gray-200/70 dark:bg-gray-900/80 dark:hover:bg-gray-900/60"
9+
>
10+
<x-icons.bluesky
11+
class="size-[1.1rem] text-black transition duration-200 group-hover:text-violet-400 dark:text-white"
12+
/>
13+
</a>
14+
</div>
1015

11-
<a
12-
href="https://discord.gg/X62tWNStZK"
13-
title="Go to discord server"
14-
class="group inline-grid size-10 place-items-center rounded-xl bg-gray-100 transition duration-200 hover:bg-gray-200/70 dark:bg-gray-900/80 dark:hover:bg-gray-900/60"
16+
<div
17+
x-ref="socialLink"
18+
class="opacity-0"
1519
>
16-
<x-icons.discord
17-
class="size-[1.1rem] text-black transition duration-200 group-hover:text-violet-400 dark:text-white"
18-
/>
19-
</a>
20+
<a
21+
href="https://discord.gg/X62tWNStZK"
22+
title="Go to discord server"
23+
class="group inline-grid size-10 place-items-center rounded-xl bg-gray-100 transition duration-200 hover:bg-gray-200/70 dark:bg-gray-900/80 dark:hover:bg-gray-900/60"
24+
>
25+
<x-icons.discord
26+
class="size-[1.1rem] text-black transition duration-200 group-hover:text-violet-400 dark:text-white"
27+
/>
28+
</a>
29+
</div>
2030

21-
<a
22-
href="https://opencollective.com/nativephp"
23-
title="NativePHP on Open Collective"
24-
class="group inline-grid size-10 place-items-center rounded-xl bg-gray-100 transition duration-200 hover:bg-gray-200/70 dark:bg-gray-900/80 dark:hover:bg-gray-900/60"
31+
<div
32+
x-ref="socialLink"
33+
class="opacity-0"
2534
>
26-
<x-icons.opencollective
27-
class="size-[1.1rem] text-black transition duration-200 hover:invert-0 group-hover:text-violet-400 dark:invert"
28-
/>
29-
</a>
35+
<a
36+
href="https://opencollective.com/nativephp"
37+
title="NativePHP on Open Collective"
38+
class="group inline-grid size-10 place-items-center rounded-xl bg-gray-100 transition duration-200 hover:bg-gray-200/70 dark:bg-gray-900/80 dark:hover:bg-gray-900/60"
39+
>
40+
<x-icons.opencollective
41+
class="size-[1.1rem] text-black transition duration-200 hover:invert-0 group-hover:text-violet-400 dark:invert"
42+
/>
43+
</a>
44+
</div>
3045

31-
<a
32-
href="https://github.com/nativephp"
33-
title="Source code of NativePHP"
34-
class="group inline-grid size-10 place-items-center rounded-xl bg-gray-100 transition duration-200 hover:bg-gray-200/70 dark:bg-gray-900/80 dark:hover:bg-gray-900/60"
46+
<div
47+
x-ref="socialLink"
48+
class="opacity-0"
3549
>
36-
<x-icons.github
37-
class="size-[1.1rem] transition duration-200 group-hover:fill-violet-400 dark:fill-white"
38-
/>
39-
</a>
50+
<a
51+
href="https://github.com/nativephp"
52+
title="Source code of NativePHP"
53+
class="group inline-grid size-10 place-items-center rounded-xl bg-gray-100 transition duration-200 hover:bg-gray-200/70 dark:bg-gray-900/80 dark:hover:bg-gray-900/60"
54+
>
55+
<x-icons.github
56+
class="size-[1.1rem] transition duration-200 group-hover:fill-violet-400 dark:fill-white"
57+
/>
58+
</a>
59+
</div>
4060

41-
<a
42-
href="https://pinkary.com/@nativephp"
43-
title="NativePHP on Pinkary"
44-
class="group inline-grid size-10 place-items-center rounded-xl bg-gray-100 transition duration-200 hover:bg-gray-200/70 dark:bg-gray-900/80 dark:hover:bg-gray-900/60"
61+
<div
62+
x-ref="socialLink"
63+
class="opacity-0"
4564
>
46-
<x-icons.pinkary
47-
class="size-[1.1rem] text-black transition duration-200 hover:invert-0 group-hover:text-violet-400 dark:invert"
48-
/>
49-
</a>
65+
<a
66+
href="https://pinkary.com/@nativephp"
67+
title="NativePHP on Pinkary"
68+
class="group inline-grid size-10 place-items-center rounded-xl bg-gray-100 transition duration-200 hover:bg-gray-200/70 dark:bg-gray-900/80 dark:hover:bg-gray-900/60"
69+
>
70+
<x-icons.pinkary
71+
class="size-[1.1rem] text-black transition duration-200 hover:invert-0 group-hover:text-violet-400 dark:invert"
72+
/>
73+
</a>
74+
</div>
5075

51-
<a
52-
href="https://www.linkedin.com/company/nativephp/"
53-
title="NativePHP on LinkedIn"
54-
class="group inline-grid size-10 place-items-center rounded-xl bg-gray-100 transition duration-200 hover:bg-gray-200/70 dark:bg-gray-900/80 dark:hover:bg-gray-900/60"
76+
<div
77+
x-ref="socialLink"
78+
class="opacity-0"
5579
>
56-
<x-icons.linkedin
57-
class="size-[1.1rem] text-black transition duration-200 group-hover:text-violet-400 dark:text-white"
58-
/>
59-
</a>
80+
<a
81+
href="https://www.linkedin.com/company/nativephp/"
82+
title="NativePHP on LinkedIn"
83+
class="group inline-grid size-10 place-items-center rounded-xl bg-gray-100 transition duration-200 hover:bg-gray-200/70 dark:bg-gray-900/80 dark:hover:bg-gray-900/60"
84+
>
85+
<x-icons.linkedin
86+
class="size-[1.1rem] text-black transition duration-200 group-hover:text-violet-400 dark:text-white"
87+
/>
88+
</a>
89+
</div>

0 commit comments

Comments
 (0)