From 0f954e566f880f1106744c840516359a31f9d3b9 Mon Sep 17 00:00:00 2001
From: John Miller <miljo@microsoft.com>
Date: Fri, 2 Jun 2017 08:40:52 -0700
Subject: [PATCH 1/6] Initial commit with with animations and a few tweaks to
 teaching bubble

---
 .../src/components/Callout/Callout.Props.ts   |   5 +
 .../src/components/Callout/CalloutContent.tsx |   5 +-
 .../CoachmarkTeachingBubble.scss              |   0
 .../CoachmarkTeachingBubble.tsx               |   0
 .../TeachingBubble/TeachingBubble.Props.ts    |   5 +
 .../TeachingBubble/TeachingBubble.scss        | 162 ++++++++++++++++++
 .../TeachingBubble/TeachingBubble.tsx         |  46 ++++-
 .../TeachingBubble/TeachingBubbleContent.tsx  |  22 ++-
 .../TeachingBubble/TeachingBubblePage.tsx     |   5 +
 .../TeachingBubble.Coachmark.Example.tsx      |  58 +++++++
 10 files changed, 299 insertions(+), 9 deletions(-)
 create mode 100644 packages/office-ui-fabric-react/src/components/TeachingBubble/CoachmarkTeachingBubble/CoachmarkTeachingBubble.scss
 create mode 100644 packages/office-ui-fabric-react/src/components/TeachingBubble/CoachmarkTeachingBubble/CoachmarkTeachingBubble.tsx
 create mode 100644 packages/office-ui-fabric-react/src/components/TeachingBubble/examples/TeachingBubble.Coachmark.Example.tsx

diff --git a/packages/office-ui-fabric-react/src/components/Callout/Callout.Props.ts b/packages/office-ui-fabric-react/src/components/Callout/Callout.Props.ts
index e670a4c9d2fd9f..7bf3f1fd694d60 100644
--- a/packages/office-ui-fabric-react/src/components/Callout/Callout.Props.ts
+++ b/packages/office-ui-fabric-react/src/components/Callout/Callout.Props.ts
@@ -163,4 +163,9 @@ export interface ICalloutProps extends React.Props<Callout | CalloutContent> {
    * @deprecated
    */
   targetElement?: HTMLElement;
+
+  /**
+   * Classnames for the parent element
+   */
+  parentClassName?: string;
 }
diff --git a/packages/office-ui-fabric-react/src/components/Callout/CalloutContent.tsx b/packages/office-ui-fabric-react/src/components/Callout/CalloutContent.tsx
index eb7c3878ffc9e5..7461c53a578df8 100644
--- a/packages/office-ui-fabric-react/src/components/Callout/CalloutContent.tsx
+++ b/packages/office-ui-fabric-react/src/components/Callout/CalloutContent.tsx
@@ -104,7 +104,8 @@ export class CalloutContent extends BaseComponent<ICalloutProps, ICalloutState>
       beakStyle,
       children,
       beakWidth,
-      backgroundColor } = this.props;
+      backgroundColor,
+      parentClassName } = this.props;
     let { positions } = this.state;
     let beakStyleWidth = beakWidth;
 
@@ -127,7 +128,7 @@ export class CalloutContent extends BaseComponent<ICalloutProps, ICalloutState>
     let contentMaxHeight: number = this._getMaxHeight();
     let beakVisible: boolean = isBeakVisible && (!!targetElement || !!target);
     let content = (
-      <div ref={ this._resolveRef('_hostElement') } className={ css('ms-Callout-container', styles.container) }>
+      <div ref={ this._resolveRef('_hostElement') } className={ css('ms-Callout-container', styles.container, parentClassName) }>
         <div
           className={
             css(
diff --git a/packages/office-ui-fabric-react/src/components/TeachingBubble/CoachmarkTeachingBubble/CoachmarkTeachingBubble.scss b/packages/office-ui-fabric-react/src/components/TeachingBubble/CoachmarkTeachingBubble/CoachmarkTeachingBubble.scss
new file mode 100644
index 00000000000000..e69de29bb2d1d6
diff --git a/packages/office-ui-fabric-react/src/components/TeachingBubble/CoachmarkTeachingBubble/CoachmarkTeachingBubble.tsx b/packages/office-ui-fabric-react/src/components/TeachingBubble/CoachmarkTeachingBubble/CoachmarkTeachingBubble.tsx
new file mode 100644
index 00000000000000..e69de29bb2d1d6
diff --git a/packages/office-ui-fabric-react/src/components/TeachingBubble/TeachingBubble.Props.ts b/packages/office-ui-fabric-react/src/components/TeachingBubble/TeachingBubble.Props.ts
index 4b89b02c031a3e..2911ba6a0bb077 100644
--- a/packages/office-ui-fabric-react/src/components/TeachingBubble/TeachingBubble.Props.ts
+++ b/packages/office-ui-fabric-react/src/components/TeachingBubble/TeachingBubble.Props.ts
@@ -65,4 +65,9 @@ export interface ITeachingBubbleProps extends React.Props<TeachingBubble | Teach
    * Callback when the TeachingBubble tries to close.
    */
   onDismiss?: (ev?: any) => void;
+
+  /**
+   * Variant for the coachMark
+   */
+  isCoachmark?: boolean;
 }
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/TeachingBubble/TeachingBubble.scss b/packages/office-ui-fabric-react/src/components/TeachingBubble/TeachingBubble.scss
index 60c86dfd5c0844..c71a146697e4af 100644
--- a/packages/office-ui-fabric-react/src/components/TeachingBubble/TeachingBubble.scss
+++ b/packages/office-ui-fabric-react/src/components/TeachingBubble/TeachingBubble.scss
@@ -121,3 +121,165 @@
     border-color: $ms-color-white;
   }
 }
