diff --git a/public/docs/ts/latest/guide/animations.jade b/public/docs/ts/latest/guide/animations.jade
index 0ac55c3420..342932bb1a 100644
--- a/public/docs/ts/latest/guide/animations.jade
+++ b/public/docs/ts/latest/guide/animations.jade
@@ -51,14 +51,14 @@ figure
   Animations are defined inside `@Component` metadata. Before you can add animations, you need
   to import a few animation-specific functions:
 
-+makeExample('animations/ts/src/app/hero-list-basic.component.ts', 'imports')(format=".")
++makeExample('animations/ts/src/app/hero-list-basic.component.ts', 'imports', 'hero-list-basic.component.ts')(format=".")
 
 :marked
   With these, you can define an *animation trigger* called `heroState` in the component
   metadata. It uses animations to transition between two states: `active` and `inactive`. When a
   hero is active, the element appears in a slightly larger size and lighter color.
 
-+makeExample('animations/ts/src/app/hero-list-basic.component.ts', 'animationdef')(format=".")
++makeExample('animations/ts/src/app/hero-list-basic.component.ts', 'animationdef', 'hero-list-basic.component.ts (@Component excerpt)')(format=".")
 
 .alert.is-helpful
   :marked
@@ -69,7 +69,7 @@ figure
   Now, using the `[@triggerName]` syntax, attach the animation that you just defined to
   one or more elements in the component's template.
 
-+makeExample('animations/ts/src/app/hero-list-basic.component.ts', 'template')(format=".")
++makeExample('animations/ts/src/app/hero-list-basic.component.ts', 'template', 'hero-list-basic.component.ts (excerpt)')(format=".")
 
 :marked
   Here, the animation trigger applies to every element repeated by an `ngFor`. Each of
@@ -79,7 +79,7 @@ figure
   With this setup, an animated transition appears whenever a hero object changes state.
   Here's the full component implementation:
 
-+makeExample('animations/ts/src/app/hero-list-basic.component.ts')
++makeExample('animations/ts/src/app/hero-list-basic.component.ts', '', 'hero-list-basic.component.ts')
 
 :marked
   ## States and transitions
@@ -163,7 +163,7 @@ figure.image-display
 
   ## Example: Entering and leaving
 figure
-  img(src="/resources/images/devguide/animations/animation_enter_leave.gif" alt="Enter and leave animations" align="right" style="width:250px;" )
+  img(src="/resources/images/devguide/animations/animation_enter_leave.gif" alt="Enter and leave animations" align="right" style="width:250px;")
 :marked
   Using the `void` and `*` states you can define transitions that animate the
   entering and leaving of elements:
@@ -171,7 +171,9 @@ figure
   * Enter: `void => *`
   * Leave: `* => void`
 
-+makeExample('animations/ts/src/app/hero-list-enter-leave.component.ts', 'animationdef')(format=".")
+  For example, in the `animations` !{_array} below there are two transitions that use 
+  the `void => *` and `* => void` syntax to animate the element in and out of the view.
++makeExample('animations/ts/src/app/hero-list-enter-leave.component.ts', 'animationdef', 'hero-list-enter-leave.component.ts (excerpt)')(format=".")
 
 :marked
   Note that in this case the styles are applied to the void state directly in the
@@ -207,7 +209,7 @@ figure.image-display
   img(src="/resources/images/devguide/animations/ng_animate_transitions_inactive_active_void.png" alt="This example transitions between active, inactive, and void states" width="400")
 
 
-+makeExample('animations/ts/src/app/hero-list-enter-leave-states.component.ts', 'animationdef')(format=".")
++makeExample('animations/ts/src/app/hero-list-enter-leave-states.component.ts', 'animationdef', 'hero-list-enter-leave.component.ts (excerpt)')(format=".")
 
 :marked
   ## Animatable properties and units
@@ -287,10 +289,11 @@ figure
   ### Example
 
   Here are a couple of custom timings in action. Both enter and leave last for
-  200 milliseconds but they have different easings. The leave begins after a
-  slight delay:
+  200 milliseconds, that is `0.2s`, but they have different easings. The leave begins after a
+  slight delay of 10 milliseconds as specified in `'0.2s 10 ease-out'`:
+  
 
-+makeExample('animations/ts/src/app/hero-list-timings.component.ts', 'animationdef')(format=".")
++makeExample('animations/ts/src/app/hero-list-timings.component.ts', 'animationdef', 'hero-list-timings.component.ts (excerpt)')(format=".")
 
 :marked
   ## Multi-step animations with keyframes
@@ -307,7 +310,7 @@ figure
   This example adds some "bounce" to the enter and leave animations with
   keyframes:
 
-+makeExample('animations/ts/src/app/hero-list-multistep.component.ts', 'animationdef')(format=".")
++makeExample('animations/ts/src/app/hero-list-multistep.component.ts', 'animationdef', 'hero-list-multistep.component.ts (excerpt)')(format=".")
 
 :marked
   Note that the offsets are *not* defined in terms of absolute time. They are relative
@@ -334,7 +337,7 @@ figure
   enter and leave allows for two different timing configurations. Both
   are applied to the same element in parallel, but run independently of each other:
 
-+makeExample('animations/ts/src/app/hero-list-groups.component.ts', 'animationdef')(format=".")
++makeExample('animations/ts/src/app/hero-list-groups.component.ts', 'animationdef', 'hero-list-groups.component.ts (excerpt)')(format=".")
 
 :marked
   One group animates the element transform and width; the other group animates the opacity.
@@ -344,10 +347,10 @@ figure
 
   A callback is fired when an animation is started and also when it is done.
 
-  In the keyframes example, you have a `trigger` called `@flyInOut`. There you can hook
+  In the keyframes example, you have a `trigger` called `@flyInOut`. You can hook
   those callbacks like this:
 
-+makeExample('animations/ts/src/app/hero-list-multistep.component.ts', 'template')(format=".")
++makeExample('animations/ts/src/app/hero-list-multistep.component.ts', 'template', 'hero-list-multistep.component.ts (excerpt)')(format=".")
 
 :marked
   The callbacks receive an `AnimationTransitionEvent` which contains useful properties such as `fromState`,