Slightly improve web animation with opacity

This commit is contained in:
Eric Bailey
2026-06-10 12:09:30 -05:00
parent 34f7902bea
commit bf70c1dedc
@@ -1064,27 +1064,26 @@ function ExpandedAuthorsList({
: authors.length * (EXPANDED_AUTHOR_EL_HEIGHT + 10) /*10=margin*/ : authors.length * (EXPANDED_AUTHOR_EL_HEIGHT + 10) /*10=margin*/
const heightStyle = { const heightStyle = {
height: Animated.multiply(heightInterp, targetHeight), height: Animated.multiply(heightInterp, targetHeight),
opacity: Animated.divide(heightInterp, 1),
} }
return ( return (
<Animated.View style={[a.overflow_hidden, heightStyle]}> <Animated.View style={[a.overflow_hidden, heightStyle]}>
{visible ? ( {profileCardEnabled ? (
profileCardEnabled ? ( <View onLayout={onInnerLayout} style={[a.pt_sm, a.pb_md]}>
<View onLayout={onInnerLayout} style={[a.pt_sm, a.pb_md]}> {authors.map((author, i) => (
{authors.map((author, i) => ( <ExpandedAuthorProfileCard
<ExpandedAuthorProfileCard key={author.profile.did}
key={author.profile.did} author={author}
author={author} moderationOpts={moderationOpts}
moderationOpts={moderationOpts} isLast={i === authors.length - 1}
isLast={i === authors.length - 1} />
/> ))}
))} </View>
</View> ) : (
) : ( authors.map(author => (
authors.map(author => ( <ExpandedAuthorCard key={author.profile.did} author={author} />
<ExpandedAuthorCard key={author.profile.did} author={author} /> ))
)) )}
)
) : null}
</Animated.View> </Animated.View>
) )
} }