Why Use Third-Party Animation Libraries?
AngularJS provides built-in support for animations with the ngAnimate
module, but third-party animation libraries offer:
More complex & visually appealing effects
GPU-accelerated performance
Easier implementation of advanced animations
Cross-browser compatibility
Popular third-party animation libraries that work well with AngularJS:
- GSAP (GreenSock Animation Platform)
- Animate.css
- Velocity.js
1️⃣ Using GSAP (GreenSock) with AngularJS
GSAP is one of the most powerful animation libraries, offering smooth, high-performance animations.
Step 1: Install GSAP
You can include GSAP via CDN:
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
Or install via npm:
npm install gsap
Step 2: Create an AngularJS Directive for GSAP
app.directive("gsapAnimation", function () {
return {
restrict: "A",
link: function (scope, element) {
gsap.from(element, { duration: 1, opacity: 0, y: 50 });
}
};
});
📌 Step 3: Apply the Directive in HTML
<div gsap-animation>
Animated with GSAP!
</div>
GSAP allows precise control over animations, including timelines, easing, and delays.
2️⃣ Using Animate.css in AngularJS
Animate.css is a lightweight CSS animation library with pre-built animations.
Step 1: Include Animate.css
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
Step 2: Apply CSS Classes to AngularJS Elements
<div class="animate__animated animate__fadeIn">
🎭 This element fades in!
</div>
Step 3: Toggle Animations Dynamically with ng-class
<button ng-click="animate = !animate">Toggle Animation</button>
<div ng-class="{'animate__animated animate__bounce': animate}">
Click to Bounce! 🔥
</div>
Animate.css is easy to use and best for simple animations like fading, bouncing, and sliding.
3️⃣ Using Velocity.js for AngularJS Animations
Velocity.js is a fast animation library that combines jQuery and CSS animations.
Step 1: Include Velocity.js
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/2.0.6/velocity.min.js"></script>
Step 2: Create an AngularJS Directive for Velocity.js
app.directive("velocityAnimate", function () {
return {
restrict: "A",
link: function (scope, element) {
element.on("click", function () {
element.velocity({ opacity: 0.5, translateY: "-20px" }, { duration: 500 });
});
}
};
});
Step 3: Apply the Directive
<button velocity-animate>Click to Animate 🚀</button>
Velocity.js is ideal for complex UI animations like chained effects and scroll-based animations.
When to Use Which Library?
Library | Best For | Pros | Cons |
---|---|---|---|
GSAP | High-performance, advanced animations | GPU-accelerated, timeline-based animations | Larger file size |
Animate.css | Simple, quick CSS animations | Lightweight, easy to use | Less customization |
Velocity.js | UI transitions, scroll animations | Fast, jQuery-compatible | Requires JavaScript |