+
+$coachmarkCircleRadius: 50%;
+
+.coachmark,
+.coachmark .content {
+  width: 50px;
+  height: 50px;
+  border-radius: $coachmarkCircleRadius;
+  position: relative;
+  transition: border-radius, width, height 500ms cubic-bezier(0.5, 0, 0, 1);
+
+  :global(.ms-Callout-beak) {
+    left: -4px !important;
+    box-shadow: 0;
+  }
+}
+
+.coachmark {
+  :global(.ms-Callout-beakCurtain) {
+    background-color: $ms-color-themePrimary;
+    border-radius:  $coachmarkCircleRadius;
+    transition: border-radius, width, height 500ms cubic-bezier(0.5, 0, 0, 1);
+  }
+
+  :global(.ms-Callout-main) {
+    border-radius:  $coachmarkCircleRadius;
+    transition: border-radius, width, height 500ms cubic-bezier(0.5, 0, 0, 1);
+  }
+}
+
+.coachmark .bodyContent {
+  display: none;
+  transition: transform 500ms cubic-bezier(0.5, 0, 0, 1);
+  transform: scale(0);
+}
+
+.icon {
+  color: $ms-color-white;
+  font-size: 24px;
+  width: 24px;
+  height: 24px;
+  margin-top: 13px;
+  margin-left: 13px;
+  transition: opacity, transform 100ms cubic-bezier(0.33, 0, 0.66, 1);
+}
+
+.fadeOut .icon {
+  opacity: 0.8;
+  transform: scale(0);
+}
+
+.fadeOut {
+  border-radius: 0;
+  width: 362px;
+  height: 116px;
+
+  :global(.ms-Callout-beakCurtain) {
+    border-radius: 0;
+  }
+
+  :global(.ms-Callout-main) {
+    border-radius: 0;
+  }
+}
+
+.fadeOut .bodyContent {
+  display: block;
+  transform: scale(1);
+}
+
+.fadeOut .content {
+  border-radius: 0;
+  width: 362px;
+  height: 116px;
+}
+
+.coachmarkContainer {
+  animation-duration: 2.55s;
+  animation-timing-function: linear;
+  animation-direction: normal;
+  animation-iteration-count: infinite;
+  animation-delay: 0s;
+  animation-name: pop;
+}
+
+.coachmark.animate {
+  animation-duration: 2.55s;
+  animation-timing-function: linear;
+  animation-direction: normal;
+  animation-iteration-count: infinite;
+  animation-delay: 0s;
+  animation-name: wiggle;
+}
+
+.coachmark.animate .bodyContent {
+  animation-duration: 100ms;
+  animation-name: lightBulbFade;
+}
+
+@keyframes pop {
+    0% {
+        transform: translate(102.31px, 103.31px);
+        animation-timing-function: linear;
+    }
+    17.65% {
+        transform: translate(102.31px, 103.31px);
+        animation-timing-function: cubic-bezier(0.62, 0, 0.56, 1);
+    }
+    40.52% {
+        transform: translate(102.31px, 100.81px);
+        animation-timing-function: cubic-bezier(0.58, 0, 0, 1);
+    }
+    55.56% {
+        transform: translate(102.31px, 114.31px);
+        animation-timing-function: cubic-bezier(1, 0, 0.56, 1);
+    }
+    73.2% {
+        transform: translate(102.31px, 100.81px);
+        animation-timing-function: cubic-bezier(0.58, 0, 0.67, 1);
+    }
+    84.31% {
+        transform: translate(102.31px, 103.31px);
+        animation-timing-function: linear;
+    }
+    100% {
+        transform: translate(102.31px, 103.31px);
+    }
+}
+
+@keyframes wiggle {
+    0% {
+        transform: rotate(0deg);
+        animation-timing-function: linear;
+    }
+    47.06% {
+        transform: rotate(0deg);
+        animation-timing-function: cubic-bezier(0.33, 0, 0.67, 1);
+    }
+    50.33% {
+        transform: rotate(5deg);
+        animation-timing-function: cubic-bezier(0.33, 0, 0.67, 1);
+    }
+    53.59% {
+        transform: rotate(-5deg);
+        animation-timing-function: cubic-bezier(0.33, 0, 0.67, 1);
+    }
+    56.86% {
+        transform: rotate(5deg);
+        animation-timing-function: cubic-bezier(0.33, 0, 0.67, 1);
+    }
+    60.13% {
+        transform: rotate(-5deg);
+        animation-timing-function: cubic-bezier(0.33, 0, 0.67, 1);
+    }
+    63.4% {
+        transform: rotate(0deg);
+        animation-timing-function: linear;
+    }
+    100% {
+        transform: rotate(0deg);
+    }
+}
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/TeachingBubble/TeachingBubble.tsx b/packages/office-ui-fabric-react/src/components/TeachingBubble/TeachingBubble.tsx
index f5e9608056aa02..0b532de3a549a6 100644
--- a/packages/office-ui-fabric-react/src/components/TeachingBubble/TeachingBubble.tsx
+++ b/packages/office-ui-fabric-react/src/components/TeachingBubble/TeachingBubble.tsx
@@ -11,6 +11,7 @@ const styles: any = stylesImport;
 
 export interface ITeachingBubbleState {
   isTeachingBubbleVisible?: boolean;
+  isCoachmarkAnimating?: boolean;
 }
 
 export class TeachingBubble extends BaseComponent<ITeachingBubbleProps, ITeachingBubbleState> {
@@ -26,26 +27,61 @@ export class TeachingBubble extends BaseComponent<ITeachingBubbleProps, ITeachin
     }
   };
 
