https://github.com/henryquan/react-native-shifting-text

My first animated component that updates the text component with some animations
https://github.com/henryquan/react-native-shifting-text

animation react-native

Last synced: 3 days ago
JSON representation

My first animated component that updates the text component with some animations

• Host: GitHub
• URL: https://github.com/henryquan/react-native-shifting-text
• Owner: HenryQuan
• License: mit
• Created: 2020-01-29T07:01:15.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-05T06:19:45.000Z (almost 2 years ago)
• Last Synced: 2023-02-27T00:50:15.284Z (over 1 year ago)
• Topics: animation, react-native
• Language: TypeScript
• Homepage:
• Size: 2.84 MB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 16
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


react-native-shifting-text


![GIF sample for react-native-shifting-text](https://raw.githubusercontent.com/HenryQuan/react-native-shifting-text/master/sample.gif)



## Why?

This was created because of my app, [WoWs Info](https://github.com/HenryQuan/WoWs-Info-Re). Basically, I change her name every major or minor update. That's why I wanted something that can change the name text every 2 or 3 seconds. I am not experience with `Animated` but somehow, it managed to work quite well.

## The implementation

There is one label to the left which is `WoWs Info` in this case. To the right, there are two labels and `label 1` is on top of `label 2`. `label1` has absolute positioning but `label2` is relative. Since users could only see `label2` at the end, it is important to position `label2` properly. The animation is rather simple. Move label 1 up while fading out and move label 2 up while fading it. Reset, repeat and ???.