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,8 +99,7 @@ export function AnimatedLikeIcon({
               entering={
                 shouldAnimate ? circle1Keyframe.duration(300) : undefined
               }
-              style={[
-                {
+              style={{
                 position: 'absolute',
                 backgroundColor: s.likeColor.color,
                 top: 0,
@@ -110,15 +109,13 @@ export function AnimatedLikeIcon({
                 zIndex: -1,
                 pointerEvents: 'none',
                 borderRadius: size / 2,
-                },
-              ]}
+              }}
             />
             <Animated.View
               entering={
                 shouldAnimate ? circle2Keyframe.duration(300) : undefined
               }
-              style={[
-                {
+              style={{
                 position: 'absolute',
                 backgroundColor: t.atoms.bg.backgroundColor,
                 top: 0,
@@ -128,8 +125,7 @@ export function AnimatedLikeIcon({
                 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>