Why Web Animation?
Research says, it takes about 0.05 seconds for users to form an opinion about your website that determines whether they’ll stay or leave.
If you want to grab your user's eyes (I mean their attention), there should be something visually appealing and engaging. Luckily to achieve that there are many tools and techniques, we can use and work on, to enhance user experience on web.
One such thing is adding Animations and micro-interactions. In nature humans are more likely to get attracted when you show something new they haven't expected. so, lets show them some.
lets jump in....
1. GSAP:
GSAP is a popular JavaScript animation library with many options for animations. Basically, GSAP is a property manipulator. It snags a starting value and an ending value. Then it interpolates between these values 60 times per second.
GSAP is used to animate each property individually, so you can scale, rotate, and move anything easily. And GSAP is flexible, so it’s a great choice for animating almost anything: CSS, SVG, DOM. Actually, you can use it anywhere JavaScript runs.
2. ThreeJs
It is the most popular tool to create 3D animations .It is a JavaScript library used to make WebGL easier. With its prebuilt components and methods, you can create 3D animations faster and take your websites to next level.
It is my personal favorite, has tons of features and great documentation to start with. The best part of using ThreeJs is working with its unique features like Shaders and WebXR etc..
3.Anime Js
Anime.js works with any CSS properties, individual CSS transforms, SVG and DOM attributes, and JavaScript objects. While keeping the code light, Anime.js deals with multiple timings, easings, playback controls, and other things.
Anime's built-in staggering system makes complex follow through and overlapping animations simple. It can be used on both timings and properties.
4.Mo Js
The Mo.js library works great for animating the UI and UX of your web pages, as it supports custom motion graphics. Mo.js is modular, so you can use the custom-built library for your projects and avoid large file size overhead. With Mo.js, you can move DOM and SVG DOM elements, but you can also create special Mo.js objects with unique features.
ScrollMagic is a plugin you can use to manage scroll animations. It’s good for animating elements based on a user’s scroll position and for pinning elements at specific scroll positions. With ScrollMagic, you can also add a parallax effect to your web page. ScrollMagic works with multiple frameworks to build animations, though the recommended framework is GSAP.
Velocity.js is a full-featured JavaScript animation library. WhatsApp, Uber, MailChimp, and lots of other companies use Velocity.js for their websites. This library is commonly used to create basic page UX motion and microinteractions. Velocity.js features SVG support, color animations, transforms, loops, scrolling, and easing.
EXPORTING AFTEREFFECTS ANIMATION TO WEB:
Yes....
You can animate in After effects and export it to web via json form using lotte and bodymovin extensions. Know to handle the json file and implementing it in your dom. you are good to go...
Outro:
These are some of the famous Libraries among many in Javascript.
If you like and passionate about creative coding ,just jump right into it and explore.
Your Imagination is your limit.
Be creative and love what you do.
Thank you for reaching till down😊
Happy Learning
-JHA