Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(wallet-mobile): Add slide in and out animations #3791

Merged
merged 8 commits into from
Jan 20, 2025

Conversation

michaeljscript
Copy link
Collaborator

@michaeljscript michaeljscript commented Jan 20, 2025

Description / Change(s) / Related issue(s)

Add toast notification animations

Ticket

YV-199

}, [fadeIn, fadeOut])

React.useEffect(() => {
// When executed without setTimeout, the animation does not start
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

2 guesses here, probably mounting issue, try to wrap the fadeIn within the useLayoutEffect it should work, otherwise you can leverage -> requestAnimationFrame as well.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This works well now, thanks!

Comment on lines 30 to 31
const fadeInTimeout = setTimeout(() => fadeIn(), 1)
return () => clearTimeout(fadeInTimeout)
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
const fadeInTimeout = setTimeout(() => fadeIn(), 1)
return () => clearTimeout(fadeInTimeout)
fadeIn()

Copy link
Member

@stackchain stackchain Jan 20, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

needs testing, cuz if its not an issue on mounting, better run with InteractionManager or requestAnimationFrame.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

maybe animations clashing

@michaeljscript
Copy link
Collaborator Author

Screen.Recording.2025-01-20.at.14.16.58.mov

@stackchain stackchain merged commit fdc42e4 into develop Jan 20, 2025
1 check passed
@stackchain stackchain deleted the feat/notification-animation-2 branch January 20, 2025 14:28
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants