feat(balloon): limiting skewX movement to balloon string instead of w…

…hole balloon
mateoguzmana · Aug 16, 2022 · cfbba1f · cfbba1f
1 parent 4bc8ef5
commit cfbba1f
Showing 1 changed file with 23 additions and 23 deletions.
diff --git a/src/components/Balloon.tsx b/src/components/Balloon.tsx
@@ -42,16 +42,16 @@ function Balloon({
   );
 
   return (
-    <Group transform={stringRotationTransform}>
-      <Group transform={[{ scale: depth }]}>
-        <Group transform={[{ translateX: x }]}>
-          <Group
-            transform={[
-              {
-                translateY: y,
-              },
-            ]}
-          >
+    <Group transform={[{ scale: depth }]}>
+      <Group transform={[{ translateX: x }]}>
+        <Group
+          transform={[
+            {
+              translateY: y,
+            },
+          ]}
+        >
+          <Group transform={stringRotationTransform}>
             <Group transform={[{ translateX: -55 }]}>
               <Path
                 path={`M 100 22 C 90 10, 110 80, 100 100 S 100 170, 100 150`}
@@ -61,22 +61,22 @@ function Balloon({
                 strokeWidth={5}
               />
             </Group>
+          </Group>
 
-            <Group transform={[{ translateY: -50 }]}>
-              <Group>
-                <Oval height={r * 2.3} width={r * 2} color={color} />
-                <Shadow dx={-12} dy={-12} blur={40} color="#fff" inner />
-              </Group>
+          <Group transform={[{ translateY: -50 }]}>
+            <Group>
+              <Oval height={r * 2.3} width={r * 2} color={color} />
+              <Shadow dx={-12} dy={-12} blur={40} color="#fff" inner />
             </Group>
-
-            <Circle
-              cx={r / 0.8}
-              cy={-25}
-              r={r / 4}
-              color={palette.gray}
-              opacity={0.3}
-            />
           </Group>
+
+          <Circle
+            cx={r / 0.8}
+            cy={-25}
+            r={r / 4}
+            color={palette.gray}
+            opacity={0.3}
+          />
         </Group>
       </Group>
     </Group>