Skip to content

Commit e9b63d5

Browse files
HassanZahirniaHassanZahirnia
committed
✨ Add reveal animations to hero elements
1 parent 3f176b6 commit e9b63d5

File tree

1 file changed

+203
-4
lines changed

1 file changed

+203
-4
lines changed

‎resources/views/components/home/hero.blade.php‎

Lines changed: 203 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,15 +6,51 @@ class="relative isolate z-0 -my-20 grid place-items-center [container-type:inlin
66
>
77
{{-- Version --}}
88
<div
9-
x-ref="version"
9+
x-init="
10+
() => {
11+
if (reducedMotion) return
12+
gsap.fromTo(
13+
$el,
14+
{
15+
autoAlpha: 0,
16+
y: -10,
17+
},
18+
{
19+
autoAlpha: 0.3,
20+
y: 0,
21+
duration: 0.8,
22+
ease: 'power1.in',
23+
},
24+
)
25+
}
26+
"
1027
class="relative -z-10 -my-3 self-center justify-self-center truncate bg-gradient-to-r from-[#DCEED8] via-[#E9E4C4] to-[#DDDBD1] bg-clip-text text-[16cqw] font-semibold tracking-wide text-transparent opacity-30 [grid-area:1/-1]"
1128
>
1229
Version 4
1330
</div>
1431

1532
{{-- Hummingbird --}}
1633
<img
17-
x-ref="hummingbird"
34+
x-init="
35+
() => {
36+
if (reducedMotion) return
37+
gsap.fromTo(
38+
$el,
39+
{
40+
autoAlpha: 0,
41+
x: -10,
42+
y: -5,
43+
},
44+
{
45+
autoAlpha: 1,
46+
x: 0,
47+
y: 0,
48+
duration: 0.7,
49+
ease: 'power1.out',
50+
},
51+
)
52+
}
53+
"
1854
src="{{ Vite::asset('resources/images/home/hummingbird.webp') }}"
1955
alt=""
2056
class="relative z-10 w-44 self-center justify-self-center [grid-area:1/-1] sm:w-[14rem]"
@@ -23,22 +59,70 @@ class="relative z-10 w-44 self-center justify-self-center [grid-area:1/-1] sm:w-
2359
<header class="relative isolate z-0 grid place-items-center pt-14 sm:pt-10">
2460
{{-- Accelerated Laravel Development --}}
2561
<img
26-
x-ref="hero-header"
62+
x-init="
63+
() => {
64+
if (reducedMotion) return
65+
gsap.fromTo(
66+
$el,
67+
{
68+
autoAlpha: 0,
69+
},
70+
{
71+
autoAlpha: 1,
72+
duration: 0.3,
73+
ease: 'power1.in',
74+
},
75+
)
76+
}
77+
"
2778
src="{{ Vite::asset('resources/images/home/hero-header.webp') }}"
2879
alt="Filament"
2980
class="w-[32rem] self-center justify-self-center [grid-area:1/-1]"
3081
/>
3182

3283
{{-- Watercolor --}}
3384
<img
34-
x-ref="hero-header"
85+
x-init="
86+
() => {
87+
if (reducedMotion) return
88+
gsap.fromTo(
89+
$el,
90+
{
91+
autoAlpha: 0,
92+
},
93+
{
94+
autoAlpha: 1,
95+
duration: 0.5,
96+
ease: 'power1.in',
97+
},
98+
)
99+
}
100+
"
35101
src="{{ Vite::asset('resources/images/home/hero-watercolor.webp') }}"
36102
alt=""
37103
class="relative -z-50 -mb-5 w-[45rem] self-center justify-self-center [grid-area:1/-1]"
38104
/>
39105

40106
{{-- Admin panel --}}
41107
<div
108+
x-init="
109+
() => {
110+
if (reducedMotion) return
111+
gsap.fromTo(
112+
$el,
113+
{
114+
autoAlpha: 0,
115+
scale: 0.9,
116+
},
117+
{
118+
autoAlpha: 1,
119+
scale: 1,
120+
duration: 0.7,
121+
ease: 'back.out(1.7)',
122+
},
123+
)
124+
}
125+
"
42126
class="relative left-5 -mt-8 hidden self-start justify-self-start [grid-area:1/-1] md:block"
43127
>
44128
<img
@@ -70,6 +154,25 @@ class="rounded-full bg-white px-4 py-1.5 capitalize ring-1 ring-black"
70154

