diff options
| author | Hailey <me@haileyok.com> | 2024-09-02 03:15:31 -0700 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2024-09-02 03:15:31 -0700 |
| commit | 4abcd65ccf94e36251142faeabdac42cada490fe (patch) | |
| tree | 31b3fa46704a0c4502ed7a52eb0b1531af9628c4 | |
| parent | 05ac76fc8942ec9ceda83d0f35a61763ae9bbcb5 (diff) | |
| download | voidsky-4abcd65ccf94e36251142faeabdac42cada490fe.tar.zst | |
More tweaks to animation (#5082)
| -rw-r--r-- | src/lib/custom-animations/CountWheel.tsx | 4 | ||||
| -rw-r--r-- | src/lib/custom-animations/CountWheel.web.tsx | 5 | ||||
| -rw-r--r-- | src/lib/custom-animations/LikeIcon.tsx | 48 | ||||
| -rw-r--r-- | src/lib/custom-animations/LikeIcon.web.tsx | 2 |
4 files changed, 28 insertions, 31 deletions
diff --git a/src/lib/custom-animations/CountWheel.tsx b/src/lib/custom-animations/CountWheel.tsx index dfa697911..1a8676712 100644 --- a/src/lib/custom-animations/CountWheel.tsx +++ b/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={[ diff --git a/src/lib/custom-animations/CountWheel.web.tsx b/src/lib/custom-animations/CountWheel.web.tsx index 618dcb1a5..594117bfe 100644 --- a/src/lib/custom-animations/CountWheel.web.tsx +++ b/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}> diff --git a/src/lib/custom-animations/LikeIcon.tsx b/src/lib/custom-animations/LikeIcon.tsx index 06d5c2850..f5802eccb 100644 --- a/src/lib/custom-animations/LikeIcon.tsx +++ b/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} diff --git a/src/lib/custom-animations/LikeIcon.web.tsx b/src/lib/custom-animations/LikeIcon.web.tsx index c131dcf67..6dc94c291 100644 --- a/src/lib/custom-animations/LikeIcon.web.tsx +++ b/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> |