Add a nice swipe animation to a buttonless form

Fade swipe onwards and reverse animation with ReactJs and Styled-Components

How to add a swipe forward and reverse animation with different directions depending on user interaction with React Js.

Remember this fancy buttonless form we did some time ago? Let’s add some more functionality to it by:

• Adding the possibility of going back to the previous step
• Adding a swipe animation with a different direction depending on the step we are going to: is the previous step or the following step?

For this article, we are going to work on the base of the buttonless form mentioned above, but this can be actually applied to any next/previous-based interface you have.

If you came solely for the animation then go directly to the end of the article.

We will be using the styled-components library, but you can achieve the same with the same old CSS style sheet.

You can find the full code for this in the Github Repo. For the basic version, check master . For this upgraded version we will be building check the feature/back-animation branch.

Add a way to go back

In our form, we hadn’t yet considered the possibility to go back for the user. The easiest way to do this would be by adding a ‘previous’ button. But since we don’t want to have an actual button, let’s create a discrete indicator that allows the user to go back like this:

Please find below the full code for the form container and the step indicator component. But let me briefly explain the steps I’ve been through to get there:

1. Store the previous step: we need to modify the state where we store the “step” in order to control not only the current step as we already were but also the previous one in order to be able to go back. We will also need to substitute all the places in our useEffect() where we are using this. That means:

\\From this
const [step, setStep] = useState(0);
\\ To this
const [step, setStep] = useState({ current: 0, previous: null });

2. Create the step indicator component

This component receives the currentStep in order to apply a certain class and make it look “active” — gray in this case. When a circle is clicked, it bubbles up to the parent the number of the step that has been clicked through the handleOnClick function.

This handleOnClick will trigger the parent’s function passed as a parameter as onClickStep.

3. Bind the data with the form: we didn’t have this need when we first created our form. Since we never went back, we didn’t need to see the info that the user had already written but we do now. Unless we bind the state where we are storing the data with the value of the inputs, even though we have the data, the inputs will always be shown blank when we go back in a step.

Add the swipe animation

First things first, create a component with your animation (check the StyledAnimation component at the end of this article).

What is this doing?

This is mostly a wrapper for our steps components. Whenever we load this component all the content within passed as children will be shown after the animation has finished.

This also receives the direction this animation must come from. The component uses the show property to know if the component (step) must be rendered or not. This mostly substitutes our rendering condition in the parent.

Note: this component can be refactored in order to avoid duplicated code, but I will keep it like this for the sake of the explanation.

The parent, in the meantime…

Check out the complete code below. But this is roughly what we are doing:

1. Add a function to check if we are going back or forward in order to indicate the directionto the animation: this was the whole point of registering the previous step.
2. Change the conditional render of the steps. Instead of having now the steps being controlled by a conditional rendering structure, we are now wrapping our steps with our Fade animation. And the prop show is the rendering condition.
3. Restructure the layout by adding a new wrapper, that allows us to position all the children's divs absolutely in the desired position. Otherwise, they will wrap during the animation while one fades out and the other one fades in.
4. Add a new condition when step 3 is in place since our logic has now changed.

Again, this is a very specific example of how to implement a swipe animation and the steps indicators. Feel free to adapt it or if you have doubt about how to implement this within your project, write a comment below or contact me :D

I’ll leave you to the full code.

Peace and Code

Nadine.