Developing Geonotes — Animations and interactions — Ep. 3

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.

 ✨ T…

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
Screen Shot 2021-08-03 at 07.48.15.png Screen Shot 2021-08-03 at 07.51.05.png Screen Shot 2021-08-03 at 07.51.11.png

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


Print Share Comment Cite Upload Translate
APA
Emilio Schepis | Sciencx (2024-03-28T15:15:02+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/.
MLA
" » Developing Geonotes — Animations and interactions — Ep. 3." Emilio Schepis | Sciencx - Wednesday August 4, 2021, https://www.scien.cx/2021/08/04/developing-geonotes-animations-and-interactions-ep-3/
HARVARD
Emilio Schepis | Sciencx Wednesday August 4, 2021 » Developing Geonotes — Animations and interactions — Ep. 3., viewed 2024-03-28T15:15:02+00:00,<https://www.scien.cx/2021/08/04/developing-geonotes-animations-and-interactions-ep-3/>
VANCOUVER
Emilio Schepis | Sciencx - » Developing Geonotes — Animations and interactions — Ep. 3. [Internet]. [Accessed 2024-03-28T15:15:02+00:00]. Available from: https://www.scien.cx/2021/08/04/developing-geonotes-animations-and-interactions-ep-3/
CHICAGO
" » Developing Geonotes — Animations and interactions — Ep. 3." Emilio Schepis | Sciencx - Accessed 2024-03-28T15:15:02+00:00. https://www.scien.cx/2021/08/04/developing-geonotes-animations-and-interactions-ep-3/
IEEE
" » Developing Geonotes — Animations and interactions — Ep. 3." Emilio Schepis | Sciencx [Online]. Available: https://www.scien.cx/2021/08/04/developing-geonotes-animations-and-interactions-ep-3/. [Accessed: 2024-03-28T15:15:02+00:00]
rf:citation
» Developing Geonotes — Animations and interactions — Ep. 3 | Emilio Schepis | Sciencx | https://www.scien.cx/2021/08/04/developing-geonotes-animations-and-interactions-ep-3/ | 2024-03-28T15:15:02+00:00
https://github.com/addpipe/simple-recorderjs-demo