Simple hover animations to spice up your REACTJS web application.
The web is no longer a static document that reads like a page in a book. It is full of dynamic content that can draw the attention to users and can help add more value to their experience while browsing your web application.

Animations are a great way to help your website be interesting and also help to give your audience direction and feedback from their interactions. There are some common animations that we are all familiar with that we know what is expected after they appear.
Here are a few animations that can help aid your users understand your site better and also some that are visually interesting and not so familiar.
Our test component (click on the codeblock to copy to clipboard)
// styles.scss
.bg {
width: 50px;
height: 50px;
background: blue;
transition: all 1s ease-in-out;
}
// testComponent.jsx
import React, { useState } from 'react';
import classNames from 'classnames';
import './styles.scss'
<div className={classNames({[styles.bg]:bg})} >
Mouse Events
Hover Animations
Simple Fade
.bg {...}
.fade { opacity: 0.2; }
.fade: hover { opacity: 1; }
Simple Underline
.bg {
width:50px;
height:50px;
background: blue;
transition:all 1.3s ease-in-out;
position: relative;
&:hover:before
{
width: 100%;
}
}
.bg:before {
content: '';
position: absolute;
bottom: -10px;
border-bottom: 5px solid red;
width: 0%;
transition: all 1s ease-in-out;
}
These are just a couple of the animations that can add some interest to your user interface and help your keep your application from being boring. The more perceived value you can create the more valuable your site becomes. This article is an ongoing work in progress so bookmark and check back later for more simple yet effective animations that you can quickly add to your web application!
Stay tuned!
Get in touch
Have a project in mind but don't know where to start? We can help