Geek Culture
Published in

Geek Culture

Doing the most with the least

Easy tips for adding something extra

I thought it would be fun to highlight some techniques or methods for adding a little bit of life into your projects or applications. While there are a lot of really in-depth ways of going about that, there are certainly some easier ways to do it. I have come across a few libraries for CSS that can help even the most novice of coders add some engagement into their projects and spice things up a bit.

CSS Animations

When talking about the parameters of what can be animated in CSS, the possibilities are in the dozens. It is basically the process of having an element that changes into something different. These animations can be kicked off in a multitude of ways as well. Like hovering over an element with the mouse or having an element make an entrance/exit. You can even make a straight-up piece of art that contorts itself all over the page.

The fact is when you hear CSS, most people just think of styling components, but the truth is CSS is a lot more powerful than you would imagine.

Types of Animations

  • Parallax Scrolling — technique used to simulate a 3-D effect in which the elements in the foreground scroll faster than the items in the background
  • Infinite Loading — hiding the page load with an animation that reduces the perception of the amount of time spent waiting
  • Hover — having an element flip, rotate, expand, contract, etc. as the mouse hovers over it enhancing the engagement
  • Typography — animating some text to make it look like it is being written on the spot to capture or grab the the user’s attention
  • Transition — make the next page slide in or appear in other creative ways will also increase the sense of interaction with users

Getting Started with Animate.css

These libraries operate mostly along the same procedure. They will either have you install a package using npm or yarn in your CLI, write a few <script> lines in your index.html file, or import a file into your stylesheet.

npm install animate.css

yarn add animate.css

import 'animate.css'

Then all you would have to do is call a specific class or className into the desired element you would like to animate and you are off the the races.

Once you have called the animation, there are a few other things to play around with and customize to your liking.

--animate-duration: 1s; (how long you want it to be animated)

--animate-delay: 3s; (how long you want to wait before it starts)

Of course there are many other classes to choose from and head on over to the webpage to demo them all.

This is the process for the Animate.css library, but as I stated earlier there are a ton of other libraries that operate just as simply.

Other notable CSS animation libraries

And for those of you that like it really over the top…

Disclaimer

You should always use these animations at your discretion. Overloading them can take away from their impact.

Try to avoid infinite animations. It can even be downright annoying or distracting, and that is not the goal here.

Animating larger/root elements like <body> or <html> can make the UX clunky and may be confusing for the user.

Conclusion

These libraries are a fun and interesting way to increase engagement and boost interactivity with users for any project, application or website. Sometimes, all it takes is a little extra to keep users coming your way. If you enjoyed this content, be sure to check out some of my other blogs or feel free to connect with me on my linkedIn. Chao!

--

--

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