[#19351] fix: animate username in profile #19370
Conversation
mohsen-ghafouri
force-pushed
the
fix/profile-animation
branch
from
7583bef to
bcfb859
Compare
Jenkins BuildsClick to see older builds (23)
|
|
I remember John's description for this in the chat is to start the animation once the big name starts going out of view (Once the big name touches the topbar), And to animate the small name in one go (Without making it rely on scroll progress in parent view) |
mohsen-ghafouri
force-pushed
the
fix/profile-animation
branch
from
bcfb859 to
8340425
Compare
|
Thank you @ibrkhalil for pointing it out, I updated the code and video. |
mohsen-ghafouri
force-pushed
the
fix/profile-animation
branch
from
8340425 to
c6ceb2f
Compare
98% of end-end tests have passedExpected to fail tests (1)Click to expandClass TestCommunityOneDeviceMerged:
Passed tests (47)Click to expandClass TestActivityMultipleDevicePR:
Class TestActivityCenterContactRequestMultipleDevicePR:
Class TestGroupChatMultipleDeviceMergedNewUI:
Class TestActivityMultipleDevicePRTwo:
Class TestOneToOneChatMultipleSharedDevicesNewUi:
Class TestCommunityMultipleDeviceMerged:
Class TestCommunityMultipleDeviceMergedTwo:
Class TestDeepLinksOneDevice:
Class TestCommunityOneDeviceMerged:
Class TestOneToOneChatMultipleSharedDevicesNewUiTwo:
|
mohsen-ghafouri
force-pushed
the
fix/profile-animation
branch
from
c6ceb2f to
bd37f33
Compare
src/js/worklets/profile_header.js
Outdated
| export function profileHeaderAnimation(scrollY, threshold, topBarHeight) { | ||
| return useAnimatedStyle(() => { | ||
| const opacity = scrollY.value < threshold ? withTiming(0) : withTiming(1); | ||
| const translateY = scrollY.value < threshold ? withTiming(topBarHeight) : withTiming(0); | ||
|
|
||
| return { | ||
| opacity: opacity, | ||
| transform: [{ translateY: translateY }], | ||
| }; | ||
| }); | ||
| } |
There was a problem hiding this comment.
Does this need to be defined in JS because it runs in the animation thread?
There was a problem hiding this comment.
yes i forgot to add worklet, just added
There was a problem hiding this comment.
I believe this looks cleaner @mohsen-ghafouri ! :)
btw, we don't need that worklet directive anymore for the animated hooks, reanimated automatically converts them even if not present, but only when it detects an animated hook is being used.
|
Hi @mohsen-ghafouri ! Please, rebase your PR. |
mohsen-ghafouri
force-pushed
the
fix/profile-animation
branch
2 times, most recently
from
8bbe9f9 to
c8f5e09
Compare
|
Hi @mariia-skrypnyk, done |
@mohsen-ghafouri not sure animation looks like @ibrkhalil described here 👆. @ibrkhalil can you show us an example? |
The same behavior in chat basically, Once the big name gets halfway hidden we should animate the small name in. |
|
@mohsen-ghafouri let me know your thought regarding Ibrahem's example. In case you are not agree or not sure maybe we need to raise this question to designers. |
|
@mariia-skrypnyk this is exactly like what @ibrkhalil mentioned. what's the issue? did you see the same animation i posted in the description video? |
There's no issue, The implementation in the chat was updated recently and I wasn't aware of it's behavior so I thought it needed adjusting. |
|
@mohsen-ghafouri I love your animation. Just not sure it is exact the same as @ibrkhalil mentioned above. |
There was a problem hiding this comment.
Here's the review
Nice job with the animation ✨
Adding follow up required to address other issues in the screen.
mohsen-ghafouri
force-pushed
the
fix/profile-animation
branch
from
c8f5e09 to
16ba877
Compare
|
@mohsen-ghafouri will you have time to create followups regarding design review? 🙏 |
|
@mariia-skrypnyk yes i will do and will remove follow up label from this PR then. |
fixes #19351
Summary
animate username according to the designs.
Before and after screenshots comparison
Before
Simulator.Screen.Recording.-.iPhone.13.-.2024-03-22.at.19.22.14.mp4
After
Simulator.Screen.Recording.-.iPhone.13.-.2024-03-25.at.15.48.44.mp4
status: ready