+  private _currentHeight: number;
+  private _currentWidth: number;
+  private _coachmark: HTMLDivElement;
+
   // Constructor
   constructor(props: ITeachingBubbleProps) {
     super(props);
 
     this.state = {
+      isCoachmarkAnimating: false
     };
   }
 
-  public render() {
-    let { calloutProps, targetElement } = this.props;
+  public componentDidMount() {
+    const rect = this._coachmark.getBoundingClientRect();
+    const height = rect.height;
+    const width = rect.width;
+  }
 
+  public render() {
+    let { calloutProps, targetElement, isCoachmark } = this.props;
+    const classes = css(
+      'ms-TeachingBubble',
+      styles.root,
+      {
+        ['ms-TeachingBubble--coachmark']: isCoachmark,
+        [styles.coachmark]: isCoachmark,
+        [styles.animate]: isCoachmark,
+        [styles.fadeOut]: this.state.isCoachmarkAnimating
+      }
+    );
     return (
       <Callout
-        className={ css('ms-TeachingBubble', styles.root) }
-        ref={ this._resolveRef('_callout') }
+        className={ classes }
         targetElement={ targetElement }
+        ref={ this._resolveRef('_callout') }
+        parentClassName={ css({ [styles.coachmarkContainer]: isCoachmark }) }
         {...calloutProps}
       >
-        <TeachingBubbleContent { ...this.props } />
+        <div className={ css({ [styles.animationLayer]: isCoachmark, ['TeachingBubble-animationLayer']: isCoachmark }) }
+          onClick={ () => {
+            this.setState({
+              isCoachmarkAnimating: true
+            });
+
+          } } ref={ this._resolveRef('_coachmark') }>
+          <TeachingBubbleContent { ...this.props } />
+        </div>
       </Callout>
     );
   }
+
+  private _coachmarkOnClickHandler() {
+
+    // Set the height and width of the element
+
+  }
 }
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/TeachingBubble/TeachingBubbleContent.tsx b/packages/office-ui-fabric-react/src/components/TeachingBubble/TeachingBubbleContent.tsx
index 0c8ede6f0775b9..b5f85862c15ace 100644
--- a/packages/office-ui-fabric-react/src/components/TeachingBubble/TeachingBubbleContent.tsx
+++ b/packages/office-ui-fabric-react/src/components/TeachingBubble/TeachingBubbleContent.tsx
@@ -10,9 +10,15 @@ import { ITeachingBubbleProps } from './TeachingBubble.Props';
 import { ITeachingBubbleState } from './TeachingBubble';
 import { PrimaryButton, DefaultButton, IconButton } from '../../Button';
 import { Image, ImageFit } from '../../Image';
