Bubble animation with React Native

This post is about my recent learnings while experimenting on building an App with React Native using Animated and PanResponder.

What

I’ll be talking about how I implemented an app transition which I found on Dribbble by Ramotion.

https://dribbble.com/shots/2694049-Pagination-Controller-App-Interface

This is a pagination controller which could be widely used for onboarding flow or for a tutorial.
The complete version is published in Expo:

https://expo.io/@narendrashetty/onboarding-blog

Let’s begin, shall we?

I visualized the above gif as 2 main parts: background and foreground.

In the background, I had to animate the bubble based on the gesture. And accordingly, change the content in the foreground.

Here’s how I built the background.

I have View holding the background color which includes Animated.View for the bubble animation and is positionedabsolute so that it stays on top of the screen also added some basic styles.

And now, I animate the bubble expanding from 0 to max using css transform scale with Animated.timing.

The above animation needs to be triggered based on user interaction. I’ll first use TouchableWithoutFeedback. Then change it with gestures.

I now position the bubble according to the gif, which animates from the bottom. This can be done using top and left property.

Neat! Results are as expected except the color. Better to tackle that later.

Time to restructure the code by moving the bubble logic into a separate component called CircleTransition and trigger the animation from the parent component.

It’s about that time when I have to tackle the color. To make the bubble animate with the new color, I’ll pass the new color into the component. And after the transition, I’ll hide the bubble.

Can you see something weird in the above transition?

During the second bubble transition, the background color is falling back to the first color. I need to update the background color to the new one with the bubble just transitioned to.

This can be done by passing a callback to the start method which gets executed when the transition is completed.

Voila! It’s all set. We’ve now got the basic animation working.

Let’s now get into the gesture. So that the bubble is transitioned when the user swipes left or right according to the gif.

I am creating a new component called Swipe which would contain all the logic for the gesture and will replaceTouchableWithoutFeedback.

I am going to use PanResponder which is used to reconcile several touches into a single gesture. It makes single-touch gestures resilient to extra touches, and can be used to recognize simple multi-touch gestures. For more on this you can go here and here.

Now let’s write the logic for the gestures.

First we need to figure out which direction the user is swiping, we need to animate only when the user swipes left or right. We also need to setup some threshold to determine if its actually a swipe or not.

Now if it’s a valid swipe, I trigger the appropriate action.

Yes! You guessed it right, we have got what we wanted to achieve with the gesture. Let me add an action for swipeRight and the gesture would be complete with a bit of refactoring.

That’s it! We have tackled the most complex part in the app.

Surprise! I won’t complete the app. The information in this blog should be enough help. Fork https://github.com/narendrashetty/onboarding-RN and try to complete the app to match the above gif.

If you are stuck and need any help, final version is in result branch, have a peek. Also you can ping me on Twitter @narendra_shetty or comment below.

And when you complete, please share your Expo/Github link. I’ll mention it here :)

If this article was of any help to you, please click “Recommend” and share it. It will motivate me to write more :)