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

[DOCS] Interactive animation creator on docs site has a small bug #6126

Closed
mandrade2 opened this issue Jun 15, 2024 · 4 comments · Fixed by #6128
Closed

[DOCS] Interactive animation creator on docs site has a small bug #6126

mandrade2 opened this issue Jun 15, 2024 · 4 comments · Fixed by #6128
Labels
Missing info The user didn't precise the problem enough Missing repro This issue need minimum repro scenario Platform: Web This issue is specific to web

Comments

@mandrade2
Copy link

Description

I noticed a small UI issue where the interactive animation maker on the docs site keeps showing a power slider if you used the 'in', 'out' or 'inOut' easings in combination with 'poly' and set a custom value on power. Not a mayor issue but should be a quick fix and hard to notice.

Steps to reproduce

  1. Go to any of the interactive animation makers like the one here https://docs.swmansion.com/react-native-reanimated/docs/animations/withTiming
  2. Select any of the 'in', 'out' or 'inOut' for easing.
  3. Now for the second in selector use 'poly'. You will now see a power slider.
  4. If you set a value on this slider and then go back to any of the other easings you will keep seeing it even if it doesn't applies. If you don't set a value to it then there's no issue

Snack or a link to a repository

Reanimated version

React Native version

Platforms

Web

JavaScript runtime

None

Workflow

None

Architecture

None

Build type

None

Device

None

Device model

No response

Acknowledgements

Yes

@github-actions github-actions bot added Platform: Web This issue is specific to web Missing info The user didn't precise the problem enough Missing repro This issue need minimum repro scenario labels Jun 15, 2024
Copy link

Hey! 👋

It looks like you've omitted a few important sections from the issue template.

Please complete Snack or a link to a repository, Reanimated version and React Native version sections.

Copy link

Hey! 👋

The issue doesn't seem to contain a minimal reproduction.

Could you provide a snack or a link to a GitHub repository under your username that reproduces the problem?

@mandrade2
Copy link
Author

Dear github actions bot, I will add a repository with a repro only if a human asks so. Since in this case the bug should be easily reproducible. I see this on my mac M1 on Firefox 127.0b3. For anyone reading, thanks for the awesome repo, let me know if you need more info or the repo :)

@patrycjakalinska
Copy link
Collaborator

Hi! Thank you for finding this bug :> I linked a PR that fixes it by reseting value of hidden Easing that kept Power slider visible

github-merge-queue bot pushed a commit that referenced this issue Jun 17, 2024
This PR is related to[
#6126](#6126)
issue.

The Power slider should be visible when `easing` or `nestedEasing` are
set to `poly`. `nestedEasing` is only visible when `easing` is set to
either `in`, `out` or `inOut`. So when we set `easing` to `in`,
`nestedEasing` to `poly` and then set `easing` to `brezier` the Power
slider will stay.

To fix that we added reset of `nestedEasing` value if `easing` is
changed to something other that `in`, `out` or `inOut`

Before:


https://github.com/software-mansion/react-native-reanimated/assets/59940332/326876b6-f0b9-4edc-b793-2b4c8fd0da9f


After:



https://github.com/software-mansion/react-native-reanimated/assets/59940332/579600a1-7db8-48a9-bf68-bfc3a5157826
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Missing info The user didn't precise the problem enough Missing repro This issue need minimum repro scenario Platform: Web This issue is specific to web
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants