Simple hover animations to spice up your REACTJS 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!