Skip to content

Commit 1f1e1b9

Browse files
HassanZahirniaHassanZahirnia
committed
🔥 Add GSAP and update theme toggle animations
1 parent a58a438 commit 1f1e1b9

File tree

4 files changed

+89
-106
lines changed

4 files changed

+89
-106
lines changed

‎package-lock.json

Lines changed: 8 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616
"@tailwindcss/typography": "^0.5.16",
1717
"alpinejs": "^3.14.9",
1818
"axios": "^1.9.0",
19+
"gsap": "^3.13.0",
1920
"laravel-vite-plugin": "^0.7.8",
2021
"motion": "^12.16.0",
2122
"number-flow": "^0.5.7",

‎resources/js/app.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import './fonts'
22
import './bootstrap'
33
import 'number-flow'
4+
import { gsap } from 'gsap'
45
import {
56
Livewire,
67
Alpine,
@@ -49,6 +50,9 @@ window.motion = {
4950
cubicBezier: cubicBezier,
5051
}
5152

53+
// GSAP
54+
window.gsap = gsap
55+
5256
// Alpine
5357
Alpine.data('codeBlock', codeBlock)
5458
Alpine.magic('refAll', (el) => {

‎resources/views/components/theme-toggle.blade.php

Lines changed: 76 additions & 106 deletions
Original file line numberDiff line numberDiff line change
@@ -1,120 +1,90 @@
11
<div
22
x-on:click="darkMode = !darkMode"
33
x-data="{
4-
nightToDay: [
5-
[
6-
'.theme-selector-moon',
7-
{
8-
opacity: [1, 0],
9-
transform:
10-
'translate(0%, -50%) translate(12px, 0px) rotate(70deg) scale(0.6, 0.6)',
11-
},
12-
{ duration: 0.3, ease: motion.easeOut },
13-
],
4+
timeline: null,
145
15-
[
16-
'.theme-selector-mini-star',
17-
{ opacity: [1, 0], scale: [1, 0] },
18-
{ duration: 0.3, ease: motion.easeOut, at: 0 },
19-
],
20-
21-
[
22-
'.theme-selector-micro-star',
23-
{ opacity: [1, 0], scale: [1, 0] },
24-
{ duration: 0.3, ease: motion.easeOut, at: 0 },
25-
],
26-
27-
[
28-
'.theme-selector-sunball',
29-
{ opacity: [0, 1], x: [-5, 0], y: [-5, 0], scale: [0, 1] },
30-
{
31-
duration: 0.3,
32-
ease: motion.easeOut,
33-
at: 0.15,
34-
},
35-
],
36-
37-
[
38-
'.theme-selector-sunshine',
39-
{ opacity: [0, 1], scale: [0, 1], rotate: [-180, 0] },
40-
{
41-
duration: 0.3,
42-
ease: motion.easeOut,
43-
at: 0.15,
44-
},
45-
],
46-
],
47-
dayToNight: [
48-
[
49-
'.theme-selector-sunshine',
50-
{ opacity: [1, 0], scale: [1, 0], rotate: [0, -180] },
51-
{
52-
duration: 0.3,
53-
ease: motion.easeOut,
54-
},
55-
],
6+
init() {
7+
gsap.to('.theme-selector', {
8+
scale: 1,
9+
duration: 0.1,
10+
})
5611
57-
[
58-
'.theme-selector-sunball',
59-
{ opacity: [1, 0], x: [0, -5], y: [0, -5], scale: [1, 0] },
60-
{
12+
timeline = gsap
13+
.timeline({
14+
paused: true,
15+
})
16+
.to('.theme-selector-moon', {
17+
rotate: 70,
18+
ease: 'sine.out',
6119
duration: 0.3,
62-
ease: motion.easeOut,
63-
at: 0.15,
64-
},
65-
],
66-
67-
[
68-
'.theme-selector-micro-star',
69-
{ opacity: [0, 1], scale: [0, 1] },
70-
{ duration: 0.3, ease: motion.easeOut, at: 0 },
71-
],
72-
73-
[
74-
'.theme-selector-mini-star',
75-
{ opacity: [0, 1], scale: [0, 1] },
76-
{ duration: 0.3, ease: motion.easeOut, at: 0 },
77-
],
78-
79-
[
80-
'.theme-selector-moon',
81-
{
82-
opacity: [0, 1],
83-
transform: 'translate(0%, -50%) translate(12px, 0px)',
84-
},
85-
{ duration: 0.3, ease: motion.easeOut, at: 0 },
86-
],
87-
],
88-
setInitialState() {
89-
// Set initial state directly without animation
90-
if (! darkMode) {
91-
document.querySelector('.theme-selector-sunball').style.opacity =
92-
'0'
93-
document.querySelector('.theme-selector-sunshine').style.opacity =
94-
'0'
95-
document.querySelector('.theme-selector-moon').style.transform =
96-
'translate(0%, -50%) translate(12px, 0px)'
97-
} else {
98-
document.querySelector('.theme-selector-moon').style.opacity = '0'
99-
document.querySelector('.theme-selector-moon').style.transform =
100-
'translate(0%, -50%) translate(12px, 0px) rotate(70deg) scale(0.6, 0.6)'
101-
document.querySelector('.theme-selector-mini-star').style.opacity =
102-
'0'
103-
document.querySelector('.theme-selector-micro-star').style.opacity =
104-
'0'
105-
}
106-
},
107-
init() {
108-
motion.animate($el, { scale: 1 }, { duration: 0.1 })
20+
})
21+
.to(
22+
'.theme-selector-mini-star',
23+
{
24+
autoAlpha: 0,
25+
scale: 0,
26+
ease: 'sine.out',
27+
duration: 0.3,
28+
},
29+
'>-0.3',
30+
)
31+
.to(
32+
'.theme-selector-micro-star',
33+
{
34+
autoAlpha: 0,
35+
scale: 0,
36+
ease: 'sine.out',
37+
duration: 0.3,
38+
},
39+
'<',
40+
)
41+
.to(
42+
'.theme-selector-moon',
43+
{
44+
scale: 0.6,
45+
ease: 'sine.out',
46+
duration: 0.3,
47+
},
48+
'<',
49+
)
50+
.fromTo(
51+
'.theme-selector-sunball',
52+
{
53+
scale: 0,
54+
x: -5,
55+
y: 5,
56+
},
57+
{
58+
x: 0,
59+
y: 0,
60+
scale: 1,
61+
ease: 'expo.out',
62+
duration: 0.3,
63+
},
64+
'>-0.15',
65+
)
66+
.fromTo(
67+
'.theme-selector-sunshine',
68+
{
69+
scale: 0,
70+
rotate: -180,
71+
},
72+
{
73+
scale: 1,
74+
rotate: 0,
75+
ease: 'expo.out',
76+
duration: 0.3,
77+
},
78+
'<',
79+
)
10980
110-
this.setInitialState()
81+
if (darkMode) timeline.progress(1)
11182
112-
// Watch for dark mode changes
11383
$watch('darkMode', (value) => {
11484
if (value) {
115-
motion.animate(this.nightToDay)
85+
timeline.play()
11686
} else {
117-
motion.animate(this.dayToNight)
87+
timeline.reverse()
11888
}
11989
})
12090
},

0 commit comments

Comments
 (0)