Building mobile-first web animations in React

Talk by Alex Holachek, as brought forward at React Conf 2019:

As the technology to create Progressive Web Apps continues to mature, React developers have the opportunity to write web apps that in some cases can rival native ones in terms of speed and convenience.

However, one barrier to feature parity is the difficulty of creating a native-like UI transition and interaction experience on the mobile web, especially on lower-end devices.

I’ll be discussing various considerations, tips and techniques to create a web app in React that looks, moves, and feels as close to a native mobile app as possible.

Think of gesture-driven animations like these here:

Slides →
Repo →

React Native Gesture Handler

React Native Gesture Handler is a declarative API exposing platform native touch and gesture system to React Native.

React Native Gesture Handler provides native-driven gesture management APIs for building best possible touch-based experiences in React Native. With this library gestures are no longer controlled by the JS responder system, but instead are recognized and tracked in the UI thread. It makes touch interactions and gesture tracking not only smooth, but also dependable and deterministic..

Comes with a few handlers (such as PanGestureHandler, TapGestureHandler, LongPressGestureHandler, RotationGestureHandler, PinchGestureHandler, etc) and components (such as <Swipeable />)

React Native Gesture Handler →

JavaScript Kinetic Scrolling

kinetic

In a recent project I implemented Kinetic Scrolling (aka Momentum Scrolling, aka Inertia Scrolling). For this I based myself upon the set of demos and articles by Ariya Hidayat.

tracking

The article series starts at basic drag-and-scrolling, and then continues to momentum scrolling, and so forth. Even though the content is over 3 years old, it is still relevant and easy to understand.

This presentation from ScrollerJS (not embedded here, due to Mixed Content Warnings) also came in handy during research.

JavaScript Kinetic Scrolling Demos →
JavaScript Kinetic Scrolling Repo (GitHub) →
JavaScript Kinetic Scrolling Part 1 →

LeapJS – JavaScript client(s) for the Leap Motion Controller

leap

My Leap Motion Controller arrived last week. It’s quite fun to play around with, yet not recommended for every day use (this review by The Verge sums it all up quite nicely). Above that the daemon eats away CPU cycles as if it were candy 🙁

One very cool aspect about the Leap Motion though is that you can connect to the daemon using a websocket, to read out the data the LMC captures.. There’s an official JavaScript library out there named LeapJS, as is there an unofficial one named exactly the same. Both do about the same, albeit using a different syntax.

LeapJS by Leap Motion →
LeapJS by deckar01 →