Bluesky app fork with some witchin' additions 💫

More tweaks to animation (#5082)

authored by hailey.at and committed by

GitHub 4abcd65c 05ac76fc

+28 -31
+2 -2
src/lib/custom-animations/CountWheel.tsx
··· 151 151 {formattedCount} 152 152 </Text> 153 153 </Animated.View> 154 - {shouldAnimate ? ( 154 + {shouldAnimate && (likeCount > 1 || !isLiked) ? ( 155 155 <Animated.View 156 156 entering={exitingAnimation} 157 157 // Add 2 to the key so there are never duplicates 158 158 key={key + 2} 159 - style={[a.absolute, {width: 50}]} 159 + style={[a.absolute, {width: 50, opacity: 0}]} 160 160 aria-disabled={true}> 161 161 <Text 162 162 style={[
+2 -3
src/lib/custom-animations/CountWheel.web.tsx
··· 83 83 return ( 84 84 <View> 85 85 <View 86 - aria-disabled={true} 87 86 // @ts-expect-error is div 88 87 ref={countView}> 89 88 <Text ··· 98 97 {formattedCount} 99 98 </Text> 100 99 </View> 101 - {shouldAnimate ? ( 100 + {shouldAnimate && (likeCount > 1 || !isLiked) ? ( 102 101 <View 103 - style={{position: 'absolute'}} 102 + style={{position: 'absolute', opacity: 0}} 104 103 aria-disabled={true} 105 104 // @ts-expect-error is div 106 105 ref={prevCountView}>
+22 -26
src/lib/custom-animations/LikeIcon.tsx
··· 99 99 entering={ 100 100 shouldAnimate ? circle1Keyframe.duration(300) : undefined 101 101 } 102 - style={[ 103 - { 104 - position: 'absolute', 105 - backgroundColor: s.likeColor.color, 106 - top: 0, 107 - left: 0, 108 - width: size, 109 - height: size, 110 - zIndex: -1, 111 - pointerEvents: 'none', 112 - borderRadius: size / 2, 113 - }, 114 - ]} 102 + style={{ 103 + position: 'absolute', 104 + backgroundColor: s.likeColor.color, 105 + top: 0, 106 + left: 0, 107 + width: size, 108 + height: size, 109 + zIndex: -1, 110 + pointerEvents: 'none', 111 + borderRadius: size / 2, 112 + }} 115 113 /> 116 114 <Animated.View 117 115 entering={ 118 116 shouldAnimate ? circle2Keyframe.duration(300) : undefined 119 117 } 120 - style={[ 121 - { 122 - position: 'absolute', 123 - backgroundColor: t.atoms.bg.backgroundColor, 124 - top: 0, 125 - left: 0, 126 - width: size, 127 - height: size, 128 - zIndex: -1, 129 - pointerEvents: 'none', 130 - borderRadius: size / 2, 131 - }, 132 - ]} 118 + style={{ 119 + position: 'absolute', 120 + backgroundColor: t.atoms.bg.backgroundColor, 121 + top: 0, 122 + left: 0, 123 + width: size, 124 + height: size, 125 + zIndex: -1, 126 + pointerEvents: 'none', 127 + borderRadius: size / 2, 128 + }} 133 129 /> 134 130 </> 135 131 ) : null}
+2
src/lib/custom-animations/LikeIcon.web.tsx
··· 93 93 zIndex: -1, 94 94 pointerEvents: 'none', 95 95 borderRadius: size / 2, 96 + opacity: 0, 96 97 }} 97 98 /> 98 99 <View ··· 108 109 zIndex: -1, 109 110 pointerEvents: 'none', 110 111 borderRadius: size / 2, 112 + opacity: 0, 111 113 }} 112 114 /> 113 115 </View>