We're gonna show you how to create an impressive animation for a mobile application. There was a lot of buzz around the animation at the time. It was first shown on Dribbble a year ago and we even published the source code in Swift on our GitHub. Later on, various publications on “How to make a similar swipe on React Native and Java” appeared online.
The case we will be using for demonstration is an onboarding flow. The onboarding always comes first for the user, so it can help you draw attention to the product immediately.
This animation can be divided into two stages. The first stage is changing the shape curve while being dragged by a finger. We exported the shape itself from Figma in SVG format and then selected the ratios that are responsible for changing the shape when swiping. The second stage of the animation is the fluctuations of the shape after you release the finger. This was done on the principle of a spring pendulum. We have been changing the parameters of the spring until the desired effect was achieved as shown in After Effects.
