Skip to content
This repository has been archived by the owner on May 7, 2023. It is now read-only.

login page animation starting location issue #437

Closed
woosanggyu opened this issue Jul 27, 2021 · 3 comments · Fixed by #438
Closed

login page animation starting location issue #437

woosanggyu opened this issue Jul 27, 2021 · 3 comments · Fixed by #438
Labels
🐛 bug Something isn't working

Comments

@woosanggyu
Copy link
Contributor

woosanggyu commented Jul 27, 2021

Specify project
Client issue

Describe the bug
Different starting location for login page animation on web and mobile

To Reproduce
Steps to reproduce the behavior:

  1. Go to loginPage on web
  2. Go to loginPage on mobile

Expected behavior

Animation starting location is different

Screenshots

  • web
web.mov
  • mobile
mobile.mov

Desktop (please complete the following information):

  • OS: macbook
  • Browser chrome
  • Version 91.0

Smartphone (please complete the following information):

  • Device: iphone12
  • OS: ios
  • Browser [e.g. stock browser, safari]
  • Version [e.g. 22]

Additional context
Add any other context about the problem here.

[wehack2021]-[Cloud]

@rarira
Copy link
Contributor

rarira commented Jul 27, 2021

Might be related or not..
latest version shows strange logo icon animation like belows.
once it was scaled, it never goes back to small size..

  1. when logo pressed(touch)
    Simulator Screen Recording - iPhone 12 Pro - 2021-07-27 at 22 25 14

  2. when type begins in TextInput component
    Simulator Screen Recording - iPhone 12 Pro - 2021-07-27 at 22 26 00

It happens only after the commit 7f60fed)

and If I commented this line, It works as before

  
   const scale = interpolate(logoAnimValue.value, [0, 1], [2, 1]);

    return {
      zIndex: 15,
      position: 'absolute',
      left,
      top,


      /// transform: [{scale}],

    };
  });

Is this new scale animation intended?

Tested on:
iPhone 12 Pro / iOS 14.5 simulator on Big Sur 11.4

@hyochan
Copy link
Owner

hyochan commented Jul 27, 2021

Might be related or not..
latest version shows strange logo icon animation like belows.
once it was scaled, it never goes back to small size..

  1. when logo pressed(touch)
    Simulator Screen Recording - iPhone 12 Pro - 2021-07-27 at 22 25 14
  2. when type begins in TextInput component
    Simulator Screen Recording - iPhone 12 Pro - 2021-07-27 at 22 26 00

It happens only after the commit 7f60fed)

and If I commented this line, It works as before

  
   const scale = interpolate(logoAnimValue.value, [0, 1], [2, 1]);

    return {
      zIndex: 15,
      position: 'absolute',
      left,
      top,


      /// transform: [{scale}],

    };
  });

Is this new scale animation intended?

Tested on:
iPhone 12 Pro / iOS 14.5 simulator on Big Sur 11.4

Thank you so much for testing it out!

@DevYuns I think you might want to check this one!

@hyochan hyochan added the 🐛 bug Something isn't working label Jul 27, 2021
@DevYuns
Copy link
Contributor

DevYuns commented Jul 27, 2021

Let me check it out soon! Thank you for reporting.

hyochan pushed a commit that referenced this issue Jul 28, 2021
`transform` animation value is not preserved between render on mobile. This is the reason that `scale` is return to origin when writing a text on `textInput` which invokes `re-render`.  So I changed animation value from `scale` to `width` and `height`.

But there is a bug about `withSpring` function on `web`, then I splits an animation value according to platform. 
This bug seems to have related with `react-native-web`.  You can check relate issue with [here](software-mansion/react-native-reanimated#1804) or [here](necolas/react-native-web#1935).
imjlk pushed a commit to imjlk/hackatalk that referenced this issue Aug 19, 2021
`transform` animation value is not preserved between render on mobile. This is the reason that `scale` is return to origin when writing a text on `textInput` which invokes `re-render`.  So I changed animation value from `scale` to `width` and `height`.

But there is a bug about `withSpring` function on `web`, then I splits an animation value according to platform. 
This bug seems to have related with `react-native-web`.  You can check relate issue with [here](software-mansion/react-native-reanimated#1804) or [here](necolas/react-native-web#1935).
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
🐛 bug Something isn't working
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants