ReactJs Animation: Create login/register form with react-spring animation

Web animation is always a hot topic. For the development of reactjs apps, you have a vast array of options to implement animations. You can see examples on the web that demonstrate their capabilities, like the ones shown here :

Animation — React.js Examples

For the purpose of this article, I have compiled a handful of the options available to you (there are much much more than 5 listed here). My list of react animation methods are listed below: :

CSS method — Use basic css styles, so no react coding needed

React-transition-group — This is an add-on component that features basic CSS animations and transitions.

React Motion — This is a popular library for React. The animations created look natural and use physics concepts to provide a realistic feel

React-spring — is another physics-based animation library that has advanced motion animation features.

So knowing what libraries/methods are available in React.js, I decided to rewrite my previous project “How to Create an Animated Login Register Web Page With HTML, CSS3, and Javascript” in React.js and React-spring.

I have made a tutorial video on this, you can see the full video here:

The design and layout

Design of login register form

From the above we can code a skeleton layout in HTML as below, note that this is the same structure as my previous demo.

Note: I have used JSX “className” other than that, its just standard HTML.

 <div className="container">
<div className="login-register-wrapper">
<div className="nav-buttons">
<button id="loginBtn" class="active">Login</button>
<button id="registerBtn">Register</button>
</div>
<div className="form-group">
<form action="" id="loginform">
</form>
<form action="" id="registerform">
</form>
</div>
<div id="forgot-panel">
</div>
</div>
</div>

For the animation side of things, we will be animating the positions of the login form and the register form. The forms will slide in to focus depending on the button that has been clicked ie register or login button. The buttons will have a fade-in fade-out bottom border that toggles between button clicks.

Our app structure

import React, { useState } from "react";
import "./App.css";

function App() {

return (
<div className="login-register-wrapper">
<div className="nav-buttons">
<button id="loginBtn" class="active">Login</button>
<button id="registerBtn">Register</button>
</div>
<div className="form-group">
<form action="" id="loginform">
</form>
<form action="" id="registerform">
</form>
</div>
<div id="forgot-panel">
</div>
</div>
);
}

Note: the component useSpring and animated are loaded from the react spring module.

Next, Install react-spring by typing the command “install react-spring”, then in the app.js, make sure you have the following import commands for react-spring.

import React, { useState } from "react";
import { useSpring, animated } from "react-spring"; // react-spring
import "./App.css";

A bit about react-spring basics

import React, { useState } from "react";
import { useSpring, animated } from "react-spring";

function App() {
const [toggle, setToggle] = useState(true);
const props = useSpring({
opacity: toggle ? 1 : 0,
});

return (
<div>
<animated.div style={props}>
This content will fade in and fade out when you press the toggle button
</animated.div>
<button onClick={() => setToggle(!toggle)}>Toggle</button>
</div>
);
}

export default App;

The concept here is that we define our spring animation for the opacity with something like :

const props = useSpring({
opacity: toggle ? 1 : 0,
});

this acts as a hook and will get executed when the value of the toggle changes ie when the button is clicked. Notice that we have a ternary expression “toggle ? 1 : 0”, this is the toggle mechanism. Then in the view we do two things, first prefix the HTML element we want to animate with “animated”, and then set the style property to the animation we defined in “props” :

<animated.div style={props}>
This content will fade in and fade out when you pree toggle button
</animated.div>

Our app view with animated wrappers ….

and the animated properties that we feed into the styles will be:

const loginProps = useSpring({ // animatimg login form
left: registrationFormStatus ? -500 : 0
})
const registerProps = useSpring({ // animatimg register form
left: registrationFormStatus ? 0 : 500
})
// animatimg buttons
const loginBtnProps = useSpring({borderBottom: registrationFormStatus ? 'solid 0px transparent' : 'solid 2px #1059FF'})
const registerBtnProps = useSpring({borderBottom: registrationFormStatus ? 'solid 2px #1059FF' : 'solid 0px transparent'})

As you can see we are toggling the left position of the forms. loginProps contains the animation property for the login form. The login form is given left position -500 if the registration button is clicked therefore goes out of view because it is in the overflow region. But when the login button is clicked the login form is restored to position 0 and is seen again. The constant registerprops contains the animation values for the registration form. The registration form is moved to position 500 to hide it and moved to position 0 to slide into focus. The constants loginBtnProps and registerBtnprops contains the animation properties for the two buttons.

Conclusion

  • useSpring a single spring, moves data from a -> b
  • useSprings multiple springs, for lists, where each spring moves data from a -> b
  • useTrail multiple springs with a single dataset, one spring follows or trails behind the other
  • useTransition for mount/unmount transitions (lists where items are added/removed/updated)
  • useChain to queue or chain multiple animations together

Originally published at https://dev.to on September 28, 2020.

UI Designer/Developer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store