Skip to content

Commit 55043b8

Browse files
HassanZahirniaHassanZahirnia
committed
✨ Add GSAP animations for elements in explainer and partners sections on scroll into view
1 parent ce81cee commit 55043b8

File tree

2 files changed

+115
-1
lines changed

2 files changed

+115
-1
lines changed

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

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,22 @@ class="mt-5"
77
<div class="flex flex-col gap-5 lg:flex-row">
88
{{-- How does it work --}}
99
<div
10+
x-init="
11+
() => {
12+
motion.inView($el, (element) => {
13+
gsap.fromTo(
14+
$el,
15+
{ x: -10, autoAlpha: 0 },
16+
{
17+
x: 0,
18+
autoAlpha: 1,
19+
duration: 0.7,
20+
ease: 'power2.out',
21+
},
22+
)
23+
})
24+
}
25+
"
1026
class="relative flex flex-col items-center gap-5 overflow-hidden rounded-2xl bg-gray-200/60 p-8 sm:flex-row sm:justify-between sm:p-10 lg:max-w-165 xl:shrink-0 dark:bg-mirage"
1127
>
1228
{{-- Left side --}}
@@ -242,6 +258,22 @@ class="h-px w-full [background-image:linear-gradient(to_right,currentColor_0_8px
242258
{{-- Performance --}}
243259
<div class="grid items-stretch gap-5 xs:grid-cols-2">
244260
<div
261+
x-init="
262+
() => {
263+
motion.inView($el, (element) => {
264+
gsap.fromTo(
265+
$el,
266+
{ y: -10, autoAlpha: 0 },
267+
{
268+
y: 0,
269+
autoAlpha: 1,
270+
duration: 0.7,
271+
ease: 'power2.out',
272+
},
273+
)
274+
})
275+
}
276+
"
245277
class="flex flex-col items-center gap-3 rounded-2xl bg-gradient-to-tl from-[#FEF3C6] to-[#FFFBEB] p-7 2xs:items-start 2xl:gap-4 2xl:p-8 dark:from-mirage dark:to-mirage"
246278
>
247279
<x-icons.home.charging-thunder
@@ -263,6 +295,22 @@ class="text-gray-600 2xl:text-lg dark:text-zinc-400"
263295
</div>
264296
</div>
265297
<div
298+
x-init="
299+
() => {
300+
motion.inView($el, (element) => {
301+
gsap.fromTo(
302+
$el,
303+
{ y: 10, autoAlpha: 0 },
304+
{
305+
y: 0,
306+
autoAlpha: 1,
307+
duration: 0.7,
308+
ease: 'power2.out',
309+
},
310+
)
311+
})
312+
}
313+
"
266314
class="flex flex-col items-center gap-3 rounded-2xl bg-gradient-to-tl from-[#ECFCCA] to-[#F7FEE7] p-7 2xs:items-start 2xl:gap-4 2xl:p-8 dark:from-mirage dark:to-mirage"
267315
>
268316
<x-icons.home.rocket
@@ -287,6 +335,22 @@ class="text-gray-600 2xl:text-lg dark:text-zinc-400"
287335

288336
{{-- Tools --}}
289337
<div
338+
x-init="
339+
() => {
340+
motion.inView($el, (element) => {
341+
gsap.fromTo(
342+
$el,
343+
{ x: 10, autoAlpha: 0 },
344+
{
345+
x: 0,
346+
autoAlpha: 1,
347+
duration: 0.7,
348+
ease: 'power2.out',
349+
},
350+
)
351+
})
352+
}
353+
"
290354
class="flex flex-col gap-4 rounded-2xl bg-gradient-to-tl from-[#DBDCFB] to-[#F9FAFB] p-7 2xl:p-8 dark:from-mirage dark:to-mirage"
291355
>
292356
<div
@@ -341,6 +405,22 @@ class="flex flex-wrap items-start gap-x-2.5 gap-y-3.5 lg:pt-2 2xl:gap-x-3"
341405
<div class="mt-5 flex flex-col gap-5 lg:flex-row">
342406
{{-- Left side --}}
343407
<div
408+
x-init="
409+
() => {
410+
motion.inView($el, (element) => {
411+
gsap.fromTo(
412+
$el,
413+
{ x: -10, autoAlpha: 0 },
414+
{
415+
x: 0,
416+
autoAlpha: 1,
417+
duration: 0.7,
418+
ease: 'power2.out',
419+
},
420+
)
421+
})
422+
}
423+
"
344424
class="w-full rounded-2xl bg-gray-200/60 p-8 md:p-10 lg:max-w-md xl:max-w-lg dark:bg-mirage"
345425
>
346426
{{-- Header --}}
@@ -412,6 +492,22 @@ class="size-5"
412492

413493
{{-- Right side --}}
414494
<div
495+
x-init="
496+
() => {
497+
motion.inView($el, (element) => {
498+
gsap.fromTo(
499+
$el,
500+
{ x: 10, autoAlpha: 0 },
501+
{
502+
x: 0,
503+
autoAlpha: 1,
504+
duration: 0.7,
505+
ease: 'power2.out',
506+
},
507+
)
508+
})
509+
}
510+
"
415511
class="relative z-0 flex flex-col justify-center gap-4 overflow-hidden rounded-2xl bg-[#F0F2E7] p-7 2xl:p-8 dark:bg-mirage"
416512
>
417513
<div

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

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,25 @@ class="mt-5"
33
aria-labelledby="sponsors-title"
44
role="region"
55
>
6-
<div class="rounded-2xl bg-gray-200/60 p-8 md:p-10 dark:bg-mirage">
6+
<div
7+
x-init="
8+
() => {
9+
motion.inView($el, (element) => {
10+
gsap.fromTo(
11+
$el,
12+
{ y: 10, autoAlpha: 0 },
13+
{
14+
y: 0,
15+
autoAlpha: 1,
16+
duration: 0.7,
17+
ease: 'power2.out',
18+
},
19+
)
20+
})
21+
}
22+
"
23+
class="rounded-2xl bg-gray-200/60 p-8 md:p-10 dark:bg-mirage"
24+
>
725
<div
826
class="flex flex-col items-center gap-1 text-center text-pretty 2xs:items-start 2xs:text-left"
927
>

0 commit comments

Comments
 (0)