Skip to content

Commit 14c485d

Browse files
HassanZahirniaHassanZahirnia
committed
⚡️ Add hover animation for get started button
1 parent deeb3ad commit 14c485d

File tree

2 files changed

+71
-36
lines changed

2 files changed

+71
-36
lines changed

‎resources/js/app.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import 'swiper/css/navigation'
1616
import 'swiper/css/pagination'
1717
import {
1818
animate,
19+
hover,
1920
inView,
2021
easeIn,
2122
easeOut,
@@ -27,6 +28,7 @@ import {
2728
circOut,
2829
circInOut,
2930
anticipate,
31+
spring,
3032
} from 'motion'
3133

3234
// Swiper
@@ -56,6 +58,7 @@ window.MiniSearch = MiniSearch
5658
// Motion
5759
window.motion = {
5860
animate: animate,
61+
hover: hover,
5962
inView: inView,
6063
easeIn: easeIn,
6164
easeOut: easeOut,
@@ -67,6 +70,7 @@ window.motion = {
6770
circOut: circOut,
6871
circInOut: circInOut,
6972
anticipate: anticipate,
73+
spring: spring,
7074
}
7175

7276
// Alpine

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

Lines changed: 67 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -529,6 +529,36 @@ class="mx-auto max-w-2xl pt-5 text-center font-afacad text-3xl leading-normal te
529529

530530
<div class="grid place-items-center pt-7">
531531
<a
532+
x-init="
533+
() => {
534+
motion.hover($el, (element) => {
535+
motion.animate(
536+
$refs.rocket,
537+
{
538+
x: 30,
539+
y: -30,
540+
},
541+
{
542+
duration: 0.8,
543+
ease: motion.backIn,
544+
},
545+
)
546+
547+
return () =>
548+
motion.animate(
549+
$refs.rocket,
550+
{
551+
x: 0,
552+
y: 0,
553+
},
554+
{
555+
duration: 0.8,
556+
ease: motion.backOut,
557+
},
558+
)
559+
})
560+
}
561+
"
532562
href="{{ route('docs') }}"
533563
class="group inline-flex items-center gap-3 rounded-3xl bg-[#F4E7E2] py-2 pl-2 pr-5 text-lg font-medium transition duration-300 ease-in-out hover:bg-[#ffe8ce]"
534564
>
@@ -657,42 +687,43 @@ class="scale-75 opacity-50"
657687
</svg>
658688
</div>
659689
{{-- Rocket --}}
660-
<svg
661-
x-init="
662-
() => {
663-
motion.animate(
664-
$el,
665-
{
666-
x: 3,
667-
y: 3,
668-
rotate: -3,
669-
transformPerspective: 600,
670-
},
671-
{
672-
duration: 1.5,
673-
repeat: Infinity,
674-
repeatType: 'mirror',
675-
ease: motion.easeInOut,
676-
},
677-
)
678-
}
679-
"
680-
xmlns="http://www.w3.org/2000/svg"
681-
width="25"
682-
height="25"
683-
viewBox="0 0 25 25"
684-
fill="none"
685-
class="will-change-transform"
686-
>
687-
<path
688-
d="M17.627 11.7676V17.4118C17.6269 17.6058 17.5498 17.7918 17.4127 17.9291L14.2679 21.0739C14.1717 21.17 14.0507 21.2372 13.9183 21.2684C13.786 21.2995 13.6476 21.2932 13.5186 21.2502C13.3897 21.2071 13.2753 21.129 13.1882 21.0247C13.1012 20.9203 13.0448 20.7938 13.0255 20.6592L12.5 16.8945L17.627 11.7676ZM13.2324 7.37305H7.58822C7.39423 7.37314 7.20819 7.45018 7.07095 7.58728L3.92611 10.7321C3.83009 10.8283 3.76275 10.9494 3.73163 11.0818C3.70049 11.2141 3.70681 11.3524 3.74984 11.4814C3.79289 11.6103 3.87097 11.7247 3.97535 11.8118C4.07973 11.899 4.20628 11.9553 4.34084 11.9745L8.10549 12.5L13.2324 7.37305ZM4.44338 20.5566C7.89034 20.5566 9.08419 18.754 9.4385 17.9767L7.02334 15.5615C6.24606 15.9158 4.44338 17.1097 4.44338 20.5566Z"
689-
fill="#C4C4C3"
690-
/>
691-
<path
692-
d="M21.2754 5.09522C21.2537 4.73811 21.1021 4.40127 20.849 4.14828C20.5961 3.89529 20.2593 3.74364 19.9021 3.72193C18.7504 3.65327 15.807 3.75856 13.3643 6.20027L12.9295 6.64064H7.58918C7.39608 6.63955 7.20469 6.67686 7.02614 6.75042C6.84759 6.82398 6.68545 6.9323 6.54914 7.0691L3.40888 10.2112C3.2163 10.4036 3.08117 10.646 3.01864 10.9109C2.95612 11.176 2.96868 11.4531 3.05492 11.7114C3.14116 11.9695 3.29766 12.1987 3.50686 12.3729C3.71607 12.5472 3.96969 12.6597 4.23927 12.6978L7.7613 13.1894L11.8088 17.2369L12.3005 20.7608C12.3383 21.0304 12.4507 21.284 12.6251 21.493C12.7995 21.7021 13.029 21.8582 13.2874 21.9437C13.4379 21.9939 13.5956 22.0197 13.7543 22.0197C13.9465 22.02 14.1368 21.9824 14.3145 21.9088C14.492 21.8353 14.6532 21.7273 14.7889 21.5912L17.931 18.4509C18.0678 18.3146 18.1761 18.1525 18.2497 17.9739C18.3232 17.7954 18.3605 17.604 18.3594 17.4109V12.0706L18.7962 11.6339C21.2388 9.19129 21.3441 6.24787 21.2754 5.09522ZM7.58918 8.10548H11.4646L7.84553 11.7236L4.44343 11.2494L7.58918 8.10548ZM14.4016 7.2403C15.1054 6.53218 15.9522 5.98238 16.8854 5.62762C17.8186 5.27286 18.8168 5.12133 19.8133 5.18312C19.8775 6.18011 19.7275 7.17929 19.3735 8.1135C19.0194 9.04772 18.4695 9.89533 17.7607 10.5994L12.5001 15.8582L9.14192 12.5L14.4016 7.2403ZM16.8946 17.4109L13.7516 20.5566L13.2764 17.1536L16.8946 13.5355V17.4109ZM10.1051 18.2806C9.69306 19.1833 8.31519 21.2891 4.44343 21.2891C4.24918 21.2891 4.06289 21.2119 3.92553 21.0746C3.78818 20.9372 3.71101 20.7509 3.71101 20.5566C3.71101 16.6849 5.81672 15.307 6.71943 14.8941C6.80696 14.8542 6.90149 14.8319 6.99763 14.8286C7.09377 14.8252 7.18964 14.8407 7.27975 14.8744C7.36987 14.908 7.45247 14.9591 7.52284 15.0247C7.59321 15.0903 7.64997 15.1691 7.68989 15.2567C7.72981 15.3442 7.75209 15.4388 7.75548 15.5349C7.75886 15.631 7.74327 15.7269 7.70961 15.817C7.67594 15.9071 7.62486 15.9897 7.55926 16.06C7.49367 16.1304 7.41487 16.1872 7.32734 16.2271C6.73866 16.4954 5.43952 17.3587 5.21064 19.7894C7.64137 19.5605 8.50654 18.2614 8.77296 17.6727C8.81287 17.5852 8.86964 17.5064 8.94001 17.4408C9.01039 17.3752 9.09299 17.3241 9.1831 17.2905C9.27322 17.2568 9.36909 17.2412 9.46523 17.2446C9.56136 17.248 9.65589 17.2703 9.74342 17.3102C9.83095 17.3501 9.90975 17.4069 9.97532 17.4773C10.041 17.5476 10.0921 17.6302 10.1256 17.7203C10.1593 17.8104 10.1749 17.9063 10.1715 18.0024C10.1681 18.0986 10.145 18.1931 10.1051 18.2806Z"
693-
fill="black"
694-
/>
695-
</svg>
690+
<div x-ref="rocket">
691+
<svg
692+
x-init="
693+
() => {
694+
motion.animate(
695+
$el,
696+
{
697+
x: 3,
698+
y: 3,
699+
rotate: -3,
700+
},
701+
{
702+
duration: 1.5,
703+
repeat: Infinity,
704+
repeatType: 'mirror',
705+
ease: motion.easeInOut,
706+
},
707+
)
708+
}
709+
"
710+
xmlns="http://www.w3.org/2000/svg"
711+
width="25"
712+
height="25"
713+
viewBox="0 0 25 25"
714+
fill="none"
715+
class="will-change-transform"
716+
>
717+
<path
718+
d="M17.627 11.7676V17.4118C17.6269 17.6058 17.5498 17.7918 17.4127 17.9291L14.2679 21.0739C14.1717 21.17 14.0507 21.2372 13.9183 21.2684C13.786 21.2995 13.6476 21.2932 13.5186 21.2502C13.3897 21.2071 13.2753 21.129 13.1882 21.0247C13.1012 20.9203 13.0448 20.7938 13.0255 20.6592L12.5 16.8945L17.627 11.7676ZM13.2324 7.37305H7.58822C7.39423 7.37314 7.20819 7.45018 7.07095 7.58728L3.92611 10.7321C3.83009 10.8283 3.76275 10.9494 3.73163 11.0818C3.70049 11.2141 3.70681 11.3524 3.74984 11.4814C3.79289 11.6103 3.87097 11.7247 3.97535 11.8118C4.07973 11.899 4.20628 11.9553 4.34084 11.9745L8.10549 12.5L13.2324 7.37305ZM4.44338 20.5566C7.89034 20.5566 9.08419 18.754 9.4385 17.9767L7.02334 15.5615C6.24606 15.9158 4.44338 17.1097 4.44338 20.5566Z"
719+
fill="#C4C4C3"
720+
/>
721+
<path
722+
d="M21.2754 5.09522C21.2537 4.73811 21.1021 4.40127 20.849 4.14828C20.5961 3.89529 20.2593 3.74364 19.9021 3.72193C18.7504 3.65327 15.807 3.75856 13.3643 6.20027L12.9295 6.64064H7.58918C7.39608 6.63955 7.20469 6.67686 7.02614 6.75042C6.84759 6.82398 6.68545 6.9323 6.54914 7.0691L3.40888 10.2112C3.2163 10.4036 3.08117 10.646 3.01864 10.9109C2.95612 11.176 2.96868 11.4531 3.05492 11.7114C3.14116 11.9695 3.29766 12.1987 3.50686 12.3729C3.71607 12.5472 3.96969 12.6597 4.23927 12.6978L7.7613 13.1894L11.8088 17.2369L12.3005 20.7608C12.3383 21.0304 12.4507 21.284 12.6251 21.493C12.7995 21.7021 13.029 21.8582 13.2874 21.9437C13.4379 21.9939 13.5956 22.0197 13.7543 22.0197C13.9465 22.02 14.1368 21.9824 14.3145 21.9088C14.492 21.8353 14.6532 21.7273 14.7889 21.5912L17.931 18.4509C18.0678 18.3146 18.1761 18.1525 18.2497 17.9739C18.3232 17.7954 18.3605 17.604 18.3594 17.4109V12.0706L18.7962 11.6339C21.2388 9.19129 21.3441 6.24787 21.2754 5.09522ZM7.58918 8.10548H11.4646L7.84553 11.7236L4.44343 11.2494L7.58918 8.10548ZM14.4016 7.2403C15.1054 6.53218 15.9522 5.98238 16.8854 5.62762C17.8186 5.27286 18.8168 5.12133 19.8133 5.18312C19.8775 6.18011 19.7275 7.17929 19.3735 8.1135C19.0194 9.04772 18.4695 9.89533 17.7607 10.5994L12.5001 15.8582L9.14192 12.5L14.4016 7.2403ZM16.8946 17.4109L13.7516 20.5566L13.2764 17.1536L16.8946 13.5355V17.4109ZM10.1051 18.2806C9.69306 19.1833 8.31519 21.2891 4.44343 21.2891C4.24918 21.2891 4.06289 21.2119 3.92553 21.0746C3.78818 20.9372 3.71101 20.7509 3.71101 20.5566C3.71101 16.6849 5.81672 15.307 6.71943 14.8941C6.80696 14.8542 6.90149 14.8319 6.99763 14.8286C7.09377 14.8252 7.18964 14.8407 7.27975 14.8744C7.36987 14.908 7.45247 14.9591 7.52284 15.0247C7.59321 15.0903 7.64997 15.1691 7.68989 15.2567C7.72981 15.3442 7.75209 15.4388 7.75548 15.5349C7.75886 15.631 7.74327 15.7269 7.70961 15.817C7.67594 15.9071 7.62486 15.9897 7.55926 16.06C7.49367 16.1304 7.41487 16.1872 7.32734 16.2271C6.73866 16.4954 5.43952 17.3587 5.21064 19.7894C7.64137 19.5605 8.50654 18.2614 8.77296 17.6727C8.81287 17.5852 8.86964 17.5064 8.94001 17.4408C9.01039 17.3752 9.09299 17.3241 9.1831 17.2905C9.27322 17.2568 9.36909 17.2412 9.46523 17.2446C9.56136 17.248 9.65589 17.2703 9.74342 17.3102C9.83095 17.3501 9.90975 17.4069 9.97532 17.4773C10.041 17.5476 10.0921 17.6302 10.1256 17.7203C10.1593 17.8104 10.1749 17.9063 10.1715 18.0024C10.1681 18.0986 10.145 18.1931 10.1051 18.2806Z"
723+
fill="black"
724+
/>
725+
</svg>
726+
</div>
696727
</div>
697728
<div
698729
class="transition duration-300 ease-in-out will-change-transform group-hover:translate-x-px"

0 commit comments

Comments
 (0)