When to use CSS or JavaScript Animation

In this article, I will share my personal experiences of using animations.

Being contractor for last 4 years, I’ve worked on many different projects.

Most of medical agencies are using animation heavily in their projects.

Simply, we should use css animation;

  • When the animation is not very complicated (Simple animation)
  • When we work on transitions/ transforms
  • if we need to animate DOM elements

So, if you want to learn more about css animation, you can check on the following link;

https://cssanimation.rocks/

Donovan runs a daily email based css animation course, I would highly recommend it.

Also, there are thousands great CSS animation samples on the Codepen.

CSS Animation Framework

Using a framework always makes job easier. Because, it’s probably been tested and used by many other developers too. There are many of them out there. However, I will share some of them with you.

Please check the below links;

Animate CSS

Dyn CSS

CSS Shake

Hover Efffects

On the other hand, we should JavaScript-Based animation;

  • if we need very complex Animation
  • if there will be sequences on animations
  • if we need canvas based animation and progress reporting
  • if the animation needs to be resumed, paused or reversed
  • if we need to create a time scale and animation path

JavaScript-Based Animation Frameworks

There.Js      (You can create unbelievable 3d animation with Three.js)

CanonJs 

Progress.Js 

Hope, you enjoy reading this article. If there is anything I can help, you can always reach me at hello@yakup.me .

See you next time 🙂

 

 

 

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *