AngularJS Animations: Making the App Feel Alive - FadiZahhar/AngularJs GitHub Wiki

The StartApp Team Adds Motion and Magic

Scene: The App Needs Some “Wow!”

The StartApp app is working great, but now the client asks for a more lively, engaging interface:

“Can you make things fade in, slide out, or animate when I add or remove tasks? I want the app to feel smooth—not just snap!”

Lina (Designer): “Animations make the experience feel professional and modern.”

Sara (Junior Dev): “I read that AngularJS makes it easy to animate elements when they appear, disappear, or change—with just a bit of extra CSS and the ngAnimate module.”

1. Setting Up AngularJS Animations

First, include the AngularJS Animate library in your HTML, after AngularJS itself:

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

Add "ngAnimate" as a dependency to your app module:

var app = angular.module('taskApp', ['ngAnimate']);

2. Animating List Items with ng-repeat and ng-if

Let’s animate tasks as they’re added or removed from a list.

HTML:

<ul>
  <li ng-repeat="t in tasks" class="animate-repeat">
    {{ t.name }}
    <button ng-click="removeTask($index)">Remove</button>
  </li>
</ul>

Controller:

$scope.tasks = [
  { name: "Design logo" },
  { name: "Setup database" }
];
$scope.removeTask = function(index) {
  $scope.tasks.splice(index, 1);
};

3. Writing the Animation CSS

With ngAnimate, you can use special CSS classes for transitions. For ng-repeat, AngularJS adds and removes these classes:

  • .ng-enter / .ng-enter-active (when element enters)
  • .ng-leave / .ng-leave-active (when element leaves)

Example (fade in/out):

<style>
.animate-repeat.ng-enter {
  opacity: 0;
}
.animate-repeat.ng-enter-active {
  opacity: 1;
  transition: opacity 0.5s ease-in;
}
.animate-repeat.ng-leave {
  opacity: 1;
}
.animate-repeat.ng-leave-active {
  opacity: 0;
  transition: opacity 0.5s ease-out;
}
</style>

4. Animating ng-show/ng-hide Elements

Want to animate elements when showing/hiding them?

<div class="w3-panel w3-green animate-fade" ng-show="success">
  Task added!
</div>

CSS:

.animate-fade.ng-hide-add,
.animate-fade.ng-hide-remove {
  transition: opacity 0.4s;
}
.animate-fade.ng-hide {
  opacity: 0;
}
.animate-fade {
  opacity: 1;
}

5. Team Discussion: Why Use AngularJS Animations?

  • Lina: “The app feels alive! Transitions help guide users’ attention.”
  • Sara: “No JS code needed—just CSS and the right class names.”
  • Mike: “More professional UX with almost no extra work.”

6. Full Example: Animated Task List

<!DOCTYPE html>
<html>
<head>
  <title>AngularJS Animations Example</title>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-animate.js"></script>
  <style>
    .animate-repeat.ng-enter {
      opacity: 0;
      transform: translateY(-20px);
    }
    .animate-repeat.ng-enter-active {
      opacity: 1;
      transform: translateY(0);
      transition: all 0.4s;
    }
    .animate-repeat.ng-leave {
      opacity: 1;
      transform: translateY(0);
    }
    .animate-repeat.ng-leave-active {
      opacity: 0;
      transform: translateY(20px);
      transition: all 0.4s;
    }
  </style>
</head>
<body>
<div ng-app="taskApp" ng-controller="taskCtrl" class="w3-container">
  <h2 class="w3-text-blue">Animated Task List</h2>
  <input class="w3-input w3-border w3-margin-bottom" ng-model="newTask" placeholder="Add a task">
  <button class="w3-button w3-blue" ng-click="addTask()">Add Task</button>
  <ul class="w3-ul w3-card-4 w3-margin-top">
    <li ng-repeat="t in tasks" class="animate-repeat w3-display-container">
      {{ t.name }}
      <button class="w3-button w3-red w3-small w3-display-right" ng-click="removeTask($index)">Remove</button>
    </li>
  </ul>
</div>
<script>
angular.module('taskApp', ['ngAnimate'])
.controller('taskCtrl', function($scope) {
  $scope.tasks = [
    { name: "Design logo" },
    { name: "Setup database" }
  ];
  $scope.addTask = function() {
    if ($scope.newTask) {
      $scope.tasks.push({ name: $scope.newTask });
      $scope.newTask = "";
    }
  };
  $scope.removeTask = function(index) {
    $scope.tasks.splice(index, 1);
  };
});
</script>
</body>
</html>

7. Team Challenge: Fade In/Out a Message

Make a success message fade in when a task is added, and fade out after 2 seconds.

Hint: Use ng-show, ngAnimate, and $timeout in your controller.

Key Takeaways

  • AngularJS animations make your app feel polished, professional, and user-friendly.
  • No complex JS—just add the animate module and write simple CSS transitions.
  • Animate list changes, visibility toggles, and more!

Team Conclusion

Lina: “Now our app is not just functional, but delightful to use!”

Mike: “We’re ready to wow our users. Next up—AngularJS routing, or advanced UI patterns!”

Try these examples live in the [W3Schools AngularJS Animations TryIt Editor](https://www.w3schools.com/angular/angular_tryit.asp?filename=tryangular_animations).

⚠️ **GitHub.com Fallback** ⚠️