diff --git a/public/docs/_examples/animations/e2e-spec.ts b/public/docs/_examples/animations/e2e-spec.ts
index cd97cedb7e..c7516bce2b 100644
--- a/public/docs/_examples/animations/e2e-spec.ts
+++ b/public/docs/_examples/animations/e2e-spec.ts
@@ -29,7 +29,7 @@ describe('Animation Tests', () => {
     });
 
     it('animates between active and inactive', () => {
-      addHero();
+      addInactiveHero();
 
       let li = host.element(by.css('li'));
 
@@ -58,7 +58,7 @@ describe('Animation Tests', () => {
     });
 
     it('are not kept after animation', () => {
-      addHero();
+      addInactiveHero();
 
       let li = host.element(by.css('li'));
 
@@ -79,7 +79,7 @@ describe('Animation Tests', () => {
     });
 
     it('animates between active and inactive', () => {
-      addHero();
+      addInactiveHero();
 
       let li = host.element(by.css('li'));
 
@@ -108,7 +108,7 @@ describe('Animation Tests', () => {
     });
 
     it('animates between active and inactive', () => {
-      addHero();
+      addInactiveHero();
 
       let li = host.element(by.css('li'));
 
@@ -137,7 +137,7 @@ describe('Animation Tests', () => {
     });
 
     it('adds and removes element', () => {
-      addHero();
+      addInactiveHero();
 
       let li = host.element(by.css('li'));
       expect(li.getCssValue('transform')).toMatch(NO_TRANSFORM_MATRIX_REGEX);
@@ -157,7 +157,7 @@ describe('Animation Tests', () => {
     });
 
     it('adds and removes and animates between active and inactive', () => {
-      addHero();
+      addInactiveHero();
 
       let li = host.element(by.css('li'));
 
@@ -186,7 +186,7 @@ describe('Animation Tests', () => {
     });
 
     it('adds and removes element', () => {
-      addHero();
+      addInactiveHero();
 
       let li = host.element(by.css('li'));
       expect(li.getCssValue('height')).toBe('50px');
@@ -206,7 +206,7 @@ describe('Animation Tests', () => {
     });
 
     it('adds and removes element', () => {
-      addHero();
+      addInactiveHero();
 
       let li = host.element(by.css('li'));
       expect(li.getCssValue('transform')).toMatch(NO_TRANSFORM_MATRIX_REGEX);
@@ -227,7 +227,7 @@ describe('Animation Tests', () => {
     });
 
     it('adds and removes element', () => {
-      addHero();
+      addInactiveHero();
 
       let li = host.element(by.css('li'));
       expect(li.getCssValue('transform')).toMatch(NO_TRANSFORM_MATRIX_REGEX);
@@ -248,7 +248,7 @@ describe('Animation Tests', () => {
     });
 
     it('adds and removes element', () => {
-      addHero();
+      addInactiveHero();
 
       let li = host.element(by.css('li'));
       expect(li.getCssValue('transform')).toMatch(NO_TRANSFORM_MATRIX_REGEX);
@@ -260,8 +260,41 @@ describe('Animation Tests', () => {
 
   });
 
-  function addHero() {
-    element(by.buttonText('Add hero')).click();
+  describe('adding active heroes', () => {
+
+    let host: protractor.ElementFinder;
+
+    beforeEach(() => {
+      host = element(by.css('hero-list-basic'));
+    });
+
+    it('animates between active and inactive', () => {
+      addActiveHero();
+
+      let li = host.element(by.css('li'));
+
+      expect(getScaleX(li)).toBe(1.1);
+      expect(li.getCssValue('backgroundColor')).toBe(ACTIVE_COLOR);
+
+      li.click();
+      browser.driver.sleep(300);
+      expect(getScaleX(li)).toBe(1.0);
+      expect(li.getCssValue('backgroundColor')).toBe(INACTIVE_COLOR);
+
+      li.click();
+      browser.driver.sleep(300);
+      expect(getScaleX(li)).toBe(1.1);
+      expect(li.getCssValue('backgroundColor')).toBe(ACTIVE_COLOR);
+    });
+  });
+
+  function addActiveHero() {
+    element(by.buttonText('Add active hero')).click();
+    browser.driver.sleep(500);
+  }
+
+  function addInactiveHero() {
+    element(by.buttonText('Add inactive hero')).click();
     browser.driver.sleep(500);
   }
 
diff --git a/public/docs/_examples/animations/ts/app/hero-team-builder.component.ts b/public/docs/_examples/animations/ts/app/hero-team-builder.component.ts
index 0fe279188c..0ae7ec519e 100644
--- a/public/docs/_examples/animations/ts/app/hero-team-builder.component.ts
+++ b/public/docs/_examples/animations/ts/app/hero-team-builder.component.ts
@@ -16,7 +16,8 @@ import { HeroListTimingsComponent } from './hero-list-timings.component';
   selector: 'hero-team-builder',
   template: `
     <div class="buttons">
-      <button [disabled]="!heroes.canAdd()" (click)="heroes.add()">Add hero</button>
+      <button [disabled]="!heroes.canAdd()" (click)="heroes.addInactive()">Add inactive hero</button>
+      <button [disabled]="!heroes.canAdd()" (click)="heroes.addActive()">Add active hero</button>
       <button [disabled]="!heroes.canRemove()" (click)="heroes.remove()">Remove hero</button>
     </div>
     <div class="columns">
diff --git a/public/docs/_examples/animations/ts/app/hero.service.ts b/public/docs/_examples/animations/ts/app/hero.service.ts
index 2f30dcde99..6bdeb5a512 100644
--- a/public/docs/_examples/animations/ts/app/hero.service.ts
+++ b/public/docs/_examples/animations/ts/app/hero.service.ts
@@ -11,19 +11,17 @@ class Hero {
 }
 
 let ALL_HEROES = [
-  'Wolverine',
-  'Magneto',
-  'Emma Frost',
-  'Thing',
-  'Kitty Pryde',
-  'Nightcrawler',
-  'Juggernaut',
-  'Beast',
-  'Captain America',
-  'Spider-Man',
-  'Puck',
-  'Alex Wilder',
-  'Doctor Strange'
+  'Windstorm',
+  'RubberMan',
+  'Bombasto',
+  'Magneta',
+  'Dynama',
+  'Narco',
+  'Celeritas',
+  'Dr IQ',
+  'Magma',
+  'Tornado',
+  'Mr. Nice'
 ].map(name => new Hero(name));
 
 @Injectable()
@@ -43,8 +41,16 @@ export class Heroes implements Iterable<Hero> {
     return this.currentHeroes.length > 0;
   }
 
-  add() {
-    this.currentHeroes.push(ALL_HEROES[this.currentHeroes.length]);
+  addActive() {
+    let hero = ALL_HEROES[this.currentHeroes.length];
+    hero.state = 'active';
+    this.currentHeroes.push(hero);
+  }
+
+  addInactive() {
+    let hero = ALL_HEROES[this.currentHeroes.length];
+    hero.state = 'inactive';
+    this.currentHeroes.push(hero);
   }
 
   remove() {
diff --git a/public/resources/images/devguide/animations/animation_auto.gif b/public/resources/images/devguide/animations/animation_auto.gif
index a1708d9a58..6cda09ad69 100644
Binary files a/public/resources/images/devguide/animations/animation_auto.gif and b/public/resources/images/devguide/animations/animation_auto.gif differ
diff --git a/public/resources/images/devguide/animations/animation_basic_click.gif b/public/resources/images/devguide/animations/animation_basic_click.gif
index 6030aebee9..2cfc19ab9e 100644
Binary files a/public/resources/images/devguide/animations/animation_basic_click.gif and b/public/resources/images/devguide/animations/animation_basic_click.gif differ
diff --git a/public/resources/images/devguide/animations/animation_enter_leave.gif b/public/resources/images/devguide/animations/animation_enter_leave.gif
index 51d539b4fa..0a72694888 100644
Binary files a/public/resources/images/devguide/animations/animation_enter_leave.gif and b/public/resources/images/devguide/animations/animation_enter_leave.gif differ
diff --git a/public/resources/images/devguide/animations/animation_enter_leave_states.gif b/public/resources/images/devguide/animations/animation_enter_leave_states.gif
index 47f5a57958..5f4ec9c584 100644
Binary files a/public/resources/images/devguide/animations/animation_enter_leave_states.gif and b/public/resources/images/devguide/animations/animation_enter_leave_states.gif differ
diff --git a/public/resources/images/devguide/animations/animation_groups.gif b/public/resources/images/devguide/animations/animation_groups.gif
index a0122ca772..85ce40f6f6 100644
Binary files a/public/resources/images/devguide/animations/animation_groups.gif and b/public/resources/images/devguide/animations/animation_groups.gif differ
diff --git a/public/resources/images/devguide/animations/animation_multistep.gif b/public/resources/images/devguide/animations/animation_multistep.gif
index 0a5876c069..df569ec358 100644
Binary files a/public/resources/images/devguide/animations/animation_multistep.gif and b/public/resources/images/devguide/animations/animation_multistep.gif differ
diff --git a/public/resources/images/devguide/animations/animation_timings.gif b/public/resources/images/devguide/animations/animation_timings.gif
index fa9fc4eebb..8173b25f6d 100644
Binary files a/public/resources/images/devguide/animations/animation_timings.gif and b/public/resources/images/devguide/animations/animation_timings.gif differ