Web animation is a popular and trending topic amongst web developers, it was popular in early 90’s but then only few people had internet access, since then things have changed, there are myriad of animations resources, tools, plugins out there which can help you to build effective and visually stunning animations for your websites.
Let us know if you are aware of any other animation engine or library by posting a comment below.
Animating with code may seem intimidating at first, but don’t worry – the GreenSock Animation Platform (GSAP) was engineered to make it simple and intuitive. The platform is also highly optimized for performance and unprecedented flexibility. Hang in there through the learning curve and you’ll be glad you did.
The GreenSock Animation Platform is a suite of tools for scripted animation. It includes:
TweenLite: the core of the engine which handles animating just about any property of any object. It is relatively lightweight yet full-featured and can be expanded using optional plugins (like CSSPlugin for animating DOM element styles in the browser, or ScrollToPlugin scrolling to a specific location on a page or div, etc.).
TweenMax: think of it like TweenLite’s beefy big brother; it does everything TweenLite can do plus non-essentials like repeat, yoyo, repeatDelay, updateTo(), etc. It includes many common plugins too like CSSPlugin so that you don’t need to load as many files. The focus is on being full-featured rather than lightweight.
TimelineLite: a powerful, lightweight sequencing tool that acts like a container for tweens, making it simple to control them as a whole and precisely manage their timing in relation to each other. You can even nest timelines inside other timelines as deeply as you want. This allows you to modularize your animation workflow easily.
Velocity is an animation engine with the same API as jQuery’s $.animate(). It works with and without jQuery. It’s incredibly fast, and it features color animation, transforms, loops, easings, SVG support, and scrolling. It is the best of jQuery and CSS transitions combined.
Velocity works everywhere — back to IE8 and Android 2.3. Under the hood, it mimics jQuery’s $.queue(), and thus interoperates seamlessly with jQuery’s $.animate(), $.fade(), and $.delay(). Since Velocity’s syntax is identical to $.animate(), your code doesn’t need to change.
4. Tween JS
• Interpolation of Numbers over time (tweening)
• Playback control of an individual tween
• Extensibility hooks for key points in the tweening process
Shifty is a low-level animation solution. This means that it does not perform any rendering, but it can be integrated into whatever rendering mechanism is most appropriate for your project. Shifty is meant to be a simpler, more lightweight and flexible alternative to richer tools like the excellent GreenSock animation platform.
6. Alice JS
Since it is based on DOM manipulation instead of Canvas gameQuery is compatible with a large number of browsers even the older ones including Firefox, Chrome, Internet Explorer, Safari, Safari for iOS, mobile versions of Webkit and Opera.
It provides powerful actions like tweening, physics and user input tracking, and has inbuilt renderers for CSS and SVG, amongst others. New actions and renderers are easy to develop, making it extremely flexible.