feat: update

src/components/HomeIndex/index.tsx

@@ -17,7 +17,12 @@ const HomeIndex: React.FC = () => {
                     r: -8,
                     h: 160,
                     w: (el: any) => {
-                        return Math.max(320, el.parentNode.offsetWidth * 0.55)
+                        let width = el.parentNode.clientWidth
+
+                        if (width < el.parentNode.scrollWidth) {
+                            width = el.parentNode.scrollWidth
+                        }
+                        return Math.max(320, width * 0.55)
                     },
                 },
 
@@ -29,7 +34,12 @@ const HomeIndex: React.FC = () => {
                     r: 15,
                     h: 360,
                     w: (el: any) => {
-                        return Math.max(220, el.parentNode.offsetWidth * 0.3)
+                        let width = el.parentNode.clientWidth
+
+                        if (width < el.parentNode.scrollWidth) {
+                            width = el.parentNode.scrollWidth
+                        }
+                        return Math.max(220, width * 0.3)
                     },
                 },
 
@@ -41,7 +51,12 @@ const HomeIndex: React.FC = () => {
                     r: 6,
                     h: 300,
                     w: (el: any) => {
-                        return Math.max(330, el.parentNode.offsetWidth * 0.55)
+                        let width = el.parentNode.clientWidth
+
+                        if (width < el.parentNode.scrollWidth) {
+                            width = el.parentNode.scrollWidth
+                        }
+                        return Math.max(330, width * 0.55)
                     },
                 },
 
@@ -53,7 +68,12 @@ const HomeIndex: React.FC = () => {
                     r: -5,
                     h: 400,
                     w: (el: any) => {
-                        return Math.max(305, el.parentNode.offsetWidth * 0.45)
+                        let width = el.parentNode.clientWidth
+
+                        if (width < el.parentNode.scrollWidth) {
+                            width = el.parentNode.scrollWidth
+                        }
+                        return Math.max(305, width * 0.45)
                     },
                 },
 
@@ -65,7 +85,12 @@ const HomeIndex: React.FC = () => {
                     r: -20,
                     h: 525,
                     w: (el: any) => {
-                        return Math.max(160, el.parentNode.offsetWidth * 0.3)
+                        let width = el.parentNode.clientWidth
+
+                        if (width < el.parentNode.scrollWidth) {
+                            width = el.parentNode.scrollWidth
+                        }
+                        return Math.max(160, width * 0.3)
                     },
                 },
 
@@ -77,7 +102,12 @@ const HomeIndex: React.FC = () => {
                     r: 10,
                     h: 160,
                     w: (el: any) => {
-                        return Math.max(320, el.parentNode.offsetWidth * 0.55)
+                        let width = el.parentNode.clientWidth
+
+                        if (width < el.parentNode.scrollWidth) {
+                            width = el.parentNode.scrollWidth
+                        }
+                        return Math.max(320, width * 0.55)
                     },
                 },
             ]
@@ -137,7 +167,14 @@ const HomeIndex: React.FC = () => {
             })
 
             gsap.from(['.card--five .card__dummy', '.card--six .card__dummy'], {
-                width: (el: any) => el.parentNode.offsetWidth * 0.26,
+                width: (el: any) => {
+                    let width = el.parentNode.clientWidth
+
+                    if (width < el.parentNode.scrollWidth) {
+                        width = el.parentNode.scrollWidth
+                    }
+                    return width * 0.26
+                },
                 scrollTrigger: {
                     trigger: '.scroller',
                     start: 'top 80%',
@@ -157,7 +194,14 @@ const HomeIndex: React.FC = () => {
             })
 
             gsap.from('.card--two .card__avatar', {
-                width: (el: any) => Math.max(330, el.parentNode.offsetWidth * 0.55) - 32,
+                width: (el: any) => {
+                    let width = el.parentNode.clientWidth
+
+                    if (width < el.parentNode.scrollWidth) {
+                        width = el.parentNode.scrollWidth
+                    }
+                    return Math.max(330, width * 0.55) - 32
+                },
                 borderRadius: '12px',
                 height: 'calc(300cqh - 2rem)',
                 scrollTrigger: {