Alright, now we know how to create the staggering effect using native directives. What about creating staggering effects for custom directives?

We must keep this in mind: AngularJS enqueues the animations for the same parent element, the same classes, and the same animation event, and the animations should be triggered between 0 ms and 10 ms to be staggered. This has already been explained in the last topic, but this is important and deserves a reminder.

This is what happened in the first sample; the ngRepeat called $animate.enter and $animate.leave for many elements with the same parent element in a short amount of time, less than 10 ms. In the second sample, the ngClass directive called $animate.addClass for three elements of the same parent element at the same time.

So, if we want to create staggering effects for custom directives, we just have to follow the same rule.

Let's see a sample, check the HTML content with our custom directive,...