This content originally appeared on DEV Community and was authored by Emilio Schepis
With the notes being displayed around the user that we discussed in Episode 2, it's now time to add a bit of interesting UI and effects.
This will be a bit of a shorter episode, since all the changes were made in a few hours after work.
✨ The note-opening effect
I decided to move as much information outside the marker callout as possible. It now only shows the first few words of the note and a "view" call to action.
When the user taps on the callout, the note itself appears like a modal with a dark transparent background. The modal presents a post-it-like note with the content in the center. Tapping on the note starts a flip animation just like you were watching the back of the note, where the username, time and date are displayed.
I used React Native Modal to achieve the modal effect, and Reanimated 2 for the flip effect.
I haven't played much with animations before, but the API seems very straightforward! I also took a lot of inspiration from this post.
? Taking advantage of GraphQL
Using GraphQL with Hasura allowed me to make the notes-around-me query even lighter by removing information about the user and the creation date without having to modify any backend code.
I then added a new query that fetches all the data of a single note by passing the id. Source
query Note($id: uuid!) {
note: note_by_pk(id: $id) {
id
content
createdAt: created_at
user {
username
}
}
}
⭐️ The result
In the end I was able to achieve this nice-looking effect!
| Front | Animating | Back |
|---|---|---|
 |
 |
 |
And here's the animation in action!
? Next steps
The next step to tackle will be a big one: creating a new note. I want to implement it using Hasura Actions right away, to have more control over the business logic and to perform custom checks!
? How to follow the project
I'll be posting updates throughout the development process and as I learn new thing regarding development, design, and marketing.
If you'd like to have even more real-time updates you can
- Follow me on Twitter @emilioschepis
- Checkout the public GitHub app repository and backend repository
This content originally appeared on DEV Community and was authored by Emilio Schepis
Emilio Schepis | Sciencx (2021-08-04T09:13:48+00:00) Developing Geonotes — Animations and interactions — Ep. 3. Retrieved from https://www.scien.cx/2021/08/04/developing-geonotes-animations-and-interactions-ep-3/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.