71155
{{-- UI Components --}}
72156
<div
157+
x-init="
158+
() => {
159+
if (reducedMotion) return
160+
gsap.fromTo(
161+
$el,
162+
{
163+
autoAlpha: 0,
164+
scale: 0.9,
165+
},
166+
{
167+
autoAlpha: 1,
168+
scale: 1,
169+
duration: 0.7,
170+
ease: 'back.out(1.7)',
171+
delay: 0.2,
172+
},
173+
)
174+
}
175+
"
73176
class="relative -mt-8 hidden self-start justify-self-end [grid-area:1/-1] md:block"
74177
>
75178
<h3
@@ -103,6 +206,25 @@ class="relative -top-0.5 z-10"
103206

104207
{{-- Form builder --}}
105208
<div
209+
x-init="
210+
() => {
211+
if (reducedMotion) return
212+
gsap.fromTo(
213+
$el,
214+
{
215+
autoAlpha: 0,
216+
scale: 0.9,
217+
},
218+
{
219+
autoAlpha: 1,
220+
scale: 1,
221+
duration: 0.7,
222+
ease: 'back.out(1.7)',
223+
delay: 0.1,
224+
},
225+
)
226+
}
227+
"
106228
class="relative -mb-8 hidden self-end justify-self-start [grid-area:1/-1] md:block"
107229
>
108230
<img
@@ -134,6 +256,25 @@ class="rounded-full bg-white px-4 py-1.5 capitalize ring-1 ring-black"
134256

135257
{{-- Table builder --}}
136258
<div
259+
x-init="
260+
() => {
261+
if (reducedMotion) return
262+
gsap.fromTo(
263+
$el,
264+
{
265+
autoAlpha: 0,
266+
scale: 0.9,
267+
},
268+
{
269+
autoAlpha: 1,
270+
scale: 1,
271+
duration: 0.7,
272+
ease: 'back.out(1.7)',
273+
delay: 0.3,
274+
},
275+
)
276+
}
277+
"
137278
class="relative -mb-8 hidden self-end justify-self-end [grid-area:1/-1] md:block"
138279
>
139280
<div class="flex justify-end">
@@ -167,6 +308,26 @@ class="rounded-full bg-white px-4 py-1.5 capitalize ring-1 ring-black"
167308

168309
{{-- Left leaf --}}
169310
<div
311+
x-init="
312+
() => {
313+
if (reducedMotion) return
314+
gsap.fromTo(
315+
$el,
316+
{
317+
autoAlpha: 0,
318+
x: -10,
319+
y: -5,
320+
},
321+
{
322+
autoAlpha: 1,
323+
x: 0,
324+
y: 0,
325+
duration: 0.7,
326+
ease: 'power1.out',
327+
},
328+
)
329+
}
330+
"
170331
class="relative -left-5 -top-10 -z-40 hidden self-center justify-self-start [grid-area:1/-1] md:block"
171332
>
172333
<svg
@@ -244,6 +405,26 @@ class="relative -left-5 -top-10 -z-40 hidden self-center justify-self-start [gri
244405

245406
{{-- Right leaf --}}
246407
<div
408+
x-init="
409+
() => {
410+
if (reducedMotion) return
411+
gsap.fromTo(
412+
$el,
413+
{
414+
autoAlpha: 0,
415+
x: 10,
416+
y: 5,
417+
},
418+
{
419+
autoAlpha: 1,
420+
x: 0,
421+
y: 0,
422+
duration: 0.7,
423+
ease: 'power1.out',
424+
},
425+
)
426+
}
427+
"
247428
class="relative -left-10 -z-40 hidden self-center justify-self-end [grid-area:1/-1] md:block"
248429
>
249430
<svg
@@ -322,6 +503,24 @@ class="relative -left-10 -z-40 hidden self-center justify-self-end [grid-area:1/
322503

323504
{{-- Tagline --}}
324505
<h2
506+
x-init="
507+
() => {
508+
if (reducedMotion) return
509+
gsap.fromTo(
510+
$el,
511+
{
512+
autoAlpha: 0,
513+
y: 10,
514+
},
515+
{
516+
autoAlpha: 1,
517+
y: 0,
518+
duration: 0.5,
519+
ease: 'power1.out',
520+
},
521+
)
522+
}
523+
"
325524
class="mx-auto max-w-xl pt-5 text-center font-afacad text-2xl leading-normal text-[#49485F]"
326525
>
327526
Shape your apps with beautiful, powerful and intuitive, TALL stack

0 commit comments

Comments
 (0)