Shared element transition libraries - Deepstash
Shared element transition libraries

Shared element transition libraries

A few libraries to help you achieve shared element transitions in react native:

  • react-native-magic-move
  • react-native-shared-element: everything in 60fps.
  • react-native-fluid-transition

1

STASHED IN:

7

MORE IDEAS FROM Microinteractions & Animations in React Native: Help users understand the UI - Catalin Miron

The what and why of microinteractions

In this talk by @mironcatalin he is presenting a few libraries and techniques to create micro-interactions and animations in React Native.

Catalin mentions that the details of the app is what makes an app feel well-polished and that animations and micro-interactions should be intuitive, natural, ideally physics based and act like a user.

Let's get started.

2

STASHED IN:

8

ui-animations

Are a way to tell a story. A few examples of good practices in ui-animations:

  1. Keep the context: shareable elements help users to know where they are during transitions.
  2. Interactable: will empower users and give the sense they are modifying the application.
  3. Visibility: animating appearing and disappearing of elements will make the app feel well-built.

2

STASHED IN:

7

How to get started in Reach Native

To get started, here are a few libraries you can use:

  • Built-in Animated. It's easy to get started with @vjeux.
  • react-native-animatable: easy to use with many built-in animations @oblador.
  • react-native-reanimated: most performant but has a learning curve @kzzzf.
  • pose: physics base animations @mattgperry.
  • react-spring: physics base animations @0xca0a.

1

STASHED IN:

7

Type of micro-interactions
  1. System status: users want to know what's happening at a given time.
  2. Visualising the input: Making forms not be boring.
  3. Manipulation: giving the impression that you can directly manipulate the screen.
  4. Feedback: demonstrates the result of the user action.
  5. Acknowledgment: engagement with user.
  6. Achieving: informing the user of the results of their actions.

1

STASHED IN:

8

Deepstash helps you become inspired, wiser and productive, through bite-sized ideas from the best articles, books and videos out there.

GET THE APP:

RELATED IDEA