Website Animation

I still remember the first time I wrote a HTML element on my notepad and saved it as a .html file.

When I opened the HTML file on my Internet Explorer browser the text started moving horizontally.

Now this was me 20 years back when I was crazy about animation and wanted to become an animator in movies and to be able to make a piece of text move on a webpage was a fascinating feeling.

I made my first website and hosted on Yahoo! GeoCities in 2001

My Website would take anyone to intergalactic space. It was full of blinking stars and moving objects. Users will move from one galaxy to another with a click of a button and each section would offer something unique. It was all inspired by Star Trek and Star Wars.

The Internet has come a long way but one thing remains constant.

We all are trying to tell our story to the world.

Your website can have stunning images, unique and meaningful content and the most beautiful typography and amazing flow, in your eyes you have created a masterpiece.

Life is not static, why should your website be ?

Animation puts life into static, it is now one of the most important factors when it comes to user experience and storytelling.

Your website is your movie, your story, it needs to take your audience through an unforgettable journey.

With great power comes great responsibility.

Uncle Ben

Animation comes in different shapes and forms, it’s important to know which one to use and when. It needs to serve a meaningful purpose that enhances the user experience and the story you’re trying to tell

What are the different types of web animation?

• Attracting Attention Motion Backgrounds

Loading

Hover

Scrolling

Navigation and Menus

Image Galleries and Slideshows

Scrolling

How to add animation to a website?

Now that you know the benefits and types of Website Animations, here are some tools and ways to animate a webpage

CSS Animations

CSS or Cascading Style Sheets animations allows animation of html document elements without the need of JavaScripts.

JavaScript Animations

What css cannot handle JavaScript animation can. You will get more flexibility and it can handle more complex animations.

Canvas

Canvas offers various high-performance animations with great visualization. On the canvas, you can make the custom and more responsive animations for your web design.

SVG Animations (SMIL)

Today I’m sharing a list of animation libraries that will help you add incredible animation & effects to your websites

Animate.css

Animate.js

Bounce.js

CSSShake

GreenSock (GSAP)

Magic Animation

https://www.minimamente.com/project/magic/

Hover.css

https://ianlunn.github.io/Hover/

Mo.js

https://mojs.github.io/

Wicked css

https://kristofferandreasen.github.io/wickedCSS/

Three.js

https://threejs.org/

Tuesday

http://shakrmedia.github.io/tuesday/

Typed.js

https://mattboldt.com/demos/typed-js/

tsParticles

https://particles.matteobruni.it/

Popmotion

https://popmotion.io/

Snap.svg

http://snapsvg.io/

Vivus.js

http://maxwellito.github.io/vivus/

ScrollReveal JS

https://scrollrevealjs.org/

Lottie by AirBnB

http://airbnb.io/lottie/#/

Wos.js

https://wowjs.uk/