Why Animate Elements Based on API Responses?

When fetching data from an API in AngularJS, you might want to:
Show loading animations while waiting for a response
Animate elements when data is successfully retrieved
Handle errors with visual effects

To achieve this, we can use:

• ngAnimate for CSS-based animations
• GSAP or Velocity.js for JavaScript-based animations
• $http service to fetch API data and trigger animations

---

1️⃣ Using ngAnimate for API Response Animations

The ngAnimate module lets you animate elements using CSS when data changes.

Step 1: Include ngAnimate Module

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-animate.js"></script>

var app = angular.module("myApp", ["ngAnimate"]);

Step 2: Define API Call in Controller

app.controller("DataController", function ($scope, $http) {
    $scope.data = null;
    $scope.loading = true;

    $http.get("https://jsonplaceholder.typicode.com/posts/1").then(
        function (response) {
            $scope.data = response.data;
            $scope.loading = false;
        },
        function (error) {
            console.error("API Error:", error);
            $scope.loading = false;
        }
    );
});

Step 3: Apply Animations Using ng-if and ng-class

<div class="loading" ng-if="loading">Loading...</div>

<div class="fade-in" ng-if="data">
    <h2>{{ data.title }}</h2>
    <p>{{ data.body }}</p>
</div>

Step 4: Add CSS Animations

.fade-in {
    opacity: 0;
    transition: opacity 1s ease-in;
}

.fade-in.ng-enter {
    opacity: 1;
}

When data loads, the element fades in smoothly!

---

2️⃣ Using GSAP for API-Based Animations

For advanced animations, we can use GSAP.

Step 1: Include GSAP

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>

Step 2: Modify the Controller to Trigger GSAP Animations

app.controller("GSAPController", function ($scope, $http, $timeout) {
    $scope.data = null;
    $scope.loading = true;

    $http.get("https://jsonplaceholder.typicode.com/posts/1").then(
        function (response) {
            $scope.data = response.data;
            $scope.loading = false;

            $timeout(function () {
                gsap.from(".animated-content", { opacity: 0, y: 50, duration: 1 });
            }, 100);
        }
    );
});

Step 3: Apply GSAP Animation to Elements

<div class="loading" ng-if="loading">Fetching Data...</div>

<div class="animated-content" ng-if="data">
    <h2>{{ data.title }}</h2>
    <p>{{ data.body }}</p>
</div>

GSAP provides smooth, timeline-based animations when data is received!

---

3️⃣ Using Velocity.js for API Data Animations

Velocity.js is a fast animation library that works well with API data.

Step 1: Include Velocity.js

<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/2.0.6/velocity.min.js"></script>

Step 2: Create a Directive for Velocity.js

app.directive("velocityAnimate", function () {
    return {
        restrict: "A",
        link: function (scope, element) {
            scope.$watch("data", function (newVal) {
                if (newVal) {
                    element.velocity({ opacity: 1, translateY: "-10px" }, { duration: 600 });
                }
            });
        }
    };
});

Step 3: Apply the Directive

<div class="loading" ng-if="loading">Loading Data...</div>

<div velocity-animate ng-if="data">
    <h2>{{ data.title }}</h2>
    <p>{{ data.body }}</p>
</div>

Velocity.js provides fast, efficient animations when new data loads!

---

When to Use Which Method?

Method	Best For	Pros	Cons
ngAnimate	Simple CSS-based effects	Lightweight, easy to use	Limited customization
GSAP	Smooth, high-performance animations	Highly customizable	Requires external library
Velocity.js	Fast UI transitions	Optimized for speed	Requires JavaScript