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