DEV Community

Cover image for Developing Geonotes — Animations and interactions — Ep. 3
Emilio Schepis
Emilio Schepis

Posted on


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.

 ✨ 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) {
    createdAt: created_at
    user {
Enter fullscreen mode Exit fullscreen mode

⭐️ 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

Top comments (0)

An Animated Guide to Node.js Event Loop

Node.js doesn’t stop from running other operations because of Libuv, a C++ library responsible for the event loop and asynchronously handling tasks such as network requests, DNS resolution, file system operations, data encryption, etc.

What happens under the hood when Node.js works on tasks such as database queries? We will explore it by following this piece of code step by step.