+import { Icon, IconName } from '../../Icon';
 import * as stylesImport from './TeachingBubble.scss';
 const styles: any = stylesImport;
 
+export interface ITeachingBubbleClassNames {
+  base?: string;
+  variant?: string;
+}
+
 export class TeachingBubbleContent extends BaseComponent<ITeachingBubbleProps, ITeachingBubbleState> {
 
   // Specify default props values
@@ -22,6 +28,10 @@ export class TeachingBubbleContent extends BaseComponent<ITeachingBubbleProps, I
       imageFit: ImageFit.cover,
       width: 364,
       height: 130
+    },
+    classNames: {
+      base: 'ms-TeachingBubble',
+      variant: ''
     }
   };
 
@@ -38,13 +48,20 @@ export class TeachingBubbleContent extends BaseComponent<ITeachingBubbleProps, I
   }
 
   public render() {
-    let { illustrationImage, primaryButtonProps, secondaryButtonProps, headline, hasCondensedHeadline, hasCloseIcon, onDismiss, closeButtonAriaLabel } = this.props;
+    let { illustrationImage, primaryButtonProps, secondaryButtonProps, headline, hasCondensedHeadline, hasCloseIcon, onDismiss, closeButtonAriaLabel, isCoachmark } = this.props;
 
     let imageContent;
     let headerContent;
     let bodyContent;
     let footerContent;
     let closeButton;
+    let coachMarkIcon;
+
+    if (isCoachmark) {
+      coachMarkIcon = (
+        <Icon className={ css('TeachingBubble-icon', styles.icon) } iconName={ 'Lightbulb' } />
+      );
+    }
 
     if (illustrationImage && illustrationImage.src) {
       imageContent = (
@@ -111,7 +128,8 @@ export class TeachingBubbleContent extends BaseComponent<ITeachingBubbleProps, I
     }
 
     return (
-      <div className={ css('ms-TeachingBubble-content') }>
+      <div className={ css('ms-TeachingBubble-content', styles.content) }>
+        { coachMarkIcon }
         { imageContent }
         { closeButton }
         <div className={ css('ms-TeachingBubble-bodycontent', styles.bodyContent) }>
diff --git a/packages/office-ui-fabric-react/src/components/TeachingBubble/TeachingBubblePage.tsx b/packages/office-ui-fabric-react/src/components/TeachingBubble/TeachingBubblePage.tsx
index 15311eb737915d..743f3bd6bf1ea7 100644
--- a/packages/office-ui-fabric-react/src/components/TeachingBubble/TeachingBubblePage.tsx
+++ b/packages/office-ui-fabric-react/src/components/TeachingBubble/TeachingBubblePage.tsx
@@ -9,10 +9,12 @@ import {
 import { TeachingBubbleBasicExample } from './examples/TeachingBubble.Basic.Example';
 import { TeachingBubbleCondensedExample } from './examples/TeachingBubble.Condensed.Example';
 import { TeachingBubbleIllustrationExample } from './examples/TeachingBubble.Illustration.Example';
+import { TeachingBubbleCoachmarkExample } from './examples/TeachingBubble.Coachmark.Example';
 
 const TeachingBubbleBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/TeachingBubble/examples/TeachingBubble.Basic.Example.tsx') as string;
 const TeachingBubbleCondensedExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/TeachingBubble/examples/TeachingBubble.Condensed.Example.tsx') as string;
 const TeachingBubbleIllustrationExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/TeachingBubble/examples/TeachingBubble.Basic.Example.tsx') as string;
+const TeachingBubbleCoachmarkExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/TeachingBubble/examples/TeachingBubble.Coachmark.Example.tsx') as string;
 
 export class TeachingBubblePage extends React.Component<any, any> {
   public render() {
@@ -31,6 +33,9 @@ export class TeachingBubblePage extends React.Component<any, any> {
             <ExampleCard title='TeachingBubble with Illustration' code={ TeachingBubbleIllustrationExampleCode }>
               <TeachingBubbleIllustrationExample />
             </ExampleCard>
+            <ExampleCard title='TeachingBubble Coachmark' code={ TeachingBubbleCoachmarkExampleCode }>
+              <TeachingBubbleCoachmarkExample />
+            </ExampleCard>
           </LayerHost>
         }
         propertiesTables={
diff --git a/packages/office-ui-fabric-react/src/components/TeachingBubble/examples/TeachingBubble.Coachmark.Example.tsx b/packages/office-ui-fabric-react/src/components/TeachingBubble/examples/TeachingBubble.Coachmark.Example.tsx
new file mode 100644
index 00000000000000..248d079773149b
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/TeachingBubble/examples/TeachingBubble.Coachmark.Example.tsx
@@ -0,0 +1,58 @@
+/* tslint:disable:no-unused-variable */
+import * as React from 'react';
+/* tslint:enable:no-unused-variable */
+
+import { DefaultButton, IButtonProps } from 'office-ui-fabric-react/lib/Button';
+import { TeachingBubble } from 'office-ui-fabric-react/lib/TeachingBubble';
+
+export interface ITeachingBubbleBasicExampleState {
+  isTeachingBubbleVisible?: boolean;
+}
+
+export class TeachingBubbleCoachmarkExample extends React.Component<any, ITeachingBubbleBasicExampleState> {
+  private _menuButtonElement: HTMLElement;
+
+  public constructor() {
+    super();
+
+    this._onDismiss = this._onDismiss.bind(this);
+
+    this.state = {
+      isTeachingBubbleVisible: false,
+    };
+  }
+
+  public render() {
+    let { isTeachingBubbleVisible } = this.state;
+
+    return (
+      <div className='ms-TeachingBubbleExample'>
+        <span className='ms-TeachingBubbleBasicExample-buttonArea' ref={ (menuButton) => this._menuButtonElement = menuButton }>
+          <DefaultButton
+            onClick={ this._onDismiss }
+            text={ isTeachingBubbleVisible ? 'Hide Coachmark' : 'Show Coachmark' }
+          />
+        </span>
+        { isTeachingBubbleVisible ? (
+          <div>
+            <TeachingBubble
+              targetElement={ this._menuButtonElement }
+              hasCondensedHeadline={ true }
+              onDismiss={ this._onDismiss }
+              headline='Discover what’s trending around you'
+              isCoachmark={ true }
+            >
+              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, nulla, ipsum? Molestiae quis aliquam magni harum non?
+            </TeachingBubble>
+          </div>
+        ) : (null) }
+      </div>
+    );
+  }
+
+  private _onDismiss(ev: any) {
+    this.setState({
+      isTeachingBubbleVisible: !this.state.isTeachingBubbleVisible
+    });
+  }
+}

From 3952a4a8a4b81b6020d9f6d5bdcff30dfa9db258 Mon Sep 17 00:00:00 2001
From: John Miller <miljo@microsoft.com>
Date: Fri, 2 Jun 2017 14:28:41 -0700
Subject: [PATCH 2/6] Cleaned up the CSS a bit and fixed the animation

---
 .../TeachingBubble/TeachingBubble.scss        | 99 ++++++++++---------
 .../TeachingBubble/TeachingBubble.tsx         | 19 ++--
 2 files changed, 62 insertions(+), 56 deletions(-)

diff --git a/packages/office-ui-fabric-react/src/components/TeachingBubble/TeachingBubble.scss b/packages/office-ui-fabric-react/src/components/TeachingBubble/TeachingBubble.scss
index c71a146697e4af..9a377fa7462bdf 100644
--- a/packages/office-ui-fabric-react/src/components/TeachingBubble/TeachingBubble.scss
+++ b/packages/office-ui-fabric-react/src/components/TeachingBubble/TeachingBubble.scss
@@ -122,23 +122,45 @@
   }
 }
 
+/*
+  TEACHING BUBBLE
+*/
 $coachmarkCircleRadius: 50%;
+@mixin coachmarkPopWiggleSettings {
+  animation-duration: 2.55s;
+  animation-timing-function: linear;
+  animation-direction: normal;
+  animation-iteration-count: infinite;
+  animation-delay: 0s;
+}
+
+.coachmarkIsWiggling {
+  @include coachmarkPopWiggleSettings();
+  animation-name: pop;
+
+  :global(.ms-Callout) {
+     @include coachmarkPopWiggleSettings();
+     animation-name: wiggle;
+  }
+}
 
-.coachmark,
-.coachmark .content {
-  width: 50px;
-  height: 50px;
-  border-radius: $coachmarkCircleRadius;
-  position: relative;
-  transition: border-radius, width, height 500ms cubic-bezier(0.5, 0, 0, 1);
-
-  :global(.ms-Callout-beak) {
-    left: -4px !important;
-    box-shadow: 0;
+.coachmarkCalloutContainer {
+  :global(.ms-Callout),
+  .content {
+    width: 50px;
+    height: 50px;
+    border-radius: $coachmarkCircleRadius;
+    position: relative;
+    transition: border-radius, width, height 500ms cubic-bezier(0.5, 0, 0, 1);
+
+    :global(.ms-Callout-beak) {
+      left: -4px !important;
+      box-shadow: 0;
+    }
   }
 }
 
-.coachmark {
+.coachmarkCalloutContainer :global(.ms-Callout) {
   :global(.ms-Callout-beakCurtain) {
     background-color: $ms-color-themePrimary;
     border-radius:  $coachmarkCircleRadius;
@@ -151,7 +173,7 @@ $coachmarkCircleRadius: 50%;
   }
 }
 
-.coachmark .bodyContent {
+.coachmarkCalloutContainer .bodyContent {
   display: none;
   transition: transform 500ms cubic-bezier(0.5, 0, 0, 1);
   transform: scale(0);
@@ -167,59 +189,40 @@ $coachmarkCircleRadius: 50%;
   transition: opacity, transform 100ms cubic-bezier(0.33, 0, 0.66, 1);
 }
 
-.fadeOut .icon {
+.coachmarkIsAnimating .icon {
   opacity: 0.8;
   transform: scale(0);
+  display: none;
 }
 
-.fadeOut {
-  border-radius: 0;
-  width: 362px;
-  height: 116px;
-
-  :global(.ms-Callout-beakCurtain) {
+.coachmarkIsAnimating {
+  :global(.ms-Callout),
+  .content {
     border-radius: 0;
-  }
+    width: 362px;
+    height: 116px;
 
-  :global(.ms-Callout-main) {
-    border-radius: 0;
+    :global(.ms-Callout-beakCurtain) {
+      border-radius: 0;
+    }
+
+    :global(.ms-Callout-main) {
+      border-radius: 0;
+    }
   }
 }
 
-.fadeOut .bodyContent {
+.coachmarkIsAnimating .bodyContent {
   display: block;
   transform: scale(1);
 }
 
-.fadeOut .content {
+.coachmarkIsAnimating .content {
   border-radius: 0;
   width: 362px;
   height: 116px;
 }
 
-.coachmarkContainer {
-  animation-duration: 2.55s;
-  animation-timing-function: linear;
-  animation-direction: normal;
-  animation-iteration-count: infinite;
-  animation-delay: 0s;
-  animation-name: pop;
-}
-
-.coachmark.animate {
-  animation-duration: 2.55s;
-  animation-timing-function: linear;
-  animation-direction: normal;
-  animation-iteration-count: infinite;
-  animation-delay: 0s;
-  animation-name: wiggle;
-}
-
-.coachmark.animate .bodyContent {
-  animation-duration: 100ms;
-  animation-name: lightBulbFade;
-}
-
 @keyframes pop {
     0% {
         transform: translate(102.31px, 103.31px);
diff --git a/packages/office-ui-fabric-react/src/components/TeachingBubble/TeachingBubble.tsx b/packages/office-ui-fabric-react/src/components/TeachingBubble/TeachingBubble.tsx
index 0b532de3a549a6..66e3152e556a17 100644
--- a/packages/office-ui-fabric-react/src/components/TeachingBubble/TeachingBubble.tsx
+++ b/packages/office-ui-fabric-react/src/components/TeachingBubble/TeachingBubble.tsx
@@ -12,6 +12,7 @@ const styles: any = stylesImport;
 export interface ITeachingBubbleState {
   isTeachingBubbleVisible?: boolean;
   isCoachmarkAnimating?: boolean;
+  isCoachmarkWiggling?: boolean;
 }
 
 export class TeachingBubble extends BaseComponent<ITeachingBubbleProps, ITeachingBubbleState> {
@@ -36,7 +37,8 @@ export class TeachingBubble extends BaseComponent<ITeachingBubbleProps, ITeachin
     super(props);
 
     this.state = {
-      isCoachmarkAnimating: false
+      isCoachmarkAnimating: false,
+      isCoachmarkWiggling: true
     };
   }
 
@@ -52,10 +54,7 @@ export class TeachingBubble extends BaseComponent<ITeachingBubbleProps, ITeachin
       'ms-TeachingBubble',
       styles.root,
       {
-        ['ms-TeachingBubble--coachmark']: isCoachmark,
-        [styles.coachmark]: isCoachmark,
-        [styles.animate]: isCoachmark,
-        [styles.fadeOut]: this.state.isCoachmarkAnimating
+        ['ms-TeachingBubble--coachmark']: isCoachmark
       }
     );
     return (
@@ -63,15 +62,19 @@ export class TeachingBubble extends BaseComponent<ITeachingBubbleProps, ITeachin
         className={ classes }
         targetElement={ targetElement }
         ref={ this._resolveRef('_callout') }
-        parentClassName={ css({ [styles.coachmarkContainer]: isCoachmark }) }
+        parentClassName={ css({
+          [styles.coachmarkCalloutContainer]: isCoachmark,
+          [styles.coachmarkIsWiggling]: this.state.isCoachmarkWiggling,
+          [styles.coachmarkIsAnimating]: this.state.isCoachmarkAnimating
+        }) }
         {...calloutProps}
       >
         <div className={ css({ [styles.animationLayer]: isCoachmark, ['TeachingBubble-animationLayer']: isCoachmark }) }
           onClick={ () => {
             this.setState({
-              isCoachmarkAnimating: true
+              isCoachmarkAnimating: true,
+              isCoachmarkWiggling: false
             });
-
           } } ref={ this._resolveRef('_coachmark') }>
           <TeachingBubbleContent { ...this.props } />
         </div>

From 79fe50a984763c440857c2e28e544882d26b7986 Mon Sep 17 00:00:00 2001
From: John Miller <miljo@microsoft.com>
Date: Fri, 2 Jun 2017 15:21:01 -0700
Subject: [PATCH 3/6] Tweaking animation

---
 .../TeachingBubble/TeachingBubble.scss        | 21 +++++++++++++------
 1 file changed, 15 insertions(+), 6 deletions(-)

diff --git a/packages/office-ui-fabric-react/src/components/TeachingBubble/TeachingBubble.scss b/packages/office-ui-fabric-react/src/components/TeachingBubble/TeachingBubble.scss
index 9a377fa7462bdf..efcd6e4266d857 100644
--- a/packages/office-ui-fabric-react/src/components/TeachingBubble/TeachingBubble.scss
+++ b/packages/office-ui-fabric-react/src/components/TeachingBubble/TeachingBubble.scss
@@ -134,6 +134,10 @@ $coachmarkCircleRadius: 50%;
   animation-delay: 0s;
 }
 
+@mixin coachMarkAnimateOutTransition {
+  transition: border-radius 250ms, width 500ms, height 500ms cubic-bezier(0.5, 0, 0, 1);
+}
+
 .coachmarkIsWiggling {
   @include coachmarkPopWiggleSettings();
   animation-name: pop;
@@ -144,6 +148,11 @@ $coachmarkCircleRadius: 50%;
   }
 }
 
+.coachmarkCalloutContainer .bodyContent,
+.coachmarkCalloutContainer .content {
+  overflow: hidden;
+}
+
 .coachmarkCalloutContainer {
   :global(.ms-Callout),
   .content {
@@ -151,7 +160,7 @@ $coachmarkCircleRadius: 50%;
     height: 50px;
     border-radius: $coachmarkCircleRadius;
     position: relative;
-    transition: border-radius, width, height 500ms cubic-bezier(0.5, 0, 0, 1);
+    @include coachMarkAnimateOutTransition();
 
     :global(.ms-Callout-beak) {
       left: -4px !important;
@@ -164,19 +173,19 @@ $coachmarkCircleRadius: 50%;
   :global(.ms-Callout-beakCurtain) {
     background-color: $ms-color-themePrimary;
     border-radius:  $coachmarkCircleRadius;
-    transition: border-radius, width, height 500ms cubic-bezier(0.5, 0, 0, 1);
+    @include coachMarkAnimateOutTransition();
   }
 
   :global(.ms-Callout-main) {
     border-radius:  $coachmarkCircleRadius;
-    transition: border-radius, width, height 500ms cubic-bezier(0.5, 0, 0, 1);
+    @include coachMarkAnimateOutTransition();
   }
 }
 
 .coachmarkCalloutContainer .bodyContent {
-  display: none;
   transition: transform 500ms cubic-bezier(0.5, 0, 0, 1);
   transform: scale(0);
+  transform-origin: top left;
 }
 
 .icon {
@@ -186,7 +195,7 @@ $coachmarkCircleRadius: 50%;
   height: 24px;
   margin-top: 13px;
   margin-left: 13px;
-  transition: opacity, transform 100ms cubic-bezier(0.33, 0, 0.66, 1);
+  transition: opacity 100ms, transform 100ms cubic-bezier(0.33, 0, 0.66, 1);
 }
 
 .coachmarkIsAnimating .icon {
@@ -198,7 +207,7 @@ $coachmarkCircleRadius: 50%;
 .coachmarkIsAnimating {
   :global(.ms-Callout),
   .content {
-    border-radius: 0;
+    border-radius: 1px;
     width: 362px;
     height: 116px;
 

From fbb909bb3f47eda4eaa51ea16007198a6ea36f16 Mon Sep 17 00:00:00 2001
From: John Miller <miljo@microsoft.com>
Date: Fri, 2 Jun 2017 15:32:18 -0700
Subject: [PATCH 4/6] few more tweaks

---
 .../src/components/TeachingBubble/TeachingBubble.scss            | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/office-ui-fabric-react/src/components/TeachingBubble/TeachingBubble.scss b/packages/office-ui-fabric-react/src/components/TeachingBubble/TeachingBubble.scss
index efcd6e4266d857..d98bbc8763ead6 100644
--- a/packages/office-ui-fabric-react/src/components/TeachingBubble/TeachingBubble.scss
+++ b/packages/office-ui-fabric-react/src/components/TeachingBubble/TeachingBubble.scss
@@ -141,6 +141,7 @@ $coachmarkCircleRadius: 50%;
 .coachmarkIsWiggling {
   @include coachmarkPopWiggleSettings();
   animation-name: pop;
+  cursor: pointer;
 
   :global(.ms-Callout) {
      @include coachmarkPopWiggleSettings();

From 13096fb43b153d86f5767e8818fb66791995cef9 Mon Sep 17 00:00:00 2001
From: John Miller <miljo@microsoft.com>
Date: Thu, 6 Jul 2017 12:51:46 -0700
Subject: [PATCH 5/6] Fixing some animation bugs with Coachmark

---
 .../src/components/Callout/CalloutContent.tsx                   | 1 +
 .../src/components/TeachingBubble/TeachingBubble.tsx            | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/office-ui-fabric-react/src/components/Callout/CalloutContent.tsx b/packages/office-ui-fabric-react/src/components/Callout/CalloutContent.tsx
index 7461c53a578df8..a4e1422fa6311c 100644
--- a/packages/office-ui-fabric-react/src/components/Callout/CalloutContent.tsx
+++ b/packages/office-ui-fabric-react/src/components/Callout/CalloutContent.tsx
@@ -181,6 +181,7 @@ export class CalloutContent extends BaseComponent<ICalloutProps, ICalloutState>
     if (this.state.positions && !preventDismissOnScroll) {
       this._dismissOnLostFocus(ev);
     }
+    this._updatePosition();
   }
 
   protected _dismissOnLostFocus(ev: Event) {
diff --git a/packages/office-ui-fabric-react/src/components/TeachingBubble/TeachingBubble.tsx b/packages/office-ui-fabric-react/src/components/TeachingBubble/TeachingBubble.tsx
index 66e3152e556a17..600916b2db835b 100644
--- a/packages/office-ui-fabric-react/src/components/TeachingBubble/TeachingBubble.tsx
+++ b/packages/office-ui-fabric-react/src/components/TeachingBubble/TeachingBubble.tsx
@@ -38,7 +38,7 @@ export class TeachingBubble extends BaseComponent<ITeachingBubbleProps, ITeachin
 
     this.state = {
       isCoachmarkAnimating: false,
-      isCoachmarkWiggling: true
+      isCoachmarkWiggling: props.isCoachmark // If it's not a Coachmark then we dont want to start animating the TeachingBubble right away
     };
   }
 

From a0509eecd3bd58c8030fd43b5454a7d436d56771 Mon Sep 17 00:00:00 2001
From: John Miller <miljo@microsoft.com>
Date: Fri, 3 Nov 2017 06:05:53 -0700
Subject: [PATCH 6/6] Fixing a few linting errors.

---
 .../TeachingBubble/TeachingBubble.tsx         | 25 +++++++++++--------
 1 file changed, 15 insertions(+), 10 deletions(-)

diff --git a/packages/office-ui-fabric-react/src/components/TeachingBubble/TeachingBubble.tsx b/packages/office-ui-fabric-react/src/components/TeachingBubble/TeachingBubble.tsx
index 9488f9c045eb05..fbd18ca5889999 100644
--- a/packages/office-ui-fabric-react/src/components/TeachingBubble/TeachingBubble.tsx
+++ b/packages/office-ui-fabric-react/src/components/TeachingBubble/TeachingBubble.tsx
@@ -71,22 +71,27 @@ export class TeachingBubble extends BaseComponent<ITeachingBubbleProps, ITeachin
         }) }
         {...calloutProps}
       >
-        <div className={ css({
-          [styles.animationLayer]: isCoachmark!,
-          ['TeachingBubble-animationLayer']: isCoachmark!
-        }) }
-          onClick={ () => {
-            this.setState({
-              isCoachmarkAnimating: true,
-              isCoachmarkWiggling: false
-            });
-          } } ref={ this._resolveRef('_coachmark') }>
+        <div
+          className={ css({
+            [styles.animationLayer]: isCoachmark!,
+            ['TeachingBubble-animationLayer']: isCoachmark!
+          }) }
+          onClick={ this._onClickHandler }
+          ref={ this._resolveRef('_coachmark') }
+        >
           <TeachingBubbleContent { ...this.props } />
         </div>
       </Callout>
     );
   }
 
+  private _onClickHandler() {
+    this.setState({
+      isCoachmarkAnimating: true,
+      isCoachmarkWiggling: false
+    });
+  }
+
   private _coachmarkOnClickHandler() {
 
     // Set the height and width of the element