More tweaks to animation (#5082)

src/lib/custom-animations/CountWheel.tsx

@@ -151,12 +151,12 @@ export function CountWheel({
               {formattedCount}
             </Text>
           </Animated.View>
-          {shouldAnimate ? (
+          {shouldAnimate && (likeCount > 1 || !isLiked) ? (
             <Animated.View
               entering={exitingAnimation}
               // Add 2 to the key so there are never duplicates
               key={key + 2}
-              style={[a.absolute, {width: 50}]}
+              style={[a.absolute, {width: 50, opacity: 0}]}
               aria-disabled={true}>
               <Text
                 style={[

src/lib/custom-animations/CountWheel.web.tsx

@@ -83,7 +83,6 @@ export function CountWheel({
   return (
     <View>
       <View
-        aria-disabled={true}
         // @ts-expect-error is div
         ref={countView}>
         <Text
@@ -98,9 +97,9 @@ export function CountWheel({
           {formattedCount}
         </Text>
       </View>
-      {shouldAnimate ? (
+      {shouldAnimate && (likeCount > 1 || !isLiked) ? (
         <View
-          style={{position: 'absolute'}}
+          style={{position: 'absolute', opacity: 0}}
           aria-disabled={true}
           // @ts-expect-error is div
           ref={prevCountView}>

src/lib/custom-animations/LikeIcon.tsx

@@ -99,37 +99,33 @@ export function AnimatedLikeIcon({
               entering={
                 shouldAnimate ? circle1Keyframe.duration(300) : undefined
               }
-              style={[
-                {
-                  position: 'absolute',
-                  backgroundColor: s.likeColor.color,
-                  top: 0,
-                  left: 0,
-                  width: size,
-                  height: size,
-                  zIndex: -1,
-                  pointerEvents: 'none',
-                  borderRadius: size / 2,
-                },
-              ]}
+              style={{
+                position: 'absolute',
+                backgroundColor: s.likeColor.color,
+                top: 0,
+                left: 0,
+                width: size,
+                height: size,
+                zIndex: -1,
+                pointerEvents: 'none',
+                borderRadius: size / 2,
+              }}
             />
             <Animated.View
               entering={
                 shouldAnimate ? circle2Keyframe.duration(300) : undefined
               }
-              style={[
-                {
-                  position: 'absolute',
-                  backgroundColor: t.atoms.bg.backgroundColor,
-                  top: 0,
-                  left: 0,
-                  width: size,
-                  height: size,
-                  zIndex: -1,
-                  pointerEvents: 'none',
-                  borderRadius: size / 2,
-                },
-              ]}
+              style={{
+                position: 'absolute',
+                backgroundColor: t.atoms.bg.backgroundColor,
+                top: 0,
+                left: 0,
+                width: size,
+                height: size,
+                zIndex: -1,
+                pointerEvents: 'none',
+                borderRadius: size / 2,
+              }}
             />
           </>
         ) : null}

src/lib/custom-animations/LikeIcon.web.tsx

@@ -93,6 +93,7 @@ export function AnimatedLikeIcon({
           zIndex: -1,
           pointerEvents: 'none',
           borderRadius: size / 2,
+          opacity: 0,
         }}
       />
       <View
@@ -108,6 +109,7 @@ export function AnimatedLikeIcon({
           zIndex: -1,
           pointerEvents: 'none',
           borderRadius: size / 2,
+          opacity: 0,
         }}
       />
     </View>