robinwobin.dev
forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
More tweaks to animation (#5082)
hailey.at
+28
-31
+2
-2
src/lib/custom-animations/CountWheel.tsx
+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
+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
+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
+2
src/lib/custom-animations/LikeIcon.web.tsx