From 485d25953f6f9bd85388501720d76c363969479f Mon Sep 17 00:00:00 2001
From: madou <laheen@gmail.com>
Date: Thu, 2 May 2019 23:38:46 +1000
Subject: [PATCH 1/5] feat: adds reshaping container composite component

---
 packages/yubaba/src/Baba/index.tsx            |   7 +-
 packages/yubaba/src/Collector/index.tsx       |  24 +-
 .../animations/ReshapingContainer/index.tsx   | 211 ++++++++++++++++++
 .../animations/ReshapingContainer/stories.tsx | 100 +++++++++
 .../src/animations/SimpleReveal/index.tsx     | 105 +++++++++
 .../src/animations/SimpleReveal/stories.tsx   |  46 ++++
 packages/yubaba/src/index.tsx                 |   2 +
 7 files changed, 479 insertions(+), 16 deletions(-)
 create mode 100644 packages/yubaba/src/animations/ReshapingContainer/index.tsx
 create mode 100644 packages/yubaba/src/animations/ReshapingContainer/stories.tsx
 create mode 100644 packages/yubaba/src/animations/SimpleReveal/index.tsx
 create mode 100644 packages/yubaba/src/animations/SimpleReveal/stories.tsx

diff --git a/packages/yubaba/src/Baba/index.tsx b/packages/yubaba/src/Baba/index.tsx
index 561a949..87c4d49 100644
--- a/packages/yubaba/src/Baba/index.tsx
+++ b/packages/yubaba/src/Baba/index.tsx
@@ -21,10 +21,8 @@ import noop from '../lib/noop';
 import * as babaStore from '../lib/babaStore';
 import { InjectedProps, withBabaManagerContext } from '../BabaManager';
 
-
 export type AnimationFunc = () => Promise<void>;
 
-
 export interface MappedAnimation {
   animate: AnimationFunc;
   beforeAnimate: AnimationFunc;
@@ -32,16 +30,13 @@ export interface MappedAnimation {
   cleanup: () => void;
 }
 
-
 export type AnimationBlock = MappedAnimation[];
 
-
 export interface ChildProps {
   style?: InlineStyles;
   className?: string;
 }
 
-
 export interface State {
   shown: boolean;
   childProps: ChildProps;
@@ -481,6 +476,7 @@ If it's an image, try and have the image loaded before mounting, or set a static
 
     return (
       <Collector
+        topMostCollector
         receiveData={this.setData}
         receiveRenderChildren={this.setReactNode}
         receiveRef={this.setRef}
@@ -497,5 +493,4 @@ If it's an image, try and have the image loaded before mounting, or set a static
   }
 }
 
-
 export const WrappedBaba = withBabaManagerContext(Baba);
diff --git a/packages/yubaba/src/Collector/index.tsx b/packages/yubaba/src/Collector/index.tsx
index b5b797b..14c401b 100644
--- a/packages/yubaba/src/Collector/index.tsx
+++ b/packages/yubaba/src/Collector/index.tsx
@@ -86,6 +86,7 @@ export interface CollectorProps extends CollectorChildrenProps {
   data?: CollectorData;
   style?: InlineStyles;
   className?: string;
+  topMostCollector?: boolean;
 }
 
 export interface Collect {
@@ -113,6 +114,7 @@ export default class Collector extends React.Component<CollectorProps> {
       receiveRenderChildren,
       receiveRef,
       receiveData,
+      topMostCollector,
     } = this.props;
 
     if (typeof children !== 'function') {
@@ -126,7 +128,7 @@ export default class Collector extends React.Component<CollectorProps> {
                     receiveRef(ref);
                   }
 
-                  if (collect) {
+                  if (!topMostCollector && collect) {
                     collect.ref(ref);
                   }
                 },
@@ -136,13 +138,13 @@ export default class Collector extends React.Component<CollectorProps> {
                     receiveFocalTargetRef(ref);
                   }
 
-                  if (collect) {
+                  if (!topMostCollector && collect) {
                     collect.focalTargetRef(ref);
                   }
                 },
                 data: childData => {
                   const collectedData = data ? [data].concat(childData) : childData;
-                  if (collect) {
+                  if (!topMostCollector && collect) {
                     collect.data(collectedData);
                   }
 
@@ -151,7 +153,7 @@ export default class Collector extends React.Component<CollectorProps> {
                   }
                 },
                 renderChildren: node => {
-                  if (collect) {
+                  if (!topMostCollector && collect) {
                     collect.renderChildren(node);
                   }
 
@@ -161,9 +163,10 @@ export default class Collector extends React.Component<CollectorProps> {
                 },
                 style: {
                   ...style,
-                  ...(collect ? collect.style : {}),
+                  ...(collect && !topMostCollector ? collect.style : {}),
                 },
-                className: className || (collect ? collect.className : undefined),
+                className:
+                  className || (collect && !topMostCollector ? collect.className : undefined),
               }}
             >
               {children}
@@ -177,7 +180,7 @@ export default class Collector extends React.Component<CollectorProps> {
       <CollectorContext.Consumer>
         {collect => {
           if (typeof children === 'function') {
-            if (collect) {
+            if (!topMostCollector && collect) {
               const collectedData = data ? [data] : [];
               collect.renderChildren(children);
               collect.data(collectedData);
@@ -189,9 +192,10 @@ export default class Collector extends React.Component<CollectorProps> {
 
             return React.Children.only(
               children({
-                className: className || (collect ? collect.className : undefined),
+                className:
+                  className || (collect && !topMostCollector ? collect.className : undefined),
                 ref: (ref: HTMLElement) => {
-                  if (collect) {
+                  if (!topMostCollector && collect) {
                     collect.ref(ref);
                   }
 
@@ -199,7 +203,7 @@ export default class Collector extends React.Component<CollectorProps> {
                     receiveRef(ref);
                   }
                 },
-                style: collect ? { ...style, ...collect.style } : style || {},
+                style: collect && !topMostCollector ? { ...style, ...collect.style } : style || {},
               })
             );
           }
diff --git a/packages/yubaba/src/animations/ReshapingContainer/index.tsx b/packages/yubaba/src/animations/ReshapingContainer/index.tsx
new file mode 100644
index 0000000..6034c64
--- /dev/null
+++ b/packages/yubaba/src/animations/ReshapingContainer/index.tsx
@@ -0,0 +1,211 @@
+import * as React from 'react';
+import Baba from '../../Baba';
+import Move from '../Move';
+import { CollectorChildrenAsFunction } from '../../Collector';
+import SimpleReveal from '../SimpleReveal';
+import { Duration } from '../types';
+
+interface ReshapingContainerProps {
+  /**
+   * This should be a unique identifier across your whole app.
+   */
+  id: string;
+
+  children: CollectorChildrenAsFunction;
+
+  /**
+   * Defaults to "div".
+   * Any valid HTML tag allowed.
+   */
+  as: keyof JSX.IntrinsicElements;
+
+  /**
+   * Used the same as the CSS property.
+   */
+  background?: string;
+
+  /**
+   * Used the same as the CSS property.
+   */
+  boxShadow?: string;
+
+  /**
+   * Padding.
+   * Use only px values, otherwise same as the CSS property.
+   */
+  padding?: string;
+
+  /**
+   * Used the same as the CSS property.
+   */
+  maxWidth?: string;
+
+  /**
+   * Used the same as the CSS property.
+   */
+  maxHeight?: string;
+
+  /**
+   * Used the same as the CSS property.
+   */
+  minWidth?: string;
+
+  /**
+   * Used the same as the CSS property.
+   */
+  minHeight?: string;
+
+  /**
+   * Used the same as the CSS property.
+   */
+  margin?: string;
+
+  /**
+   * Takes either "dynamic" or a number in ms.
+   * How long the animation should take over {duration}ms.
+   * Defaults to "dynamic".
+   */
+  duration?: Duration;
+
+  /**
+   * Used the same as the CSS property.
+   */
+  display?: string;
+
+  /**
+   * Timing function to be used in the transition.
+   */
+  timingFunction?: string;
+}
+
+interface ReshapingContainerState {
+  renderCount: number;
+}
+
+export default class ReshapingContainer extends React.PureComponent<
+  ReshapingContainerProps,
+  ReshapingContainerState
+> {
+  static defaultProps = {
+    as: 'div',
+  };
+
+  state: ReshapingContainerState = {
+    renderCount: 0,
+  };
+
+  /**
+   * Incremeent render count every time a render occurs.
+   * We're abusing react "key" to trigger animations for now.
+   */
+  static getDerivedStateFromProps(_, state) {
+    return {
+      renderCount: state.renderCount + 1,
+    };
+  }
+
+  componentDidMount() {
+    if (this.props.padding.indexOf('em') >= 0 || this.props.padding.indexOf('%') >= 0) {
+      throw new Error(`Only px values are supported for props.padding in ${this.displayName}`);
+    }
+  }
+
+  /**
+   * We're using this to increase the clip-path box of the Reveal animation so the children contents
+   * line up with the parent container in this component.
+   */
+  getInversePaddingParts() {
+    const parts = this.props.padding.split(' ').map(p => -Number(p.replace('px', '')));
+
+    switch (parts.length) {
+      case 1:
+        parts.push(parts[0]);
+        parts.push(parts[0]);
+        parts.push(parts[0]);
+        break;
+
+      case 2:
+        parts.push(parts[0]);
+        parts.push(parts[1]);
+        break;
+
+      case 3:
+        parts.push(parts[1]);
+        break;
+
+      case 4:
+      default:
+        break;
+    }
+
+    return parts;
+  }
+
+  render() {
+    const {
+      children,
+      background,
+      maxWidth,
+      maxHeight,
+      minWidth,
+      minHeight,
+      boxShadow,
+      margin,
+      padding,
+      duration,
+      id,
+      display,
+      timingFunction,
+      ...rest
+    } = this.props;
+
+    return (
+      <Baba name={`${id}-container`} key={this.state.renderCount}>
+        <Move duration={duration} timingFunction={timingFunction}>
+          {baba => (
+            <rest.as
+              ref={baba.ref}
+              style={{
+                position: 'relative',
+                minWidth,
+                maxWidth,
+                minHeight,
+                maxHeight,
+                margin,
+                padding,
+                display,
+              }}
+            >
+              <div
+                aria-hidden="true"
+                className={baba.className}
+                style={{
+                  ...baba.style,
+                  background,
+                  boxShadow,
+                  position: 'absolute',
+                  top: 0,
+                  left: 0,
+                  right: 0,
+                  bottom: 0,
+                  pointerEvents: 'none',
+                  zIndex: -1,
+                }}
+              />
+
+              <Baba
+                name={`${id}-children`}
+                key={this.state.renderCount}
+                timingFunction={timingFunction}
+              >
+                <SimpleReveal duration={duration} offset={this.getInversePaddingParts()}>
+                  {props => children(props)}
+                </SimpleReveal>
+              </Baba>
+            </rest.as>
+          )}
+        </Move>
+      </Baba>
+    );
+  }
+}
diff --git a/packages/yubaba/src/animations/ReshapingContainer/stories.tsx b/packages/yubaba/src/animations/ReshapingContainer/stories.tsx
new file mode 100644
index 0000000..844478d
--- /dev/null
+++ b/packages/yubaba/src/animations/ReshapingContainer/stories.tsx
@@ -0,0 +1,100 @@
+/* eslint-disable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */
+import * as React from 'react';
+import { storiesOf } from '@storybook/react';
+import styled from 'styled-components';
+import { Toggler } from 'yubaba-common';
+import ContainerMove from './index';
+
+const FixedContainer = styled.div`
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 20%;
+  padding: 16px;
+`;
+
+const Container = styled.div`
+  /* Watch out for collapsing margins. This will fuck your shit up for animations. */
+  display: flex;
+`;
+
+storiesOf('yubaba/ReshapingContainer', module)
+  .add('HeightOnly', () => (
+    <FixedContainer>
+      <Toggler>
+        {toggler => (
+          <ContainerMove
+            id="dialog-move"
+            boxShadow="0 1px 50px rgba(32, 33, 36, 0.1)"
+            padding="16px"
+            maxWidth="500px"
+            margin="0 auto"
+          >
+            {props => (
+              <Container style={props.style} className={props.className} innerRef={props.ref}>
+                <div>
+                  {toggler.shown ? (
+                    <>
+                      <h1>Details</h1>
+                      <p>Many details are revealed here.</p>
+                      <button type="button" onClick={() => toggler.toggle()}>
+                        Hide contents
+                      </button>
+                    </>
+                  ) : (
+                    <button type="button" onClick={() => toggler.toggle()}>
+                      View contents
+                    </button>
+                  )}
+                </div>
+              </Container>
+            )}
+          </ContainerMove>
+        )}
+      </Toggler>
+    </FixedContainer>
+  ))
+  .add('HeightAndWidth', () => (
+    <FixedContainer>
+      <Toggler>
+        {toggler => (
+          <ContainerMove
+            id="dialog-width"
+            boxShadow="0 1px 50px rgba(32, 33, 36, 0.1)"
+            padding="16px"
+            maxWidth="500px"
+            margin="0 auto"
+            display="inline-block"
+          >
+            {props => (
+              <Container style={props.style} className={props.className} innerRef={props.ref}>
+                <div>
+                  {toggler.shown ? (
+                    <>
+                      <h1>Details</h1>
+                      <p>
+                        Many details are revealed here long long long long long long long long long
+                        long long long Many details are revealed here long long long long long long
+                        long long long long long long
+                      </p>
+                      <button type="button" onClick={() => toggler.toggle()}>
+                        Hide contents
+                      </button>
+                    </>
+                  ) : (
+                    <>
+                      <h1>Details</h1>
+                      <p>View more.</p>
+                      <button type="button" onClick={() => toggler.toggle()}>
+                        Hide contents
+                      </button>
+                    </>
+                  )}
+                </div>
+              </Container>
+            )}
+          </ContainerMove>
+        )}
+      </Toggler>
+    </FixedContainer>
+  ));
diff --git a/packages/yubaba/src/animations/SimpleReveal/index.tsx b/packages/yubaba/src/animations/SimpleReveal/index.tsx
new file mode 100644
index 0000000..7a4f478
--- /dev/null
+++ b/packages/yubaba/src/animations/SimpleReveal/index.tsx
@@ -0,0 +1,105 @@
+import * as React from 'react';
+import Collector, {
+  CollectorChildrenProps,
+  AnimationCallback,
+  CollectorActions,
+} from '../../Collector';
+import { standard } from '../../lib/curves';
+import { combine } from '../../lib/style';
+import { dynamic } from '../../lib/duration';
+import { Duration } from '../types';
+
+export interface RevealProps extends CollectorChildrenProps {
+  /**
+   * Takes either "dynamic" or a number in ms.
+   * How long the animation should take over {duration}ms.
+   * Defaults to "dynamic".
+   */
+  duration: Duration;
+
+  /**
+   * Timing function to be used in the transition.
+   */
+  timingFunction: string;
+
+  /**
+   * This will increase (or decrease) the size of the clip-path box.
+   * Use with caution.
+   * [top, right, bottom, left]
+   */
+  offset: [number, number, number, number];
+}
+
+export default class Reveal extends React.Component<RevealProps> {
+  static defaultProps = {
+    duration: 'dynamic',
+    timingFunction: standard(),
+    offset: [0, 0, 0, 0],
+  };
+
+  beforeAnimate: AnimationCallback = (data, onFinish, setChildProps) => {
+    const [topOffset, rightOffset, bottomOffset, leftOffset] = this.props.offset;
+
+    const right =
+      data.destination.elementBoundingBox.size.width -
+      data.origin.elementBoundingBox.size.width +
+      rightOffset;
+    const bottom =
+      data.destination.elementBoundingBox.size.height -
+      data.origin.elementBoundingBox.size.height +
+      bottomOffset;
+
+    setChildProps({
+      style: prevStyles =>
+        data.origin.elementBoundingBox
+          ? {
+              ...prevStyles,
+              clipPath: `inset(${topOffset}px ${right}px ${bottom}px ${leftOffset}px)`,
+              opacity: 1,
+              visibility: 'visible',
+              willChange: combine('clip-path')(prevStyles.willChange),
+            }
+          : undefined,
+    });
+
+    onFinish();
+  };
+
+  animate: AnimationCallback = (data, onFinish, setChildProps) => {
+    const { timingFunction, duration } = this.props;
+    const calculatedDuration =
+      duration === 'dynamic'
+        ? dynamic(data.origin.elementBoundingBox, data.destination.elementBoundingBox)
+        : duration;
+
+    setChildProps({
+      style: prevStyles => ({
+        ...prevStyles,
+        clipPath: 'inset(0px)',
+        transition: combine(`clip-path ${calculatedDuration}ms ${timingFunction}`)(
+          prevStyles.transition
+        ),
+      }),
+    });
+
+    setTimeout(() => onFinish(), calculatedDuration);
+  };
+
+  render() {
+    const { children } = this.props;
+
+    return (
+      <Collector
+        data={{
+          action: CollectorActions.animation,
+          payload: {
+            beforeAnimate: this.beforeAnimate,
+            animate: this.animate,
+          },
+        }}
+      >
+        {children}
+      </Collector>
+    );
+  }
+}
diff --git a/packages/yubaba/src/animations/SimpleReveal/stories.tsx b/packages/yubaba/src/animations/SimpleReveal/stories.tsx
new file mode 100644
index 0000000..c1eba28
--- /dev/null
+++ b/packages/yubaba/src/animations/SimpleReveal/stories.tsx
@@ -0,0 +1,46 @@
+/* eslint-disable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */
+import * as React from 'react';
+import { storiesOf } from '@storybook/react';
+import styled from 'styled-components';
+import { Toggler } from 'yubaba-common';
+import { WrappedBaba as Baba } from '../../Baba';
+import SimpleReveal from './index';
+
+const Container = styled.div`
+  margin: 0.67rem 0;
+  background-color: #ccc;
+`;
+
+const Header = styled.h1`
+  margin: 0.67rem 0;
+`;
+
+storiesOf('yubaba/SimpleReveal', module).add('ChildrenHeightChanging', () => (
+  <Container>
+    <Toggler>
+      {toggler => (
+        <Baba name="simple-reveal" key={`${toggler.shown}`}>
+          <SimpleReveal>
+            {baba => (
+              <div {...baba}>
+                {toggler.shown ? (
+                  <>
+                    <Header>Details</Header>
+                    <p>Many details are revealed here.</p>
+                    <button type="button" onClick={() => toggler.toggle()}>
+                      Hide contents
+                    </button>
+                  </>
+                ) : (
+                  <button type="button" onClick={() => toggler.toggle()}>
+                    View contents
+                  </button>
+                )}
+              </div>
+            )}
+          </SimpleReveal>
+        </Baba>
+      )}
+    </Toggler>
+  </Container>
+));
diff --git a/packages/yubaba/src/index.tsx b/packages/yubaba/src/index.tsx
index 4bcc787..fd39145 100644
--- a/packages/yubaba/src/index.tsx
+++ b/packages/yubaba/src/index.tsx
@@ -14,6 +14,8 @@ export { default as CircleShrink } from './animations/CircleShrink';
 export { default as Reveal } from './animations/Reveal';
 export { default as RevealMove } from './animations/RevealMove';
 export { default as ConcealMove } from './animations/ConcealMove';
+export { default as ReshapingContainer } from './animations/ReshapingContainer';
+export { default as SimpleReveal } from './animations/SimpleReveal';
 
 // Utility stuff
 export * from './Collector';

From bc154a3a5c32c2f6097df6f4d262549445498be0 Mon Sep 17 00:00:00 2001
From: madou <laheen@gmail.com>
Date: Sat, 4 May 2019 20:02:36 +1000
Subject: [PATCH 2/5] chore: updates docs

---
 packages/yubaba/package.json                  |  2 +-
 .../yubaba/src/Collector/__docs__/docs.mdx    |  1 +
 .../yubaba/src/FocalTarget/__docs__/docs.mdx  |  1 +
 packages/yubaba/src/Wait/__docs__/docs.mdx    |  1 +
 .../animations/CircleExpand/__docs__/docs.mdx |  1 +
 .../animations/CircleShrink/__docs__/docs.mdx |  1 +
 .../animations/ConcealMove/__docs__/docs.mdx  |  1 +
 .../CrossFadeMove/__docs__/docs.mdx           |  1 +
 .../src/animations/FadeMove/__docz__/docs.mdx | 56 +++++++++++++++++++
 .../animations/FadeMove/__docz__/styled.tsx   | 14 +++++
 .../src/animations/Move/__docs__/docs.mdx     |  3 +-
 .../src/animations/Noop/__docs__/docs.mdx     |  1 +
 .../ReshapingContainer/__docz__/docs.mdx      | 27 +++++++++
 .../ReshapingContainer/__docz__/styled.tsx    |  0
 .../animations/ReshapingContainer/index.tsx   | 37 +++++++-----
 .../animations/ReshapingContainer/stories.tsx |  1 +
 .../animations/RevealMove/__docs__/docs.mdx   |  1 +
 .../animations/SimpleReveal/__docz__/docs.mdx | 25 +++++++++
 .../src/animations/Swipe/__docs__/docs.mdx    |  1 +
 19 files changed, 160 insertions(+), 15 deletions(-)
 create mode 100644 packages/yubaba/src/animations/FadeMove/__docz__/docs.mdx
 create mode 100644 packages/yubaba/src/animations/FadeMove/__docz__/styled.tsx
 create mode 100644 packages/yubaba/src/animations/ReshapingContainer/__docz__/docs.mdx
 create mode 100644 packages/yubaba/src/animations/ReshapingContainer/__docz__/styled.tsx
 create mode 100644 packages/yubaba/src/animations/SimpleReveal/__docz__/docs.mdx

diff --git a/packages/yubaba/package.json b/packages/yubaba/package.json
index de9a07f..72d5424 100644
--- a/packages/yubaba/package.json
+++ b/packages/yubaba/package.json
@@ -24,7 +24,7 @@
   },
   "size-limit": [
     {
-      "limit": "6 KB",
+      "limit": "7 KB",
       "path": "dist/esm/packages/yubaba/src/index.js"
     }
   ],
diff --git a/packages/yubaba/src/Collector/__docs__/docs.mdx b/packages/yubaba/src/Collector/__docs__/docs.mdx
index 23186e4..d9f9db4 100644
--- a/packages/yubaba/src/Collector/__docs__/docs.mdx
+++ b/packages/yubaba/src/Collector/__docs__/docs.mdx
@@ -1,6 +1,7 @@
 ---
 name: Collector
 route: /collector
+menu: Utility Helpers
 ---
 
 import { Playground, PropsTable } from 'docz';
diff --git a/packages/yubaba/src/FocalTarget/__docs__/docs.mdx b/packages/yubaba/src/FocalTarget/__docs__/docs.mdx
index a034667..e311afd 100644
--- a/packages/yubaba/src/FocalTarget/__docs__/docs.mdx
+++ b/packages/yubaba/src/FocalTarget/__docs__/docs.mdx
@@ -1,6 +1,7 @@
 ---
 name: FocalTarget
 route: /focal-target
+menu: Focal Animations
 ---
 
 import { Playground, PropsTable } from 'docz';
diff --git a/packages/yubaba/src/Wait/__docs__/docs.mdx b/packages/yubaba/src/Wait/__docs__/docs.mdx
index 4fe9123..38a7553 100644
--- a/packages/yubaba/src/Wait/__docs__/docs.mdx
+++ b/packages/yubaba/src/Wait/__docs__/docs.mdx
@@ -1,6 +1,7 @@
 ---
 name: Wait
 route: /wait
+menu: Utility Helpers
 ---
 
 import { Playground, PropsTable } from 'docz';
diff --git a/packages/yubaba/src/animations/CircleExpand/__docs__/docs.mdx b/packages/yubaba/src/animations/CircleExpand/__docs__/docs.mdx
index 797e14d..b5379d5 100644
--- a/packages/yubaba/src/animations/CircleExpand/__docs__/docs.mdx
+++ b/packages/yubaba/src/animations/CircleExpand/__docs__/docs.mdx
@@ -1,6 +1,7 @@
 ---
 name: CircleExpand
 route: /circle-expand
+menu: Supporting Animations
 ---
 
 import { Playground, PropsTable } from 'docz';
diff --git a/packages/yubaba/src/animations/CircleShrink/__docs__/docs.mdx b/packages/yubaba/src/animations/CircleShrink/__docs__/docs.mdx
index 19cbac5..42c90e2 100644
--- a/packages/yubaba/src/animations/CircleShrink/__docs__/docs.mdx
+++ b/packages/yubaba/src/animations/CircleShrink/__docs__/docs.mdx
@@ -1,6 +1,7 @@
 ---
 name: CircleShrink
 route: /circle-shrink
+menu: Supporting Animations
 ---
 
 import { Playground, PropsTable } from 'docz';
diff --git a/packages/yubaba/src/animations/ConcealMove/__docs__/docs.mdx b/packages/yubaba/src/animations/ConcealMove/__docs__/docs.mdx
index b9e8aa6..656b9ed 100644
--- a/packages/yubaba/src/animations/ConcealMove/__docs__/docs.mdx
+++ b/packages/yubaba/src/animations/ConcealMove/__docs__/docs.mdx
@@ -1,6 +1,7 @@
 ---
 name: ConcealMove
 route: /conceal-move
+menu: Focal Animations
 ---
 
 import { Playground, PropsTable } from 'docz';
diff --git a/packages/yubaba/src/animations/CrossFadeMove/__docs__/docs.mdx b/packages/yubaba/src/animations/CrossFadeMove/__docs__/docs.mdx
index e908bc2..56a4605 100644
--- a/packages/yubaba/src/animations/CrossFadeMove/__docs__/docs.mdx
+++ b/packages/yubaba/src/animations/CrossFadeMove/__docs__/docs.mdx
@@ -1,6 +1,7 @@
 ---
 name: CrossFadeMove
 route: /cross-fade-move
+menu: Focal Animations
 ---
 
 import { Playground, PropsTable } from 'docz';
diff --git a/packages/yubaba/src/animations/FadeMove/__docz__/docs.mdx b/packages/yubaba/src/animations/FadeMove/__docz__/docs.mdx
new file mode 100644
index 0000000..6a91a11
--- /dev/null
+++ b/packages/yubaba/src/animations/FadeMove/__docz__/docs.mdx
@@ -0,0 +1,56 @@
+---
+name: FadeMove
+route: /fade-move
+menu: Focal Animations
+---
+
+import { Playground, PropsTable } from 'docz';
+import * as Common from 'yubaba-common';
+import Baba from '../../../Baba';
+import FadeMove from '../index';
+import * as Styled from './styled';
+
+# FadeMove
+
+Will clone the origin element and position it absolutely then animate it ontop of the destination element,
+while fading out.
+
+Generally you'd want to use [Move](/move) or [CrossFadeMove](/cross-fade-move) over this.
+
+## Usage
+
+```js
+import { FadeMove } from 'yubaba';
+```
+
+<Playground>
+  <Common.Toggler>
+    {({ shown, toggle }) =>
+      shown ? (
+        <Baba name="fade-move" key="1">
+          <FadeMove>
+            {({ ref, style }) => (
+              <Styled.Box onClick={() => toggle()} style={style} innerRef={ref}>
+                Hello, world!
+              </Styled.Box>
+            )}
+          </FadeMove>
+        </Baba>
+      ) : (
+        <Baba name="fade-move" key="2">
+          <FadeMove>
+            {({ ref, style }) => (
+              <Styled.Box style={style} innerRef={ref} onClick={() => toggle()} alignRight>
+                Hello, world!
+              </Styled.Box>
+            )}
+          </FadeMove>
+        </Baba>
+      )
+    }
+  </Common.Toggler>
+</Playground>
+
+## Props
+
+<PropsTable of={FadeMove} />
diff --git a/packages/yubaba/src/animations/FadeMove/__docz__/styled.tsx b/packages/yubaba/src/animations/FadeMove/__docz__/styled.tsx
new file mode 100644
index 0000000..e8416f4
--- /dev/null
+++ b/packages/yubaba/src/animations/FadeMove/__docz__/styled.tsx
@@ -0,0 +1,14 @@
+import styled from 'styled-components';
+
+export const Box = styled.div<{ alignRight: boolean }>`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  font-size: 24px;
+  width: 250px;
+  height: 250px;
+  background-color: #dc143c;
+  cursor: pointer;
+  margin-left: ${props => (props.alignRight ? '0' : 'auto')};
+`;
diff --git a/packages/yubaba/src/animations/Move/__docs__/docs.mdx b/packages/yubaba/src/animations/Move/__docs__/docs.mdx
index c7cbb6e..f271d11 100644
--- a/packages/yubaba/src/animations/Move/__docs__/docs.mdx
+++ b/packages/yubaba/src/animations/Move/__docs__/docs.mdx
@@ -1,6 +1,7 @@
 ---
 name: Move
 route: /move
+menu: Focal Animations
 ---
 
 import { Playground, PropsTable } from 'docz';
@@ -13,7 +14,7 @@ import * as Styled from './styled';
 
 Useful for animating an element moving from one position to another,
 works best when the element has **very little visual difference**.
-This animation uses the FLIP technique so it is very performant.
+This animation uses the [FLIP technique](https://css-tricks.com/animating-layouts-with-the-flip-technique/) so it is very performant.
 
 ## Usage
 
diff --git a/packages/yubaba/src/animations/Noop/__docs__/docs.mdx b/packages/yubaba/src/animations/Noop/__docs__/docs.mdx
index ba34c2e..81d2ca5 100644
--- a/packages/yubaba/src/animations/Noop/__docs__/docs.mdx
+++ b/packages/yubaba/src/animations/Noop/__docs__/docs.mdx
@@ -1,6 +1,7 @@
 ---
 name: Noop
 route: /noop
+menu: Utility Helpers
 ---
 
 import { Playground, PropsTable } from 'docz';
diff --git a/packages/yubaba/src/animations/ReshapingContainer/__docz__/docs.mdx b/packages/yubaba/src/animations/ReshapingContainer/__docz__/docs.mdx
new file mode 100644
index 0000000..e75eda8
--- /dev/null
+++ b/packages/yubaba/src/animations/ReshapingContainer/__docz__/docs.mdx
@@ -0,0 +1,27 @@
+---
+name: ReshapingContainer
+route: /reshaping-container
+menu: Composite Components
+---
+
+import { Playground, PropsTable } from 'docz';
+import * as Common from 'yubaba-common';
+import ReshapingContainer from '../index';
+import * as Styled from './styled';
+
+# ReshapingContainer
+
+A composite component that is made up of [SimpleReveal](/simple-reveal) and [Move](/move).
+It has been made to be able to efficiently have the parent container resize around its children after state changes.
+
+## Usage
+
+```js
+import { ReshapingContainer } from 'yubaba';
+```
+
+<Playground>hey</Playground>
+
+## Props
+
+<PropsTable of={ReshapingContainer} />
diff --git a/packages/yubaba/src/animations/ReshapingContainer/__docz__/styled.tsx b/packages/yubaba/src/animations/ReshapingContainer/__docz__/styled.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/packages/yubaba/src/animations/ReshapingContainer/index.tsx b/packages/yubaba/src/animations/ReshapingContainer/index.tsx
index 6034c64..99aec08 100644
--- a/packages/yubaba/src/animations/ReshapingContainer/index.tsx
+++ b/packages/yubaba/src/animations/ReshapingContainer/index.tsx
@@ -11,13 +11,17 @@ interface ReshapingContainerProps {
    */
   id: string;
 
+  /**
+   * Children as function.
+   * Will receive an object with className, style, and ref.
+   */
   children: CollectorChildrenAsFunction;
 
   /**
    * Defaults to "div".
    * Any valid HTML tag allowed.
    */
-  as: keyof JSX.IntrinsicElements;
+  as: string;
 
   /**
    * Used the same as the CSS property.
@@ -33,7 +37,7 @@ interface ReshapingContainerProps {
    * Padding.
    * Use only px values, otherwise same as the CSS property.
    */
-  padding?: string;
+  padding: string;
 
   /**
    * Used the same as the CSS property.
@@ -88,6 +92,7 @@ export default class ReshapingContainer extends React.PureComponent<
 > {
   static defaultProps = {
     as: 'div',
+    padding: '',
   };
 
   state: ReshapingContainerState = {
@@ -98,7 +103,7 @@ export default class ReshapingContainer extends React.PureComponent<
    * Incremeent render count every time a render occurs.
    * We're abusing react "key" to trigger animations for now.
    */
-  static getDerivedStateFromProps(_, state) {
+  static getDerivedStateFromProps(_: ReshapingContainerProps, state: ReshapingContainerState) {
     return {
       renderCount: state.renderCount + 1,
     };
@@ -106,7 +111,9 @@ export default class ReshapingContainer extends React.PureComponent<
 
   componentDidMount() {
     if (this.props.padding.indexOf('em') >= 0 || this.props.padding.indexOf('%') >= 0) {
-      throw new Error(`Only px values are supported for props.padding in ${this.displayName}`);
+      throw new Error(
+        `Only px values are supported for props.padding in ${ReshapingContainer.name}`
+      );
     }
   }
 
@@ -118,6 +125,9 @@ export default class ReshapingContainer extends React.PureComponent<
     const parts = this.props.padding.split(' ').map(p => -Number(p.replace('px', '')));
 
     switch (parts.length) {
+      case 0:
+        return undefined;
+
       case 1:
         parts.push(parts[0]);
         parts.push(parts[0]);
@@ -138,7 +148,7 @@ export default class ReshapingContainer extends React.PureComponent<
         break;
     }
 
-    return parts;
+    return parts as [number, number, number, number];
   }
 
   render() {
@@ -158,12 +168,13 @@ export default class ReshapingContainer extends React.PureComponent<
       timingFunction,
       ...rest
     } = this.props;
+    const ComponentAs = rest.as as any;
 
     return (
       <Baba name={`${id}-container`} key={this.state.renderCount}>
         <Move duration={duration} timingFunction={timingFunction}>
           {baba => (
-            <rest.as
+            <ComponentAs
               ref={baba.ref}
               style={{
                 position: 'relative',
@@ -193,16 +204,16 @@ export default class ReshapingContainer extends React.PureComponent<
                 }}
               />
 
-              <Baba
-                name={`${id}-children`}
-                key={this.state.renderCount}
-                timingFunction={timingFunction}
-              >
-                <SimpleReveal duration={duration} offset={this.getInversePaddingParts()}>
+              <Baba name={`${id}-children`} key={this.state.renderCount}>
+                <SimpleReveal
+                  duration={duration}
+                  offset={this.getInversePaddingParts()}
+                  timingFunction={timingFunction}
+                >
                   {props => children(props)}
                 </SimpleReveal>
               </Baba>
-            </rest.as>
+            </ComponentAs>
           )}
         </Move>
       </Baba>
diff --git a/packages/yubaba/src/animations/ReshapingContainer/stories.tsx b/packages/yubaba/src/animations/ReshapingContainer/stories.tsx
index 844478d..1a089a2 100644
--- a/packages/yubaba/src/animations/ReshapingContainer/stories.tsx
+++ b/packages/yubaba/src/animations/ReshapingContainer/stories.tsx
@@ -29,6 +29,7 @@ storiesOf('yubaba/ReshapingContainer', module)
             padding="16px"
             maxWidth="500px"
             margin="0 auto"
+            background="rgba(32, 33, 36, 0.2)"
           >
             {props => (
               <Container style={props.style} className={props.className} innerRef={props.ref}>
diff --git a/packages/yubaba/src/animations/RevealMove/__docs__/docs.mdx b/packages/yubaba/src/animations/RevealMove/__docs__/docs.mdx
index 29faff9..7505d75 100644
--- a/packages/yubaba/src/animations/RevealMove/__docs__/docs.mdx
+++ b/packages/yubaba/src/animations/RevealMove/__docs__/docs.mdx
@@ -1,6 +1,7 @@
 ---
 name: RevealMove
 route: /reveal-move
+menu: Focal Animations
 ---
 
 import { Playground, PropsTable } from 'docz';
diff --git a/packages/yubaba/src/animations/SimpleReveal/__docz__/docs.mdx b/packages/yubaba/src/animations/SimpleReveal/__docz__/docs.mdx
new file mode 100644
index 0000000..6e9739b
--- /dev/null
+++ b/packages/yubaba/src/animations/SimpleReveal/__docz__/docs.mdx
@@ -0,0 +1,25 @@
+---
+name: SimpleReveal
+route: /simple-reveal
+menu: Focal Animations
+---
+
+import { Playground, PropsTable } from 'docz';
+import * as Common from 'yubaba-common';
+import SimpleReveal from '../index';
+
+# SimpleReveal
+
+A composite component that is made up of
+
+## Usage
+
+```js
+import { SimpleReveal } from 'yubaba';
+```
+
+<Playground>hey</Playground>
+
+## Props
+
+<PropsTable of={SimpleReveal} />
diff --git a/packages/yubaba/src/animations/Swipe/__docs__/docs.mdx b/packages/yubaba/src/animations/Swipe/__docs__/docs.mdx
index 230fe62..8b8e5f1 100644
--- a/packages/yubaba/src/animations/Swipe/__docs__/docs.mdx
+++ b/packages/yubaba/src/animations/Swipe/__docs__/docs.mdx
@@ -1,6 +1,7 @@
 ---
 name: Swipe
 route: /swipe
+menu: Supporting Animations
 ---
 
 import { Playground, PropsTable } from 'docz';

From b8d711b352a808df5c15b6cd0f8b9baf10b6b816 Mon Sep 17 00:00:00 2001
From: madou <laheen@gmail.com>
Date: Sun, 5 May 2019 15:37:33 +1000
Subject: [PATCH 3/5] feat: adds reveal reshaping container composite component

---
 README.md                                     |  44 ++++---
 doczrc.js                                     |   2 +-
 packages/yubaba/package.json                  |   2 +-
 .../yubaba/src/Collector/__docs__/docs.mdx    |   2 +-
 .../yubaba/src/FocalTarget/__docs__/docs.mdx  |   2 +-
 packages/yubaba/src/Wait/__docs__/docs.mdx    |   2 +-
 .../src/__docs__/1-introduction/docs.mdx      |  33 +++---
 .../src/__docs__/2-getting-started/docs.mdx   |   2 +-
 .../src/__docs__/3-advanced-usage/docs.mdx    | 103 ++++++++++++++--
 .../src/__docs__/4-custom-animations/docs.mdx |   2 +-
 .../src/__docs__/5-troubleshooting/docs.mdx   |   2 +-
 .../__docs__/composite-components/docs.mdx    |  13 ++
 .../src/__docs__/focal-animations/docs.mdx    |  13 ++
 .../__docs__/supporting-animations/docs.mdx   |  10 ++
 .../animations/CircleExpand/__docs__/docs.mdx |   2 +-
 .../animations/CircleShrink/__docs__/docs.mdx |   2 +-
 .../animations/ConcealMove/__docs__/docs.mdx  |   2 +-
 .../CrossFadeMove/__docs__/docs.mdx           |   2 +-
 .../src/animations/FadeMove/__docz__/docs.mdx |   2 +-
 .../src/animations/Move/__docs__/docs.mdx     |   2 +-
 .../src/animations/Noop/__docs__/docs.mdx     |   2 +-
 .../ReshapingContainer/__docz__/docs.mdx      | 107 ++++++++++++++++-
 .../ReshapingContainer/__docz__/styled.tsx    |  77 ++++++++++++
 .../animations/ReshapingContainer/index.tsx   |  87 +++++---------
 .../animations/ReshapingContainer/stories.tsx |  12 +-
 .../animations/RevealMove/__docs__/docs.mdx   |   2 +-
 .../__docz__/docs.mdx                         |  75 ++++++++++++
 .../__docz__/styled.tsx                       |  48 ++++++++
 .../RevealReshapingContainer/index.tsx        | 111 ++++++++++++++++++
 .../RevealReshapingContainer/stories.tsx      | 101 ++++++++++++++++
 .../animations/SimpleReveal/__docz__/docs.mdx |   2 +-
 .../src/animations/Swipe/__docs__/docs.mdx    |   2 +-
 packages/yubaba/src/index.tsx                 |   1 +
 33 files changed, 750 insertions(+), 121 deletions(-)
 create mode 100644 packages/yubaba/src/__docs__/composite-components/docs.mdx
 create mode 100644 packages/yubaba/src/__docs__/focal-animations/docs.mdx
 create mode 100644 packages/yubaba/src/__docs__/supporting-animations/docs.mdx
 create mode 100644 packages/yubaba/src/animations/RevealReshapingContainer/__docz__/docs.mdx
 create mode 100644 packages/yubaba/src/animations/RevealReshapingContainer/__docz__/styled.tsx
 create mode 100644 packages/yubaba/src/animations/RevealReshapingContainer/index.tsx
 create mode 100644 packages/yubaba/src/animations/RevealReshapingContainer/stories.tsx

diff --git a/README.md b/README.md
index 5b7d16d..05962bc 100644
--- a/README.md
+++ b/README.md
@@ -1,24 +1,40 @@
 # yubaba
 
-is an element animation orchestrator for React.js ✨
+easy to use animations with powerful orchestration for React.js 🧙✨
 
-[![npm](https://img.shields.io/npm/v/yubaba.svg)](https://www.npmjs.com/package/yubaba)
-[![npm bundle size (minified + gzip)](https://img.shields.io/bundlephobia/minzip/yubaba.svg)](https://bundlephobia.com/result?p=yubaba)
+[![npm](https://img.shields.io/npm/v/yubaba.svg)](https://www.npmjs.com/package/yubaba) [![npm bundle size (minified + gzip)](https://img.shields.io/bundlephobia/minzip/yubaba.svg)](https://bundlephobia.com/result?p=yubaba)
 
 [![Example animation using yubaba](https://user-images.githubusercontent.com/6801309/55383683-87894b80-5574-11e9-80ef-7394eb6eca63.gif)](https://yubabajs.com/advanced-usage)
 
-## Why yubaba
+## What is yubaba???
 
-`yubaba` is as much of a _platform_ as it is an **orchestrator**.
-It comes with prebuilt animations you can drop in and start using immediately,
-such as [ConcealMove](https://yubabajs.com/conceal-move) and [RevealMove](https://yubabajs.com/reveal-move) which together can [create an awesome user experience](https://yubabajs.com/advanced-usage) seen above!
+It's all about **animation** 🧙✨ - it can help with:
 
-But even better you can create [_custom_ animations](https://yubabajs.com/custom-animations)!
-Using the same internals the [prebuilt animations use](https://yubabajs.com/getting-started),
-it comes with a first class customization experience for you to do,
-well,
-anything!
+- [Moving an element](https://yubabajs.com/move) from one position to another
+- [Revealing elements](https://yubabajs.com/reveal-move) like you see above
+- [Supporting animations](https://yubabajs.com/circle-expand) by obstructing elements in view; and
+- [Hiding children elements](https://yubabajs.com/baba-manager) until animations have completed to trick users 🤫
+- [Orchestrating](https://yubabajs.com/advanced-usage#wait-for-the-previous-animation-to-finish-before-starting-the-next) when animations should happen and [in what order](https://yubabajs.com/advanced-usage#controlling-in-what-order-animations-should-execute)
+- Composing animations together to create [composite animations](https://yubabajs.com/cross-fade-move)
+- [Anything you can imagine](https://yubabajs.com/custom-animations), seriously 🤩
 
-## [Docs](https://yubabajs.com)
+## Installation
 
-See the documentation at [yubabajs.com](https://yubabajs.com).
+`yubaba` has a peer dependency on [emotion](https://emotion.sh/docs/introduction) for some of the more advanced animations.
+
+```bash
+npm install yubaba react@^16.4.x react-dom@^16.4.x emotion@^9.x.x --save
+```
+
+or
+
+```bash
+yarn add yubaba react@^16.4.x react-dom@^16.4.x emotion@^9.x.x
+```
+
+## Next steps
+
+- **First time** here? After installing head over to [Getting started](https://yubabajs.com/getting-started) to start learning the basics
+- Interested in **animating an element**? Check out [Focal animations](https://yubabajs.com/focal-animations)
+- For **ready made experiences** check out [Composite components](https://yubabajs.com/composite-components), just grab them and go!
+- Having **trouble**? Maybe [Troubleshooting](https://yubabajs.com/troubleshooting) has your answers
diff --git a/doczrc.js b/doczrc.js
index 17556d4..6b33902 100644
--- a/doczrc.js
+++ b/doczrc.js
@@ -1,7 +1,7 @@
 const pkg = require('./packages/yubaba/package.json');
 
 module.exports = {
-  title: 'yubaba docs',
+  title: 'yubaba 🧙✨',
   description: `yubaba ${pkg.description}`,
   typescript: true,
   dest: '/docs',
diff --git a/packages/yubaba/package.json b/packages/yubaba/package.json
index 72d5424..e7a7008 100644
--- a/packages/yubaba/package.json
+++ b/packages/yubaba/package.json
@@ -7,7 +7,7 @@
   "main": "dist/cjs/packages/yubaba/src/index.js",
   "module": "dist/esm/packages/yubaba/src/index.js",
   "sideEffects": false,
-  "description": "is an element animation orchestrator for React.js ✨",
+  "description": "easy to use animations with powerful orchestration for React.js 🧙",
   "keywords": [
     "react",
     "flip",
diff --git a/packages/yubaba/src/Collector/__docs__/docs.mdx b/packages/yubaba/src/Collector/__docs__/docs.mdx
index d9f9db4..d3da3a7 100644
--- a/packages/yubaba/src/Collector/__docs__/docs.mdx
+++ b/packages/yubaba/src/Collector/__docs__/docs.mdx
@@ -1,7 +1,7 @@
 ---
 name: Collector
 route: /collector
-menu: Utility Helpers
+menu: Utility helpers
 ---
 
 import { Playground, PropsTable } from 'docz';
diff --git a/packages/yubaba/src/FocalTarget/__docs__/docs.mdx b/packages/yubaba/src/FocalTarget/__docs__/docs.mdx
index e311afd..e9a4380 100644
--- a/packages/yubaba/src/FocalTarget/__docs__/docs.mdx
+++ b/packages/yubaba/src/FocalTarget/__docs__/docs.mdx
@@ -1,7 +1,7 @@
 ---
 name: FocalTarget
 route: /focal-target
-menu: Focal Animations
+menu: Focal animations
 ---
 
 import { Playground, PropsTable } from 'docz';
diff --git a/packages/yubaba/src/Wait/__docs__/docs.mdx b/packages/yubaba/src/Wait/__docs__/docs.mdx
index 38a7553..ec8d481 100644
--- a/packages/yubaba/src/Wait/__docs__/docs.mdx
+++ b/packages/yubaba/src/Wait/__docs__/docs.mdx
@@ -1,7 +1,7 @@
 ---
 name: Wait
 route: /wait
-menu: Utility Helpers
+menu: Utility helpers
 ---
 
 import { Playground, PropsTable } from 'docz';
diff --git a/packages/yubaba/src/__docs__/1-introduction/docs.mdx b/packages/yubaba/src/__docs__/1-introduction/docs.mdx
index ab3a0e6..9e23be4 100644
--- a/packages/yubaba/src/__docs__/1-introduction/docs.mdx
+++ b/packages/yubaba/src/__docs__/1-introduction/docs.mdx
@@ -1,5 +1,5 @@
 ---
-name: 1. Introduction
+name: 1. Introduction 📖
 route: /
 order: 5
 ---
@@ -8,36 +8,41 @@ import EmailChain from '../3-advanced-usage/EmailChain';
 
 # yubaba
 
-is an element animation orchestrator for React.js ✨
+easy to use animations with powerful orchestration for React.js 🧙✨
 
 [![npm](https://img.shields.io/npm/v/yubaba.svg)](https://www.npmjs.com/package/yubaba) [![npm bundle size (minified + gzip)](https://img.shields.io/bundlephobia/minzip/yubaba.svg)](https://bundlephobia.com/result?p=yubaba)
 
 <EmailChain />
 
-## Why yubaba?
+## What is yubaba???
 
-`yubaba` is as much of a _platform_ as much as it is an **orchestrator**.
-It can control when, where, and how to start animations and comes with prebuilt animations you can drop in and start using immediately,
-such as [ConcealMove](/conceal-move) and [RevealMove](/reveal-move)!
+It's all about **animation** 🧙✨ - it can help with:
 
-Even better you can create _custom_ animations!
-Using the same [internals](/collector) the [prebuilt animations use](https://github.com/madou/yubaba/tree/master/packages/yubaba/src/animations),
-it comes with a first class customization experience for you to do,
-well,
-anything!
+- [Moving an element](/move) from one position to another
+- [Revealing elements](/reveal-move) like you see above
+- [Supporting animations](/circle-expand) by obstructing elements in view; and
+- [Hiding children elements](/baba-manager) until animations have completed to trick users 🤫
+- [Orchestrating](/advanced-usage#wait-for-the-previous-animation-to-finish-before-starting-the-next) when animations should happen and [in what order](/advanced-usage#controlling-in-what-order-animations-should-execute)
+- Composing animations together to create [composite animations](/cross-fade-move)
+- [Anything you can imagine](/custom-animations), seriously 🤩
 
 ## Installation
 
 `yubaba` has a peer dependency on [emotion](https://emotion.sh/docs/introduction) for some of the more advanced animations.
 
 ```bash
-npm install yubaba emotion@9.x.x --save
+npm install yubaba react@^16.4.x react-dom@^16.4.x emotion@^9.x.x --save
 ```
 
 or
 
 ```bash
-yarn add yubaba emotion@9.x.x
+yarn add yubaba react@^16.4.x react-dom@^16.4.x emotion@^9.x.x
 ```
 
-> **Tip -** After installing head over to [Getting started](/getting-started) to start learning the basics!
+## Next steps
+
+- **First time** here? After installing head over to [Getting started](/getting-started) to start learning the basics
+- Interested in **animating an element**? Check out [Focal animations](/focal-animations)
+- For **ready made experiences** check out [Composite components](/composite-components), just grab them and go!
+- Having **trouble**? Maybe [Troubleshooting](/troubleshooting) has your answers
diff --git a/packages/yubaba/src/__docs__/2-getting-started/docs.mdx b/packages/yubaba/src/__docs__/2-getting-started/docs.mdx
index 113215a..ea65054 100644
--- a/packages/yubaba/src/__docs__/2-getting-started/docs.mdx
+++ b/packages/yubaba/src/__docs__/2-getting-started/docs.mdx
@@ -1,5 +1,5 @@
 ---
-name: 2. Getting started
+name: 2. Getting started 🏃
 route: /getting-started
 order: 4
 ---
diff --git a/packages/yubaba/src/__docs__/3-advanced-usage/docs.mdx b/packages/yubaba/src/__docs__/3-advanced-usage/docs.mdx
index b709c02..451381f 100644
--- a/packages/yubaba/src/__docs__/3-advanced-usage/docs.mdx
+++ b/packages/yubaba/src/__docs__/3-advanced-usage/docs.mdx
@@ -1,5 +1,5 @@
 ---
-name: 3. Advanced usage
+name: 3. Advanced usage 😲
 route: /advanced-usage
 order: 3
 ---
@@ -39,12 +39,105 @@ import EmailChain from './EmailChain';
 
 # Advanced usage
 
+## Controlling in what order animations should execute
+
+Animations are executed from top to bottom.
+The parent-most animation will be executed first and then continue execution inwards.
+
+So if we had two animations, Move and CrossFade:
+
+```js
+<Baba name="move-first">
+  <Move>
+    <CrossFade>{props => <div {...props} />}</CrossFade>
+  </Move>
+</Baba>
+```
+
+When executed the order would look like:
+
+1. Move **beforeAnimate** fired
+1. CrossFade **beforeAnimate** fired
+1. Move **animate** fired
+1. CrossFade **animate** fired
+1. Move **afterAnimate** fired
+1. CrossFade **afterAnimate** fired
+
+<br />
+
+If we placed CrossFade first:
+
+```js
+<Baba name="cross-fade-first">
+  <CrossFade>
+    <Move>{props => <div {...props} />}</Move>
+  </CrossFade>
+</Baba>
+```
+
+Then their order would be inversed:
+
+1. CrossFade **beforeAnimate** fired
+1. Move **beforeAnimate** fired
+1. CrossFade **animate** fired
+1. Move **animate** fired
+1. CrossFade **afterAnimate** fired
+1. Move **afterAnimate** fired
+
+## Wait for the previous animation to finish before starting the next
+
+Depending on the animations chosen you'll want to defer starting one until the previous has finished.
+Luckily the [Wait](/wait) component has been made for that!
+
+Continuing the example above,
+if we introduce the Wait component:
+
+```js
+<Baba name="wait">
+  <CrossFade>
+    <Wait>
+      <Move>{props => <div {...props} />}</Move>
+    </Wait>
+  </CrossFade>
+</Baba>
+```
+
+Then the Move animation will wait for the CrossFade animation to complete finish before starting,
+the order then becoming:
+
+1. CrossFade **beforeAnimate** fired
+1. CrossFade **animate** fired
+1. Move **beforeAnimate** fired
+1. Move **animate** fired
+1. CrossFade **afterAnimate** fired
+1. Move **afterAnimate** fired
+
+> **Tip -** Notice that afterAnimate's are always called the the same regardless of Wait usage.
+
 ## Delay showing content until all animations have finished
 
 Occasionally when initiating an animation we can have some secondary content we want to keep hidden until the animation has finished.
 Luckily [BabaManager](/baba-manager) exists to do just that!
 Make it a parent of any [Baba](/baba) and it will show its content only when the animation has finished.
 
+```js
+<BabaManager>
+  {manager => (
+    <div>
+      <Baba name="hide-children-until-animations-have-finished">
+        <CrossFade>
+          <Move>{props => <div {...props} />}</Move>
+        </CrossFade>
+      </Baba>
+
+      <span {...manager}>Children content</span>
+    </div>
+  )}
+</BabaManager>
+```
+
+Children content will be shown after **all** animations have completed.
+
 > **Tip -** If you have multiple child [Baba](/baba) you can pass [BabaManager](/baba-manager) a `name` prop to target a specific [Baba](/baba).
 
 ## Using supporting animations
@@ -97,14 +190,6 @@ used together can produce a really cool transition between states.
 > **Tip -** [BabaManager](/baba-manager) has been used as well to hide the next contents until the animation has finished,
 > resulting in that crisp transition.
 
-## Wait for the previous animation to finish before starting the next
-
-Depending on the animations chosen you'll want to defer starting one until the previous has finished.
-Luckily the [Wait](/wait) component has been made for that!
-
-> **Tip -** Animations are executed from top to bottom.
-> The parent-most animation will be executed first and then continue execution inwards.
-
 ## Moving using a focal target
 
 At times we want to move all content at once but have it originate from a focal point.
diff --git a/packages/yubaba/src/__docs__/4-custom-animations/docs.mdx b/packages/yubaba/src/__docs__/4-custom-animations/docs.mdx
index 51453bd..4b0e6ca 100644
--- a/packages/yubaba/src/__docs__/4-custom-animations/docs.mdx
+++ b/packages/yubaba/src/__docs__/4-custom-animations/docs.mdx
@@ -1,5 +1,5 @@
 ---
-name: 4. Custom animations
+name: 4. Custom animations 🎬
 route: /custom-animations
 order: 2
 ---
diff --git a/packages/yubaba/src/__docs__/5-troubleshooting/docs.mdx b/packages/yubaba/src/__docs__/5-troubleshooting/docs.mdx
index c4d1fe6..5434ff3 100644
--- a/packages/yubaba/src/__docs__/5-troubleshooting/docs.mdx
+++ b/packages/yubaba/src/__docs__/5-troubleshooting/docs.mdx
@@ -1,5 +1,5 @@
 ---
-name: 5. Troubleshooting
+name: 5. Troubleshooting 🤔
 route: /troubleshooting
 order: 1
 ---
diff --git a/packages/yubaba/src/__docs__/composite-components/docs.mdx b/packages/yubaba/src/__docs__/composite-components/docs.mdx
new file mode 100644
index 0000000..ff9c7fb
--- /dev/null
+++ b/packages/yubaba/src/__docs__/composite-components/docs.mdx
@@ -0,0 +1,13 @@
+---
+name: What are composite components?
+route: /composite-components
+menu: Composite components
+---
+
+# What are composite components?
+
+Composite components are experiences that you can drop into your application and use right away.
+They consume `yubaba` animations and add a bit of extra spice 🌶 so you don't have to.
+
+They're also great inspiration for creating your own!
+Look at their source code 🚢.
diff --git a/packages/yubaba/src/__docs__/focal-animations/docs.mdx b/packages/yubaba/src/__docs__/focal-animations/docs.mdx
new file mode 100644
index 0000000..13975d2
--- /dev/null
+++ b/packages/yubaba/src/__docs__/focal-animations/docs.mdx
@@ -0,0 +1,13 @@
+---
+name: What are focal animations?
+route: /focal-animations
+menu: Focal animations
+---
+
+# What are focal animations?
+
+The bread and butter of `yubaba` 🍞.
+
+Focal animations are all about a single focal element that we want to transition from one state to another.
+While multiple elements _may_ be utilised in a focal animation,
+the animations are always interested in a single focal element.
diff --git a/packages/yubaba/src/__docs__/supporting-animations/docs.mdx b/packages/yubaba/src/__docs__/supporting-animations/docs.mdx
new file mode 100644
index 0000000..6281a5b
--- /dev/null
+++ b/packages/yubaba/src/__docs__/supporting-animations/docs.mdx
@@ -0,0 +1,10 @@
+---
+name: What are supporting animations?
+route: /supporting-animations
+menu: Supporting animations
+---
+
+# What are supporting animations?
+
+Supporting animations should be composed with [focal animations](/focal-animations) to create a seamless transitions between one view and another.
+They generally create an element for the animation and then clean up once all animations have finished.
diff --git a/packages/yubaba/src/animations/CircleExpand/__docs__/docs.mdx b/packages/yubaba/src/animations/CircleExpand/__docs__/docs.mdx
index b5379d5..4899d4c 100644
--- a/packages/yubaba/src/animations/CircleExpand/__docs__/docs.mdx
+++ b/packages/yubaba/src/animations/CircleExpand/__docs__/docs.mdx
@@ -1,7 +1,7 @@
 ---
 name: CircleExpand
 route: /circle-expand
-menu: Supporting Animations
+menu: Supporting animations
 ---
 
 import { Playground, PropsTable } from 'docz';
diff --git a/packages/yubaba/src/animations/CircleShrink/__docs__/docs.mdx b/packages/yubaba/src/animations/CircleShrink/__docs__/docs.mdx
index 42c90e2..f50db5a 100644
--- a/packages/yubaba/src/animations/CircleShrink/__docs__/docs.mdx
+++ b/packages/yubaba/src/animations/CircleShrink/__docs__/docs.mdx
@@ -1,7 +1,7 @@
 ---
 name: CircleShrink
 route: /circle-shrink
-menu: Supporting Animations
+menu: Supporting animations
 ---
 
 import { Playground, PropsTable } from 'docz';
diff --git a/packages/yubaba/src/animations/ConcealMove/__docs__/docs.mdx b/packages/yubaba/src/animations/ConcealMove/__docs__/docs.mdx
index 656b9ed..9a6cdb3 100644
--- a/packages/yubaba/src/animations/ConcealMove/__docs__/docs.mdx
+++ b/packages/yubaba/src/animations/ConcealMove/__docs__/docs.mdx
@@ -1,7 +1,7 @@
 ---
 name: ConcealMove
 route: /conceal-move
-menu: Focal Animations
+menu: Focal animations
 ---
 
 import { Playground, PropsTable } from 'docz';
diff --git a/packages/yubaba/src/animations/CrossFadeMove/__docs__/docs.mdx b/packages/yubaba/src/animations/CrossFadeMove/__docs__/docs.mdx
index 56a4605..894862c 100644
--- a/packages/yubaba/src/animations/CrossFadeMove/__docs__/docs.mdx
+++ b/packages/yubaba/src/animations/CrossFadeMove/__docs__/docs.mdx
@@ -1,7 +1,7 @@
 ---
 name: CrossFadeMove
 route: /cross-fade-move
-menu: Focal Animations
+menu: Focal animations
 ---
 
 import { Playground, PropsTable } from 'docz';
diff --git a/packages/yubaba/src/animations/FadeMove/__docz__/docs.mdx b/packages/yubaba/src/animations/FadeMove/__docz__/docs.mdx
index 6a91a11..e70ae9c 100644
--- a/packages/yubaba/src/animations/FadeMove/__docz__/docs.mdx
+++ b/packages/yubaba/src/animations/FadeMove/__docz__/docs.mdx
@@ -1,7 +1,7 @@
 ---
 name: FadeMove
 route: /fade-move
-menu: Focal Animations
+menu: Focal animations
 ---
 
 import { Playground, PropsTable } from 'docz';
diff --git a/packages/yubaba/src/animations/Move/__docs__/docs.mdx b/packages/yubaba/src/animations/Move/__docs__/docs.mdx
index f271d11..571d2ed 100644
--- a/packages/yubaba/src/animations/Move/__docs__/docs.mdx
+++ b/packages/yubaba/src/animations/Move/__docs__/docs.mdx
@@ -1,7 +1,7 @@
 ---
 name: Move
 route: /move
-menu: Focal Animations
+menu: Focal animations
 ---
 
 import { Playground, PropsTable } from 'docz';
diff --git a/packages/yubaba/src/animations/Noop/__docs__/docs.mdx b/packages/yubaba/src/animations/Noop/__docs__/docs.mdx
index 81d2ca5..03a2a8b 100644
--- a/packages/yubaba/src/animations/Noop/__docs__/docs.mdx
+++ b/packages/yubaba/src/animations/Noop/__docs__/docs.mdx
@@ -1,7 +1,7 @@
 ---
 name: Noop
 route: /noop
-menu: Utility Helpers
+menu: Utility helpers
 ---
 
 import { Playground, PropsTable } from 'docz';
diff --git a/packages/yubaba/src/animations/ReshapingContainer/__docz__/docs.mdx b/packages/yubaba/src/animations/ReshapingContainer/__docz__/docs.mdx
index e75eda8..cb4cba0 100644
--- a/packages/yubaba/src/animations/ReshapingContainer/__docz__/docs.mdx
+++ b/packages/yubaba/src/animations/ReshapingContainer/__docz__/docs.mdx
@@ -1,7 +1,7 @@
 ---
 name: ReshapingContainer
 route: /reshaping-container
-menu: Composite Components
+menu: Composite components
 ---
 
 import { Playground, PropsTable } from 'docz';
@@ -11,16 +11,117 @@ import * as Styled from './styled';
 
 # ReshapingContainer
 
-A composite component that is made up of [SimpleReveal](/simple-reveal) and [Move](/move).
+A composite component that is made up of the [Move](/move) animation.
 It has been made to be able to efficiently have the parent container resize around its children after state changes.
 
+This is useful for anything where you want the background to nicely reshape itself around its children,
+for example a hover menu!
+
+> **Tip -** When we say _efficiently_ we seriously mean it 🙌! _Only_ `transform` is utilised.
+
 ## Usage
 
 ```js
 import { ReshapingContainer } from 'yubaba';
 ```
 
-<Playground>hey</Playground>
+Hover or focus on the links 💯
+
+<Playground>
+  <Common.Toggler>
+    {toggler => (
+      <Styled.Container>
+        <Styled.Background />
+
+        <Styled.Header>
+          <span>tripe 🥩</span>
+
+          <Styled.MenuLink
+            href="#"
+            onMouseEnter={() => toggler.toggle('1')}
+            onFocus={() => toggler.toggle('1')}
+            onMouseLeave={() => toggler.toggle()}
+            onBlur={() => toggler.toggle()}
+          >
+            Products
+          </Styled.MenuLink>
+          <Styled.MenuLink
+            href="#"
+            onMouseEnter={() => toggler.toggle('2')}
+            onFocus={() => toggler.toggle('2')}
+            onMouseLeave={() => toggler.toggle()}
+            onBlur={() => toggler.toggle()}
+          >
+            Developers
+          </Styled.MenuLink>
+          <Styled.MenuLink
+            href="#"
+            onMouseEnter={() => toggler.toggle('3')}
+            onFocus={() => toggler.toggle('3')}
+            onMouseLeave={() => toggler.toggle()}
+            onBlur={() => toggler.toggle()}
+          >
+            Company
+          </Styled.MenuLink>
+        </Styled.Header>
+
+        {toggler.shown && (
+          <div
+            style={{
+              position: 'absolute',
+              top: 100,
+              right: toggler.shown === '1' ? 200 : toggler.shown === '2' ? 100 : 20,
+            }}
+          >
+            <ReshapingContainer
+              id="reshaping-example"
+              boxShadow="0 50px 100px -20px rgba(50,50,93,.25), 0 30px 60px -30px rgba(0,0,0,.3), 0 -18px 60px -10px rgba(0,0,0,.025)"
+              background="#fff"
+              maxWidth="500px"
+              borderRadius="3px"
+              padding="16px"
+            >
+              {props => (
+                <Styled.Menu style={props.style}>
+                  {toggler.shown === '1' ? (
+                    <>
+                      <Styled.MenuItem>
+                        Pricing
+                        <small>Find out how much tripe you can buy for $100</small>
+                      </Styled.MenuItem>
+                      <Styled.MenuItem>
+                        Billing
+                        <small>Need an invoice? Look in here</small>
+                      </Styled.MenuItem>
+                      <Styled.MenuItem>
+                        Connect
+                        <small>Find other tripe enthusiasts? Check here first</small>
+                      </Styled.MenuItem>
+                    </>
+                  ) : toggler.shown === '2' ? (
+                    <>
+                      <Styled.MenuItem>
+                        Recipes
+                        <small>Find the best way to cook it</small>
+                      </Styled.MenuItem>
+                    </>
+                  ) : (
+                    <>
+                      <Styled.MenuItem>About Tripe</Styled.MenuItem>
+                      <Styled.MenuItem>Customers</Styled.MenuItem>
+                      <Styled.MenuItem>Jobs</Styled.MenuItem>
+                    </>
+                  )}
+                </Styled.Menu>
+              )}
+            </ReshapingContainer>
+          </div>
+        )}
+      </Styled.Container>
+    )}
+
+  </Common.Toggler>
+</Playground>
 
 ## Props
 
diff --git a/packages/yubaba/src/animations/ReshapingContainer/__docz__/styled.tsx b/packages/yubaba/src/animations/ReshapingContainer/__docz__/styled.tsx
index e69de29..0bc1b91 100644
--- a/packages/yubaba/src/animations/ReshapingContainer/__docz__/styled.tsx
+++ b/packages/yubaba/src/animations/ReshapingContainer/__docz__/styled.tsx
@@ -0,0 +1,77 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+  padding: 50px;
+  height: 300px;
+  position: relative;
+  overflow: hidden;
+`;
+
+export const Header = styled.header`
+  display: flex;
+  position: relative;
+  align-items: center;
+
+  > :first-child {
+    margin-right: auto;
+    color: white;
+    font-size: 30px;
+    flex-shrink: 0;
+  }
+`;
+
+export const Background = styled.div`
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background: linear-gradient(150deg, #53f 15%, #05d5ff 70%, #a6ffcb 94%);
+  position: absolute;
+  top: 0;
+  left: 0;
+`;
+
+export const MenuLink = styled.a`
+  font-weight: 500;
+  padding: 0 25px;
+  height: 50px;
+  font-size: 17px;
+  line-height: 50px;
+  outline: none;
+  color: #fff;
+  transition: color 0.1s ease;
+  text-decoration: none;
+
+  &:hover,
+  &:focus {
+    color: hsla(0, 0%, 100%, 0.5);
+  }
+`;
+
+export const Menu = styled.ul`
+  position: relative;
+  padding: 0 20px;
+  margin: 0;
+`;
+
+export const MenuItem = styled.li`
+  display: block;
+  padding: 9px 0;
+  outline: none;
+  position: relative;
+  list-style: none;
+  transition: color 0.1s;
+  color: #6772e5;
+  margin: 0;
+  text-transform: uppercase;
+
+  &:hover,
+  &:focus {
+    color: #32325d;
+  }
+
+  small {
+    display: block;
+    color: #6b7c93;
+    text-transform: none;
+  }
+`;
diff --git a/packages/yubaba/src/animations/ReshapingContainer/index.tsx b/packages/yubaba/src/animations/ReshapingContainer/index.tsx
index 99aec08..7fa24e6 100644
--- a/packages/yubaba/src/animations/ReshapingContainer/index.tsx
+++ b/packages/yubaba/src/animations/ReshapingContainer/index.tsx
@@ -1,11 +1,10 @@
 import * as React from 'react';
 import Baba from '../../Baba';
 import Move from '../Move';
-import { CollectorChildrenAsFunction } from '../../Collector';
-import SimpleReveal from '../SimpleReveal';
+import { InlineStyles } from '../../Collector';
 import { Duration } from '../types';
 
-interface ReshapingContainerProps {
+export interface ReshapingContainerProps {
   /**
    * This should be a unique identifier across your whole app.
    */
@@ -15,7 +14,7 @@ interface ReshapingContainerProps {
    * Children as function.
    * Will receive an object with className, style, and ref.
    */
-  children: CollectorChildrenAsFunction;
+  children: (opts: { style: InlineStyles }) => React.ReactNode;
 
   /**
    * Defaults to "div".
@@ -25,42 +24,56 @@ interface ReshapingContainerProps {
 
   /**
    * Used the same as the CSS property.
+   * E.g. "3px"
+   */
+  borderRadius?: string;
+
+  /**
+   * Used the same as the CSS property.
+   * E.g. "rgba(0, 0, 0, 0.5)"
    */
   background?: string;
 
   /**
    * Used the same as the CSS property.
+   * E.g. "0 1px 50px rgba(32, 33, 36, 0.1)"
    */
   boxShadow?: string;
 
   /**
    * Padding.
    * Use only px values, otherwise same as the CSS property.
+   * E.g. "10px"
    */
   padding: string;
 
   /**
    * Used the same as the CSS property.
+   * E.g. "500px"
    */
   maxWidth?: string;
 
   /**
    * Used the same as the CSS property.
+   * * E.g. "500px"
    */
   maxHeight?: string;
 
   /**
    * Used the same as the CSS property.
+   * * E.g. "500px"
    */
   minWidth?: string;
 
   /**
    * Used the same as the CSS property.
+   * * E.g. "500px"
    */
   minHeight?: string;
 
   /**
    * Used the same as the CSS property.
+   * E.g. "20px auto"
    */
   margin?: string;
 
@@ -73,9 +86,16 @@ interface ReshapingContainerProps {
 
   /**
    * Used the same as the CSS property.
+   * Defaults to what the "as" prop is.
    */
   display?: string;
 
+  /**
+   * Used the same as the CSS property.
+   * E.g. "relative"
+   */
+  position?: string;
+
   /**
    * Timing function to be used in the transition.
    */
@@ -92,7 +112,6 @@ export default class ReshapingContainer extends React.PureComponent<
 > {
   static defaultProps = {
     as: 'div',
-    padding: '',
   };
 
   state: ReshapingContainerState = {
@@ -109,48 +128,6 @@ export default class ReshapingContainer extends React.PureComponent<
     };
   }
 
-  componentDidMount() {
-    if (this.props.padding.indexOf('em') >= 0 || this.props.padding.indexOf('%') >= 0) {
-      throw new Error(
-        `Only px values are supported for props.padding in ${ReshapingContainer.name}`
-      );
-    }
-  }
-
-  /**
-   * We're using this to increase the clip-path box of the Reveal animation so the children contents
-   * line up with the parent container in this component.
-   */
-  getInversePaddingParts() {
-    const parts = this.props.padding.split(' ').map(p => -Number(p.replace('px', '')));
-
-    switch (parts.length) {
-      case 0:
-        return undefined;
-
-      case 1:
-        parts.push(parts[0]);
-        parts.push(parts[0]);
-        parts.push(parts[0]);
-        break;
-
-      case 2:
-        parts.push(parts[0]);
-        parts.push(parts[1]);
-        break;
-
-      case 3:
-        parts.push(parts[1]);
-        break;
-
-      case 4:
-      default:
-        break;
-    }
-
-    return parts as [number, number, number, number];
-  }
-
   render() {
     const {
       children,
@@ -166,6 +143,7 @@ export default class ReshapingContainer extends React.PureComponent<
       id,
       display,
       timingFunction,
+      borderRadius,
       ...rest
     } = this.props;
     const ComponentAs = rest.as as any;
@@ -185,6 +163,7 @@ export default class ReshapingContainer extends React.PureComponent<
                 margin,
                 padding,
                 display,
+                borderRadius,
               }}
             >
               <div
@@ -194,25 +173,19 @@ export default class ReshapingContainer extends React.PureComponent<
                   ...baba.style,
                   background,
                   boxShadow,
+                  borderRadius,
                   position: 'absolute',
                   top: 0,
                   left: 0,
                   right: 0,
                   bottom: 0,
                   pointerEvents: 'none',
-                  zIndex: -1,
+                  zIndex: 1,
                 }}
               />
 
-              <Baba name={`${id}-children`} key={this.state.renderCount}>
-                <SimpleReveal
-                  duration={duration}
-                  offset={this.getInversePaddingParts()}
-                  timingFunction={timingFunction}
-                >
-                  {props => children(props)}
-                </SimpleReveal>
-              </Baba>
+              {/* Position relative/zIndex needed to position this above the floating background. */}
+              {children({ style: { position: 'relative', zIndex: 2 } })}
             </ComponentAs>
           )}
         </Move>
diff --git a/packages/yubaba/src/animations/ReshapingContainer/stories.tsx b/packages/yubaba/src/animations/ReshapingContainer/stories.tsx
index 1a089a2..2e25869 100644
--- a/packages/yubaba/src/animations/ReshapingContainer/stories.tsx
+++ b/packages/yubaba/src/animations/ReshapingContainer/stories.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
 import { storiesOf } from '@storybook/react';
 import styled from 'styled-components';
 import { Toggler } from 'yubaba-common';
-import ContainerMove from './index';
+import ReshapingContainer from './index';
 
 const FixedContainer = styled.div`
   position: fixed;
@@ -23,7 +23,7 @@ storiesOf('yubaba/ReshapingContainer', module)
     <FixedContainer>
       <Toggler>
         {toggler => (
-          <ContainerMove
+          <ReshapingContainer
             id="dialog-move"
             boxShadow="0 1px 50px rgba(32, 33, 36, 0.1)"
             padding="16px"
@@ -50,7 +50,7 @@ storiesOf('yubaba/ReshapingContainer', module)
                 </div>
               </Container>
             )}
-          </ContainerMove>
+          </ReshapingContainer>
         )}
       </Toggler>
     </FixedContainer>
@@ -59,7 +59,7 @@ storiesOf('yubaba/ReshapingContainer', module)
     <FixedContainer>
       <Toggler>
         {toggler => (
-          <ContainerMove
+          <ReshapingContainer
             id="dialog-width"
             boxShadow="0 1px 50px rgba(32, 33, 36, 0.1)"
             padding="16px"
@@ -68,7 +68,7 @@ storiesOf('yubaba/ReshapingContainer', module)
             display="inline-block"
           >
             {props => (
-              <Container style={props.style} className={props.className} innerRef={props.ref}>
+              <Container {...props}>
                 <div>
                   {toggler.shown ? (
                     <>
@@ -94,7 +94,7 @@ storiesOf('yubaba/ReshapingContainer', module)
                 </div>
               </Container>
             )}
-          </ContainerMove>
+          </ReshapingContainer>
         )}
       </Toggler>
     </FixedContainer>
diff --git a/packages/yubaba/src/animations/RevealMove/__docs__/docs.mdx b/packages/yubaba/src/animations/RevealMove/__docs__/docs.mdx
index 7505d75..7d53248 100644
--- a/packages/yubaba/src/animations/RevealMove/__docs__/docs.mdx
+++ b/packages/yubaba/src/animations/RevealMove/__docs__/docs.mdx
@@ -1,7 +1,7 @@
 ---
 name: RevealMove
 route: /reveal-move
-menu: Focal Animations
+menu: Focal animations
 ---
 
 import { Playground, PropsTable } from 'docz';
diff --git a/packages/yubaba/src/animations/RevealReshapingContainer/__docz__/docs.mdx b/packages/yubaba/src/animations/RevealReshapingContainer/__docz__/docs.mdx
new file mode 100644
index 0000000..4c8191b
--- /dev/null
+++ b/packages/yubaba/src/animations/RevealReshapingContainer/__docz__/docs.mdx
@@ -0,0 +1,75 @@
+---
+name: RevealReshapingContainer
+route: /reveal-reshaping-container
+menu: Composite components
+---
+
+import { Playground, PropsTable } from 'docz';
+import * as Common from 'yubaba-common';
+import ReshapingContainer from '../index';
+import * as Styled from './styled';
+
+# RevealReshapingContainer
+
+A composite component that is made up of [SimpleReveal](/simple-reveal) and [ReshapingContainer](/reshaping-container).
+It will do everything the reshaping container does plus keeping the children within the container when resizing.
+
+This is useful for any experience that does not change its position,
+only dimensions.
+For example a modal dialog!
+
+## Usage
+
+```js
+import { RevealReshapingContainer } from 'yubaba';
+```
+
+Click the next button!
+
+<Playground>
+  <Common.Toggler>
+    {toggler => (
+      <Styled.Container>
+        <Styled.Background />
+
+        <ReshapingContainer
+          id="reshaping-example"
+          boxShadow="0 50px 100px -20px rgba(50,50,93,.25), 0 30px 60px -30px rgba(0,0,0,.3), 0 -18px 60px -10px rgba(0,0,0,.025)"
+          background="#fff"
+          maxWidth="500px"
+          borderRadius="3px"
+          padding="16px"
+          margin="0 auto"
+        >
+          {props => (
+            <Styled.ModalDialog
+              style={props.style}
+              innerRef={props.ref}
+              className={props.className}
+            >
+              <Styled.Header>tripe facts 🥩</Styled.Header>
+
+              <Styled.Button onClick={() => toggler.toggle([0, 1, 2][Math.ceil((Math.random() * 100) % 3)])}>
+                👉 thank u, next
+              </Styled.Button>
+
+                <p>
+              {!toggler.shown? (
+                  `Beef tripe is made from the muscle wall (the interior mucosal lining is removed) of only the first three chambers of a cow's stomach: the rumen (blanket/flat/smooth tripe), the reticulum (honeycomb and pocket tripe), and the omasum (book/bible/leaf tripe).`
+              ): toggler.shown == '1' ? (`Beef tripe. Beef tripe is made from the muscle wall (the interior mucosal lining
+                  is removed) of only the first three chambers of a cow's stomach: the rumen
+                  (blanket/flat/smooth tripe), the reticulum (honeycomb and pocket tripe), and the
+                  omasum (book/bible/leaf tripe). It remains a popular dish in many parts of continental Europe such as France and Italy. In France, a very popular dish, sold in most supermarkets, is tripes à la mode de Caen.`) : (`Washed tripe is more typically known as dressed tripe. To dress the tripe, the stomachs are cleaned and the fat trimmed off.[4] It is then boiled and bleached, giving it the white color more commonly associated with tripe as seen on market stalls and in butchers shops. The task of dressing the tripe is usually carried out by a professional tripe dresser. Dressed tripe was a popular, nutritious and cheap dish for the British working classes from Victorian times until the latter half of the 20th century.[5][6][7] While it is still popular in many parts of the world today, the number of tripe eaters, and consequently the number of tripe dressers, in the UK has rapidly declined. Tripe has come to be regarded as a pet food, as the increased affluence of postwar Britain has reduced the appeal of this once staple food.`)}
+                </p>
+            </Styled.ModalDialog>
+          )}
+        </ReshapingContainer>
+      </Styled.Container>
+    )}
+
+  </Common.Toggler>
+</Playground>
+
+## Props
+
+<PropsTable of={ReshapingContainer} />
diff --git a/packages/yubaba/src/animations/RevealReshapingContainer/__docz__/styled.tsx b/packages/yubaba/src/animations/RevealReshapingContainer/__docz__/styled.tsx
new file mode 100644
index 0000000..61b43dc
--- /dev/null
+++ b/packages/yubaba/src/animations/RevealReshapingContainer/__docz__/styled.tsx
@@ -0,0 +1,48 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+  padding: 50px;
+  height: 500px;
+  position: relative;
+  overflow: hidden;
+  color: #6772e5;
+
+  p {
+    color: black;
+    opacity: 0.5;
+  }
+`;
+
+export const Header = styled.header`
+  margin-right: auto;
+  font-size: 30px;
+  flex-shrink: 0;
+`;
+
+export const Background = styled.div`
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background: linear-gradient(150deg, #53f 15%, #05d5ff 70%, #a6ffcb 94%);
+  position: absolute;
+  top: 0;
+  left: 0;
+`;
+
+export const ModalDialog = styled.ul`
+  position: relative;
+  padding: 0 20px;
+  margin: 0;
+`;
+
+export const Button = styled.button`
+  border-radius: 5px;
+  position: absolute;
+  top: 16px;
+  right: 20px;
+  border: 2px solid #6772e5;
+  background: #6772e5;
+  color: white;
+  font-size: 20px;
+  cursor: pointer;
+`;
diff --git a/packages/yubaba/src/animations/RevealReshapingContainer/index.tsx b/packages/yubaba/src/animations/RevealReshapingContainer/index.tsx
new file mode 100644
index 0000000..6634fb9
--- /dev/null
+++ b/packages/yubaba/src/animations/RevealReshapingContainer/index.tsx
@@ -0,0 +1,111 @@
+import * as React from 'react';
+import Baba from '../../Baba';
+import { CollectorChildrenAsFunction } from '../../Collector';
+import ReshapingContainer, { ReshapingContainerProps } from '../ReshapingContainer';
+import SimpleReveal from '../SimpleReveal';
+
+interface RevealReshapingContainerProps extends ReshapingContainerProps {
+  /**
+   * Children as function.
+   * Will receive an object with className, style, and ref.
+   */
+  children: CollectorChildrenAsFunction;
+}
+
+interface RevealReshapingContainerState {
+  renderCount: number;
+}
+
+export default class RevealReshapingContainer extends React.PureComponent<
+  RevealReshapingContainerProps,
+  RevealReshapingContainerState
+> {
+  static defaultProps = ReshapingContainer.defaultProps;
+
+  state: RevealReshapingContainerState = {
+    renderCount: 0,
+  };
+
+  /**
+   * Incremeent render count every time a render occurs.
+   * We're abusing react "key" to trigger animations for now.
+   */
+  static getDerivedStateFromProps(
+    _: RevealReshapingContainerProps,
+    state: RevealReshapingContainerState
+  ) {
+    return {
+      renderCount: state.renderCount + 1,
+    };
+  }
+
+  componentDidMount() {
+    if (this.props.padding.indexOf('em') >= 0 || this.props.padding.indexOf('%') >= 0) {
+      throw new Error(
+        `Only px values are supported for props.padding in ${ReshapingContainer.name}`
+      );
+    }
+  }
+
+  /**
+   * We're using this to increase the clip-path box of the Reveal animation so the children contents
+   * line up with the parent container in this component.
+   */
+  getInversePaddingParts() {
+    const parts = this.props.padding.split(' ').map(p => -Number(p.replace('px', '')));
+
+    switch (parts.length) {
+      case 0:
+        return undefined;
+
+      case 1:
+        parts.push(parts[0]);
+        parts.push(parts[0]);
+        parts.push(parts[0]);
+        break;
+
+      case 2:
+        parts.push(parts[0]);
+        parts.push(parts[1]);
+        break;
+
+      case 3:
+        parts.push(parts[1]);
+        break;
+
+      case 4:
+      default:
+        break;
+    }
+
+    return parts as [number, number, number, number];
+  }
+
+  render() {
+    const { children, duration, id, timingFunction } = this.props;
+
+    return (
+      <ReshapingContainer {...this.props}>
+        {reshaping => (
+          <Baba name={`${id}-children`} key={this.state.renderCount}>
+            <SimpleReveal
+              duration={duration}
+              offset={this.getInversePaddingParts()}
+              timingFunction={timingFunction}
+            >
+              {baba =>
+                children({
+                  ...baba,
+                  style: {
+                    ...baba.style,
+                    ...reshaping.style,
+                  },
+                })
+              }
+            </SimpleReveal>
+          </Baba>
+        )}
+      </ReshapingContainer>
+    );
+  }
+}
diff --git a/packages/yubaba/src/animations/RevealReshapingContainer/stories.tsx b/packages/yubaba/src/animations/RevealReshapingContainer/stories.tsx
new file mode 100644
index 0000000..85760ca
--- /dev/null
+++ b/packages/yubaba/src/animations/RevealReshapingContainer/stories.tsx
@@ -0,0 +1,101 @@
+/* eslint-disable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */
+import * as React from 'react';
+import { storiesOf } from '@storybook/react';
+import styled from 'styled-components';
+import { Toggler } from 'yubaba-common';
+import RevealReshapingContainer from './index';
+
+const FixedContainer = styled.div`
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 20%;
+  padding: 16px;
+`;
+
+const Container = styled.div`
+  /* Watch out for collapsing margins. This will fuck your shit up for animations. */
+  display: flex;
+`;
+
+storiesOf('yubaba/RevealReshapingContainer', module)
+  .add('HeightOnly', () => (
+    <FixedContainer>
+      <Toggler>
+        {toggler => (
+          <RevealReshapingContainer
+            id="dialog-move"
+            boxShadow="0 1px 50px rgba(32, 33, 36, 0.1)"
+            padding="16px"
+            maxWidth="500px"
+            margin="0 auto"
+            background="rgba(32, 33, 36, 0.2)"
+          >
+            {props => (
+              <Container style={props.style} className={props.className} innerRef={props.ref}>
+                <div>
+                  {toggler.shown ? (
+                    <>
+                      <h1>Details</h1>
+                      <p>Many details are revealed here.</p>
+                      <button type="button" onClick={() => toggler.toggle()}>
+                        Hide contents
+                      </button>
+                    </>
+                  ) : (
+                    <button type="button" onClick={() => toggler.toggle()}>
+                      View contents
+                    </button>
+                  )}
+                </div>
+              </Container>
+            )}
+          </RevealReshapingContainer>
+        )}
+      </Toggler>
+    </FixedContainer>
+  ))
+  .add('HeightAndWidth', () => (
+    <FixedContainer>
+      <Toggler>
+        {toggler => (
+          <RevealReshapingContainer
+            id="dialog-width"
+            boxShadow="0 1px 50px rgba(32, 33, 36, 0.1)"
+            padding="16px"
+            maxWidth="500px"
+            margin="0 auto"
+            display="inline-block"
+          >
+            {props => (
+              <Container style={props.style} className={props.className} innerRef={props.ref}>
+                <div>
+                  {toggler.shown ? (
+                    <>
+                      <h1>Details</h1>
+                      <p>
+                        Many details are revealed here long long long long long long long long long
+                        long long long Many details are revealed here long long long long long long
+                        long long long long long long
+                      </p>
+                      <button type="button" onClick={() => toggler.toggle()}>
+                        Hide contents
+                      </button>
+                    </>
+                  ) : (
+                    <>
+                      <h1>Details</h1>
+                      <p>View more.</p>
+                      <button type="button" onClick={() => toggler.toggle()}>
+                        Hide contents
+                      </button>
+                    </>
+                  )}
+                </div>
+              </Container>
+            )}
+          </RevealReshapingContainer>
+        )}
+      </Toggler>
+    </FixedContainer>
+  ));
diff --git a/packages/yubaba/src/animations/SimpleReveal/__docz__/docs.mdx b/packages/yubaba/src/animations/SimpleReveal/__docz__/docs.mdx
index 6e9739b..b88517b 100644
--- a/packages/yubaba/src/animations/SimpleReveal/__docz__/docs.mdx
+++ b/packages/yubaba/src/animations/SimpleReveal/__docz__/docs.mdx
@@ -1,7 +1,7 @@
 ---
 name: SimpleReveal
 route: /simple-reveal
-menu: Focal Animations
+menu: Focal animations
 ---
 
 import { Playground, PropsTable } from 'docz';
diff --git a/packages/yubaba/src/animations/Swipe/__docs__/docs.mdx b/packages/yubaba/src/animations/Swipe/__docs__/docs.mdx
index 8b8e5f1..677e46c 100644
--- a/packages/yubaba/src/animations/Swipe/__docs__/docs.mdx
+++ b/packages/yubaba/src/animations/Swipe/__docs__/docs.mdx
@@ -1,7 +1,7 @@
 ---
 name: Swipe
 route: /swipe
-menu: Supporting Animations
+menu: Supporting animations
 ---
 
 import { Playground, PropsTable } from 'docz';
diff --git a/packages/yubaba/src/index.tsx b/packages/yubaba/src/index.tsx
index fd39145..9d4ecdc 100644
--- a/packages/yubaba/src/index.tsx
+++ b/packages/yubaba/src/index.tsx
@@ -15,6 +15,7 @@ export { default as Reveal } from './animations/Reveal';
 export { default as RevealMove } from './animations/RevealMove';
 export { default as ConcealMove } from './animations/ConcealMove';
 export { default as ReshapingContainer } from './animations/ReshapingContainer';
+export { default as RevealReshapingContainer } from './animations/RevealReshapingContainer';
 export { default as SimpleReveal } from './animations/SimpleReveal';
 
 // Utility stuff

From 48d085fb7bdadd77990153adc27128c03249fdc2 Mon Sep 17 00:00:00 2001
From: madou <laheen@gmail.com>
Date: Sun, 5 May 2019 16:34:53 +1000
Subject: [PATCH 4/5] chore: updates readme and docs

---
 README.md                                     |  6 ++---
 .../src/__docs__/1-introduction/docs.mdx      |  6 ++---
 .../src/__docs__/3-advanced-usage/docs.mdx    |  8 ++++--
 .../src/__docs__/focal-animations/docs.mdx    |  2 +-
 .../__docs__/supporting-animations/docs.mdx   |  2 +-
 .../animations/ConcealMove/__docs__/docs.mdx  |  2 ++
 .../src/animations/Move/__docs__/docs.mdx     |  2 +-
 .../ReshapingContainer/__docz__/docs.mdx      |  4 +--
 .../animations/ReshapingContainer/index.tsx   |  1 +
 .../src/animations/Reveal/__docz__/docs.mdx   | 27 +++++++++++++++++++
 .../__docz__/docs.mdx                         | 25 ++++++++++++-----
 .../RevealReshapingContainer/index.tsx        |  1 +
 .../animations/SimpleReveal/__docz__/docs.mdx | 11 +++++---
 13 files changed, 74 insertions(+), 23 deletions(-)
 create mode 100644 packages/yubaba/src/animations/Reveal/__docz__/docs.mdx

diff --git a/README.md b/README.md
index 05962bc..7e16b01 100644
--- a/README.md
+++ b/README.md
@@ -12,10 +12,10 @@ It's all about **animation** 🧙✨ - it can help with:
 
 - [Moving an element](https://yubabajs.com/move) from one position to another
 - [Revealing elements](https://yubabajs.com/reveal-move) like you see above
-- [Supporting animations](https://yubabajs.com/circle-expand) by obstructing elements in view; and
-- [Hiding children elements](https://yubabajs.com/baba-manager) until animations have completed to trick users 🤫
+- [Supporting animations](https://yubabajs.com/supporting-animations) by obstructing elements in view; and
+- [Hiding children elements](https://yubabajs.com/advanced-usage#delay-showing-content-until-all-animations-have-finished) until animations have completed to trick users 🤫
 - [Orchestrating](https://yubabajs.com/advanced-usage#wait-for-the-previous-animation-to-finish-before-starting-the-next) when animations should happen and [in what order](https://yubabajs.com/advanced-usage#controlling-in-what-order-animations-should-execute)
-- Composing animations together to create [composite animations](https://yubabajs.com/cross-fade-move)
+- Composing animations together to create composite animations, for example [CrossFadeMove](https://yubabajs.com/cross-fade-move)
 - [Anything you can imagine](https://yubabajs.com/custom-animations), seriously 🤩
 
 ## Installation
diff --git a/packages/yubaba/src/__docs__/1-introduction/docs.mdx b/packages/yubaba/src/__docs__/1-introduction/docs.mdx
index 9e23be4..719aeaa 100644
--- a/packages/yubaba/src/__docs__/1-introduction/docs.mdx
+++ b/packages/yubaba/src/__docs__/1-introduction/docs.mdx
@@ -20,10 +20,10 @@ It's all about **animation** 🧙✨ - it can help with:
 
 - [Moving an element](/move) from one position to another
 - [Revealing elements](/reveal-move) like you see above
-- [Supporting animations](/circle-expand) by obstructing elements in view; and
-- [Hiding children elements](/baba-manager) until animations have completed to trick users 🤫
+- [Supporting animations](/supporting-animations) by obstructing elements in view; and
+- [Hiding children elements](/advanced-usage#delay-showing-content-until-all-animations-have-finished) until animations have completed to trick users 🤫
 - [Orchestrating](/advanced-usage#wait-for-the-previous-animation-to-finish-before-starting-the-next) when animations should happen and [in what order](/advanced-usage#controlling-in-what-order-animations-should-execute)
-- Composing animations together to create [composite animations](/cross-fade-move)
+- Composing animations together to create composite animations, for example [CrossFadeMove](/cross-fade-move)
 - [Anything you can imagine](/custom-animations), seriously 🤩
 
 ## Installation
diff --git a/packages/yubaba/src/__docs__/3-advanced-usage/docs.mdx b/packages/yubaba/src/__docs__/3-advanced-usage/docs.mdx
index 451381f..f63b86d 100644
--- a/packages/yubaba/src/__docs__/3-advanced-usage/docs.mdx
+++ b/packages/yubaba/src/__docs__/3-advanced-usage/docs.mdx
@@ -93,13 +93,15 @@ Continuing the example above,
 if we introduce the Wait component:
 
 ```js
+import { Wait } from 'yubaba';
+
 <Baba name="wait">
   <CrossFade>
     <Wait>
       <Move>{props => <div {...props} />}</Move>
     </Wait>
   </CrossFade>
-</Baba>
+</Baba>;
 ```
 
 Then the Move animation will wait for the CrossFade animation to complete finish before starting,
@@ -121,6 +123,8 @@ Luckily [BabaManager](/baba-manager) exists to do just that!
 Make it a parent of any [Baba](/baba) and it will show its content only when the animation has finished.
 
 ```js
+import { BabaManager } from 'yubaba';
+
 <BabaManager>
   {manager => (
     <div>
@@ -133,7 +137,7 @@ Make it a parent of any [Baba](/baba) and it will show its content only when the
       <span {...manager}>Children content</span>
     </div>
   )}
-</BabaManager>
+</BabaManager>;
 ```
 
 Children content will be shown after **all** animations have completed.
diff --git a/packages/yubaba/src/__docs__/focal-animations/docs.mdx b/packages/yubaba/src/__docs__/focal-animations/docs.mdx
index 13975d2..c2c78bf 100644
--- a/packages/yubaba/src/__docs__/focal-animations/docs.mdx
+++ b/packages/yubaba/src/__docs__/focal-animations/docs.mdx
@@ -9,5 +9,5 @@ menu: Focal animations
 The bread and butter of `yubaba` 🍞.
 
 Focal animations are all about a single focal element that we want to transition from one state to another.
-While multiple elements _may_ be utilised in a focal animation,
+While multiple elements _may_ be utilised in a focal animation (e.g. how [RevealMove](/reveal-move) works),
 the animations are always interested in a single focal element.
diff --git a/packages/yubaba/src/__docs__/supporting-animations/docs.mdx b/packages/yubaba/src/__docs__/supporting-animations/docs.mdx
index 6281a5b..a2ce8a6 100644
--- a/packages/yubaba/src/__docs__/supporting-animations/docs.mdx
+++ b/packages/yubaba/src/__docs__/supporting-animations/docs.mdx
@@ -6,5 +6,5 @@ menu: Supporting animations
 
 # What are supporting animations?
 
-Supporting animations should be composed with [focal animations](/focal-animations) to create a seamless transitions between one view and another.
+Supporting animations should be composed with [focal animations](/focal-animations) to create seamless transitions between one view state and another.
 They generally create an element for the animation and then clean up once all animations have finished.
diff --git a/packages/yubaba/src/animations/ConcealMove/__docs__/docs.mdx b/packages/yubaba/src/animations/ConcealMove/__docs__/docs.mdx
index 9a6cdb3..79c6b12 100644
--- a/packages/yubaba/src/animations/ConcealMove/__docs__/docs.mdx
+++ b/packages/yubaba/src/animations/ConcealMove/__docs__/docs.mdx
@@ -39,6 +39,8 @@ Requires the use of the [FocalTarget](/focal-target) component to specify the fo
 import Baba, { ConcealMove, FocalTarget } from 'yubaba';
 ```
 
+Click the back button in the album art.
+
 <Playground>
   {() => {
     const revealingImage = ({ albumArt }) => (
diff --git a/packages/yubaba/src/animations/Move/__docs__/docs.mdx b/packages/yubaba/src/animations/Move/__docs__/docs.mdx
index 571d2ed..5cbc900 100644
--- a/packages/yubaba/src/animations/Move/__docs__/docs.mdx
+++ b/packages/yubaba/src/animations/Move/__docs__/docs.mdx
@@ -14,7 +14,7 @@ import * as Styled from './styled';
 
 Useful for animating an element moving from one position to another,
 works best when the element has **very little visual difference**.
-This animation uses the [FLIP technique](https://css-tricks.com/animating-layouts-with-the-flip-technique/) so it is very performant.
+This animation uses the [FLIP technique](https://css-tricks.com/animating-layouts-with-the-flip-technique/) so it is quite performant.
 
 ## Usage
 
diff --git a/packages/yubaba/src/animations/ReshapingContainer/__docz__/docs.mdx b/packages/yubaba/src/animations/ReshapingContainer/__docz__/docs.mdx
index cb4cba0..860c036 100644
--- a/packages/yubaba/src/animations/ReshapingContainer/__docz__/docs.mdx
+++ b/packages/yubaba/src/animations/ReshapingContainer/__docz__/docs.mdx
@@ -11,13 +11,13 @@ import * as Styled from './styled';
 
 # ReshapingContainer
 
-A composite component that is made up of the [Move](/move) animation.
+A composite component that is made up of the [Move](/move) animation and some extra markup for the floating background.
 It has been made to be able to efficiently have the parent container resize around its children after state changes.
 
 This is useful for anything where you want the background to nicely reshape itself around its children,
 for example a hover menu!
 
-> **Tip -** When we say _efficiently_ we seriously mean it 🙌! _Only_ `transform` is utilised.
+> **Tip -** When we say _efficiently_ we mean it 🙌! _Only_ `transform` is utilised.
 
 ## Usage
 
diff --git a/packages/yubaba/src/animations/ReshapingContainer/index.tsx b/packages/yubaba/src/animations/ReshapingContainer/index.tsx
index 7fa24e6..f5071cf 100644
--- a/packages/yubaba/src/animations/ReshapingContainer/index.tsx
+++ b/packages/yubaba/src/animations/ReshapingContainer/index.tsx
@@ -121,6 +121,7 @@ export default class ReshapingContainer extends React.PureComponent<
   /**
    * Incremeent render count every time a render occurs.
    * We're abusing react "key" to trigger animations for now.
+   * See: https://github.com/madou/yubaba/issues/100
    */
   static getDerivedStateFromProps(_: ReshapingContainerProps, state: ReshapingContainerState) {
     return {
diff --git a/packages/yubaba/src/animations/Reveal/__docz__/docs.mdx b/packages/yubaba/src/animations/Reveal/__docz__/docs.mdx
new file mode 100644
index 0000000..becb3fd
--- /dev/null
+++ b/packages/yubaba/src/animations/Reveal/__docz__/docs.mdx
@@ -0,0 +1,27 @@
+---
+name: SimpleReveal
+route: /simple-reveal
+menu: Focal animations
+---
+
+import { Playground, PropsTable } from 'docz';
+import * as Common from 'yubaba-common';
+import Reveal from '../index';
+
+# Reveal
+
+Will reveal a container around a marked focal element using `width` and `height`,
+or alternatively `clip-path`.
+See [RevealMove](/reveal-move) for what this looks like.
+
+This component requires the use of a [FocalTarget](/focal-target) to mark the focal element.
+
+## Usage
+
+```js
+import { Reveal } from 'yubaba';
+```
+
+## Props
+
+<PropsTable of={Reveal} />
diff --git a/packages/yubaba/src/animations/RevealReshapingContainer/__docz__/docs.mdx b/packages/yubaba/src/animations/RevealReshapingContainer/__docz__/docs.mdx
index 4c8191b..b44c087 100644
--- a/packages/yubaba/src/animations/RevealReshapingContainer/__docz__/docs.mdx
+++ b/packages/yubaba/src/animations/RevealReshapingContainer/__docz__/docs.mdx
@@ -49,18 +49,22 @@ Click the next button!
             >
               <Styled.Header>tripe facts 🥩</Styled.Header>
 
-              <Styled.Button onClick={() => toggler.toggle([0, 1, 2][Math.ceil((Math.random() * 100) % 3)])}>
+              <Styled.Button
+                onClick={() => toggler.toggle([0, 1, 2][Math.ceil((Math.random() * 100) % 3)])}
+              >
                 👉 thank u, next
               </Styled.Button>
 
-                <p>
-              {!toggler.shown? (
-                  `Beef tripe is made from the muscle wall (the interior mucosal lining is removed) of only the first three chambers of a cow's stomach: the rumen (blanket/flat/smooth tripe), the reticulum (honeycomb and pocket tripe), and the omasum (book/bible/leaf tripe).`
-              ): toggler.shown == '1' ? (`Beef tripe. Beef tripe is made from the muscle wall (the interior mucosal lining
+              <p>
+                {!toggler.shown
+                  ? `Beef tripe is made from the muscle wall (the interior mucosal lining is removed) of only the first three chambers of a cow's stomach: the rumen (blanket/flat/smooth tripe), the reticulum (honeycomb and pocket tripe), and the omasum (book/bible/leaf tripe).`
+                  : toggler.shown == '1'
+                  ? `Beef tripe. Beef tripe is made from the muscle wall (the interior mucosal lining
                   is removed) of only the first three chambers of a cow's stomach: the rumen
                   (blanket/flat/smooth tripe), the reticulum (honeycomb and pocket tripe), and the
-                  omasum (book/bible/leaf tripe). It remains a popular dish in many parts of continental Europe such as France and Italy. In France, a very popular dish, sold in most supermarkets, is tripes à la mode de Caen.`) : (`Washed tripe is more typically known as dressed tripe. To dress the tripe, the stomachs are cleaned and the fat trimmed off.[4] It is then boiled and bleached, giving it the white color more commonly associated with tripe as seen on market stalls and in butchers shops. The task of dressing the tripe is usually carried out by a professional tripe dresser. Dressed tripe was a popular, nutritious and cheap dish for the British working classes from Victorian times until the latter half of the 20th century.[5][6][7] While it is still popular in many parts of the world today, the number of tripe eaters, and consequently the number of tripe dressers, in the UK has rapidly declined. Tripe has come to be regarded as a pet food, as the increased affluence of postwar Britain has reduced the appeal of this once staple food.`)}
-                </p>
+                  omasum (book/bible/leaf tripe). It remains a popular dish in many parts of continental Europe such as France and Italy. In France, a very popular dish, sold in most supermarkets, is tripes à la mode de Caen.`
+                  : `Washed tripe is more typically known as dressed tripe. To dress the tripe, the stomachs are cleaned and the fat trimmed off.[4] It is then boiled and bleached, giving it the white color more commonly associated with tripe as seen on market stalls and in butchers shops. The task of dressing the tripe is usually carried out by a professional tripe dresser. Dressed tripe was a popular, nutritious and cheap dish for the British working classes from Victorian times until the latter half of the 20th century.[5][6][7] While it is still popular in many parts of the world today, the number of tripe eaters, and consequently the number of tripe dressers, in the UK has rapidly declined. Tripe has come to be regarded as a pet food, as the increased affluence of postwar Britain has reduced the appeal of this once staple food.`}
+              </p>
             </Styled.ModalDialog>
           )}
         </ReshapingContainer>
@@ -73,3 +77,10 @@ Click the next button!
 ## Props
 
 <PropsTable of={ReshapingContainer} />
+
+## Caveats
+
+Be careful of collapsing margins when utilising this animation,
+they will make the destination element jump around when revealing,
+probably.
+If you're seeing some odd behavior - maybe try a flex container instead.
diff --git a/packages/yubaba/src/animations/RevealReshapingContainer/index.tsx b/packages/yubaba/src/animations/RevealReshapingContainer/index.tsx
index 6634fb9..64482df 100644
--- a/packages/yubaba/src/animations/RevealReshapingContainer/index.tsx
+++ b/packages/yubaba/src/animations/RevealReshapingContainer/index.tsx
@@ -29,6 +29,7 @@ export default class RevealReshapingContainer extends React.PureComponent<
   /**
    * Incremeent render count every time a render occurs.
    * We're abusing react "key" to trigger animations for now.
+   * See: https://github.com/madou/yubaba/issues/100
    */
   static getDerivedStateFromProps(
     _: RevealReshapingContainerProps,
diff --git a/packages/yubaba/src/animations/SimpleReveal/__docz__/docs.mdx b/packages/yubaba/src/animations/SimpleReveal/__docz__/docs.mdx
index b88517b..67ba4bb 100644
--- a/packages/yubaba/src/animations/SimpleReveal/__docz__/docs.mdx
+++ b/packages/yubaba/src/animations/SimpleReveal/__docz__/docs.mdx
@@ -10,7 +10,7 @@ import SimpleReveal from '../index';
 
 # SimpleReveal
 
-A composite component that is made up of
+Will reveal the destination element from the origin size to the destination size using `clip-path` only which will not work for IE11.
 
 ## Usage
 
@@ -18,8 +18,13 @@ A composite component that is made up of
 import { SimpleReveal } from 'yubaba';
 ```
 
-<Playground>hey</Playground>
-
 ## Props
 
 <PropsTable of={SimpleReveal} />
+
+## Caveats
+
+Be careful of collapsing margins when utilising this animation,
+they will make the destination element jump around,
+probably.
+If you're seeing some odd behavior - maybe try a flex container instead.

From 55b9af8ffb6f80a35bf381144a375aabda273d46 Mon Sep 17 00:00:00 2001
From: madou <laheen@gmail.com>
Date: Sun, 5 May 2019 22:23:31 +1000
Subject: [PATCH 5/5] chore: rename reveal to focal reveal,  reveal move to
 focal reveal move, simple reveal to reveal

---
 README.md                                     |   2 +-
 .../src/__docs__/1-introduction/docs.mdx      |   2 +-
 .../__docs__/3-advanced-usage/EmailChain.tsx  |   6 +-
 .../src/__docs__/3-advanced-usage/docs.mdx    |   2 +-
 .../src/__docs__/focal-animations/docs.mdx    |   2 +-
 .../animations/FocalReveal/__docz__/docs.mdx  |  27 +++
 .../src/animations/FocalReveal/index.tsx      | 164 ++++++++++++++++++
 .../__docs__/docs.mdx                         |  16 +-
 .../__docs__/images/halcyda.png               | Bin
 .../__docs__/styled.tsx                       |   0
 .../{RevealMove => FocalRevealMove}/index.tsx |  10 +-
 .../stories.tsx                               |   8 +-
 packages/yubaba/src/animations/Move/index.tsx |   2 +-
 .../src/animations/Reveal/__docz__/docs.mdx   |  17 +-
 .../yubaba/src/animations/Reveal/index.tsx    | 107 +++---------
 .../yubaba/src/animations/Reveal/stories.tsx  |  46 +++++
 .../RevealReshapingContainer/index.tsx        |   6 +-
 .../animations/SimpleReveal/__docz__/docs.mdx |  30 ----
 .../src/animations/SimpleReveal/index.tsx     | 105 -----------
 .../src/animations/SimpleReveal/stories.tsx   |  46 -----
 packages/yubaba/src/index.tsx                 |   6 +-
 21 files changed, 302 insertions(+), 302 deletions(-)
 create mode 100644 packages/yubaba/src/animations/FocalReveal/__docz__/docs.mdx
 create mode 100644 packages/yubaba/src/animations/FocalReveal/index.tsx
 rename packages/yubaba/src/animations/{RevealMove => FocalRevealMove}/__docs__/docs.mdx (96%)
 rename packages/yubaba/src/animations/{RevealMove => FocalRevealMove}/__docs__/images/halcyda.png (100%)
 rename packages/yubaba/src/animations/{RevealMove => FocalRevealMove}/__docs__/styled.tsx (100%)
 rename packages/yubaba/src/animations/{RevealMove => FocalRevealMove}/index.tsx (55%)
 rename packages/yubaba/src/animations/{RevealMove => FocalRevealMove}/stories.tsx (97%)
 delete mode 100644 packages/yubaba/src/animations/SimpleReveal/__docz__/docs.mdx
 delete mode 100644 packages/yubaba/src/animations/SimpleReveal/index.tsx
 delete mode 100644 packages/yubaba/src/animations/SimpleReveal/stories.tsx

diff --git a/README.md b/README.md
index 7e16b01..1e956ab 100644
--- a/README.md
+++ b/README.md
@@ -11,7 +11,7 @@ easy to use animations with powerful orchestration for React.js 🧙✨
 It's all about **animation** 🧙✨ - it can help with:
 
 - [Moving an element](https://yubabajs.com/move) from one position to another
-- [Revealing elements](https://yubabajs.com/reveal-move) like you see above
+- [Revealing elements](https://yubabajs.com/focal-reveal-move) like you see above
 - [Supporting animations](https://yubabajs.com/supporting-animations) by obstructing elements in view; and
 - [Hiding children elements](https://yubabajs.com/advanced-usage#delay-showing-content-until-all-animations-have-finished) until animations have completed to trick users 🤫
 - [Orchestrating](https://yubabajs.com/advanced-usage#wait-for-the-previous-animation-to-finish-before-starting-the-next) when animations should happen and [in what order](https://yubabajs.com/advanced-usage#controlling-in-what-order-animations-should-execute)
diff --git a/packages/yubaba/src/__docs__/1-introduction/docs.mdx b/packages/yubaba/src/__docs__/1-introduction/docs.mdx
index 719aeaa..f48e95f 100644
--- a/packages/yubaba/src/__docs__/1-introduction/docs.mdx
+++ b/packages/yubaba/src/__docs__/1-introduction/docs.mdx
@@ -19,7 +19,7 @@ easy to use animations with powerful orchestration for React.js 🧙✨
 It's all about **animation** 🧙✨ - it can help with:
 
 - [Moving an element](/move) from one position to another
-- [Revealing elements](/reveal-move) like you see above
+- [Revealing elements](/focal-reveal-move) like you see above
 - [Supporting animations](/supporting-animations) by obstructing elements in view; and
 - [Hiding children elements](/advanced-usage#delay-showing-content-until-all-animations-have-finished) until animations have completed to trick users 🤫
 - [Orchestrating](/advanced-usage#wait-for-the-previous-animation-to-finish-before-starting-the-next) when animations should happen and [in what order](/advanced-usage#controlling-in-what-order-animations-should-execute)
diff --git a/packages/yubaba/src/__docs__/3-advanced-usage/EmailChain.tsx b/packages/yubaba/src/__docs__/3-advanced-usage/EmailChain.tsx
index 0be1eec..55ef401 100644
--- a/packages/yubaba/src/__docs__/3-advanced-usage/EmailChain.tsx
+++ b/packages/yubaba/src/__docs__/3-advanced-usage/EmailChain.tsx
@@ -21,7 +21,7 @@ import {
 } from '@material-ui/core';
 import * as Styled from './styled';
 import { WrappedBaba as Baba } from '../../Baba';
-import RevealMove from '../../animations/RevealMove';
+import FocalRevealMove from '../../animations/FocalRevealMove';
 import ConcealMove from '../../animations/ConcealMove';
 import FocalTarget from '../../FocalTarget';
 
@@ -41,7 +41,7 @@ const EmailChain = () => {
         {Styled.data.map((email, index) => (
           <React.Fragment key={index}>
             <Baba name={`card-${index}`} in={props.in}>
-              <RevealMove duration={600}>
+              <FocalRevealMove duration={600}>
                 {baba => (
                   <div {...baba}>
                     <ListItem button>
@@ -57,7 +57,7 @@ const EmailChain = () => {
                     </ListItem>
                   </div>
                 )}
-              </RevealMove>
+              </FocalRevealMove>
             </Baba>
             <Divider variant="inset" />
           </React.Fragment>
diff --git a/packages/yubaba/src/__docs__/3-advanced-usage/docs.mdx b/packages/yubaba/src/__docs__/3-advanced-usage/docs.mdx
index f63b86d..2d378b7 100644
--- a/packages/yubaba/src/__docs__/3-advanced-usage/docs.mdx
+++ b/packages/yubaba/src/__docs__/3-advanced-usage/docs.mdx
@@ -29,7 +29,7 @@ import * as Styled from './styled';
 import { WrappedBaba as Baba } from '../../Baba';
 import { WrappedBabaManager as BabaManager } from '../../BabaManager';
 import CircleExpand from '../../animations/CircleExpand';
-import RevealMove from '../../animations/RevealMove';
+import FocalRevealMove from '../../animations/FocalRevealMove';
 import ConcealMove from '../../animations/ConcealMove';
 import FocalTarget from '../../FocalTarget';
 import Move from '../../animations/Move';
diff --git a/packages/yubaba/src/__docs__/focal-animations/docs.mdx b/packages/yubaba/src/__docs__/focal-animations/docs.mdx
index c2c78bf..8f25e40 100644
--- a/packages/yubaba/src/__docs__/focal-animations/docs.mdx
+++ b/packages/yubaba/src/__docs__/focal-animations/docs.mdx
@@ -9,5 +9,5 @@ menu: Focal animations
 The bread and butter of `yubaba` 🍞.
 
 Focal animations are all about a single focal element that we want to transition from one state to another.
-While multiple elements _may_ be utilised in a focal animation (e.g. how [RevealMove](/reveal-move) works),
+While multiple elements _may_ be utilised in a focal animation (e.g. how [FocalRevealMove](/focal-reveal-move) works),
 the animations are always interested in a single focal element.
diff --git a/packages/yubaba/src/animations/FocalReveal/__docz__/docs.mdx b/packages/yubaba/src/animations/FocalReveal/__docz__/docs.mdx
new file mode 100644
index 0000000..180767b
--- /dev/null
+++ b/packages/yubaba/src/animations/FocalReveal/__docz__/docs.mdx
@@ -0,0 +1,27 @@
+---
+name: FocalReveal
+route: /focal-reveal
+menu: Focal animations
+---
+
+import { Playground, PropsTable } from 'docz';
+import * as Common from 'yubaba-common';
+import Reveal from '../index';
+
+# FocalReveal
+
+Will reveal a container around a marked focal element using `width` and `height`,
+or alternatively `clip-path`.
+See [FocalRevealMove](/focal-reveal-move) for what this looks like.
+
+This component requires the use of a [FocalTarget](/focal-target) to mark the focal element.
+
+## Usage
+
+```js
+import { Reveal } from 'yubaba';
+```
+
+## Props
+
+<PropsTable of={Reveal} />
diff --git a/packages/yubaba/src/animations/FocalReveal/index.tsx b/packages/yubaba/src/animations/FocalReveal/index.tsx
new file mode 100644
index 0000000..a119510
--- /dev/null
+++ b/packages/yubaba/src/animations/FocalReveal/index.tsx
@@ -0,0 +1,164 @@
+import * as React from 'react';
+import { css } from 'emotion';
+import Collector, {
+  CollectorChildrenProps,
+  AnimationCallback,
+  CollectorActions,
+} from '../../Collector';
+import { standard } from '../../lib/curves';
+import { combine } from '../../lib/style';
+import { dynamic } from '../../lib/duration';
+import { Duration } from '../types';
+
+export interface FocalRevealProps extends CollectorChildrenProps {
+  /**
+   * How long the animation should take over {duration}ms.
+   */
+  duration: Duration;
+
+  /**
+   * zIndex to be applied to the moving element.
+   */
+  zIndex?: number;
+
+  /**
+   * Timing function to be used in the transition.
+   */
+  timingFunction: string;
+
+  /**
+   * Set to false to disable transforming the children to the X position of the focal element.
+   * Defaults to true.
+   */
+  childrenTransformX: boolean;
+
+  /**
+   * Set to false to disable transforming the children to the Y position of the focal element.
+   * Defaults to `true`.
+   */
+  childrenTransformY: boolean;
+
+  /**
+   * Will transition using clip-path over height and width.
+   * This results in a more resilient transition since page flow isn't affected at the cost of browser support.
+   * See: https://caniuse.com/#feat=css-clip-path
+   */
+  useClipPath?: boolean;
+}
+
+export default class FocalReveal extends React.Component<FocalRevealProps> {
+  static defaultProps = {
+    duration: 'dynamic',
+    timingFunction: standard(),
+    childrenTransformX: true,
+    childrenTransformY: true,
+  };
+
+  beforeAnimate: AnimationCallback = (data, onFinish, setChildProps) => {
+    if (!data.destination.focalTargetElementBoundingBox) {
+      throw new Error(`yubaba
+<FocalTarget /> was not found, if you haven't defined one make sure to add one as a descendant of your target Baba.`);
+    }
+
+    const { childrenTransformX, childrenTransformY, useClipPath } = this.props;
+
+    const offsetChildrenX = childrenTransformX
+      ? data.destination.focalTargetElementBoundingBox.location.left -
+        data.destination.elementBoundingBox.location.left
+      : 0;
+    const offsetChildrenY = childrenTransformY
+      ? data.destination.focalTargetElementBoundingBox.location.top -
+        data.destination.elementBoundingBox.location.top
+      : 0;
+
+    const revealStyles = useClipPath
+      ? {
+          clipPath: `inset(0 ${data.destination.elementBoundingBox.size.width -
+            data.destination.focalTargetElementBoundingBox.size.width}px ${data.destination
+            .elementBoundingBox.size.height -
+            data.destination.focalTargetElementBoundingBox.size.height}px 0)`,
+        }
+      : {
+          height: data.destination.focalTargetElementBoundingBox.size.height,
+          width: data.destination.focalTargetElementBoundingBox.size.width,
+        };
+
+    setChildProps({
+      style: prevStyles =>
+        data.destination.focalTargetElementBoundingBox
+          ? {
+              ...prevStyles,
+              ...revealStyles,
+              opacity: 1,
+              visibility: 'visible',
+              willChange: combine('height, width, clip-path')(prevStyles.willChange),
+              overflow: 'hidden',
+            }
+          : undefined,
+      className: () =>
+        data.destination.focalTargetElementBoundingBox
+          ? css({
+              '> *': {
+                transform: `translate3d(-${offsetChildrenX}px, -${offsetChildrenY}px, 0)`,
+              },
+            })
+          : undefined,
+    });
+
+    onFinish();
+  };
+
+  animate: AnimationCallback = (data, onFinish, setChildProps) => {
+    const { timingFunction, duration, useClipPath } = this.props;
+    const calculatedDuration =
+      duration === 'dynamic'
+        ? dynamic(data.origin.elementBoundingBox, data.destination.elementBoundingBox)
+        : duration;
+
+    const revealStyles = useClipPath
+      ? {
+          clipPath: 'inset(0 0 0 0)',
+        }
+      : {
+          height: data.destination.elementBoundingBox.size.height,
+          width: data.destination.elementBoundingBox.size.width,
+        };
+
+    setChildProps({
+      style: prevStyles => ({
+        ...prevStyles,
+        ...revealStyles,
+        transition: combine(
+          `height ${calculatedDuration}ms ${timingFunction}, width ${calculatedDuration}ms ${timingFunction}, clip-path ${calculatedDuration}ms ${timingFunction}`
+        )(prevStyles.transition),
+      }),
+      className: () =>
+        css({
+          '> *': {
+            transform: `translate3d(0, 0, 0)`,
+            transition: `transform ${calculatedDuration}ms ${timingFunction}`,
+          },
+        }),
+    });
+
+    setTimeout(() => onFinish(), calculatedDuration);
+  };
+
+  render() {
+    const { children } = this.props;
+
+    return (
+      <Collector
+        data={{
+          action: CollectorActions.animation,
+          payload: {
+            beforeAnimate: this.beforeAnimate,
+            animate: this.animate,
+          },
+        }}
+      >
+        {children}
+      </Collector>
+    );
+  }
+}
diff --git a/packages/yubaba/src/animations/RevealMove/__docs__/docs.mdx b/packages/yubaba/src/animations/FocalRevealMove/__docs__/docs.mdx
similarity index 96%
rename from packages/yubaba/src/animations/RevealMove/__docs__/docs.mdx
rename to packages/yubaba/src/animations/FocalRevealMove/__docs__/docs.mdx
index 7d53248..95a3daf 100644
--- a/packages/yubaba/src/animations/RevealMove/__docs__/docs.mdx
+++ b/packages/yubaba/src/animations/FocalRevealMove/__docs__/docs.mdx
@@ -1,6 +1,6 @@
 ---
-name: RevealMove
-route: /reveal-move
+name: FocalRevealMove
+route: /focal-reveal-move
 menu: Focal animations
 ---
 
@@ -20,14 +20,14 @@ import PlayButton from '@material-ui/icons/PlayArrow';
 import BackIcon from '@material-ui/icons/ArrowBack';
 import MoreVert from '@material-ui/icons/MoreVert';
 import { lighten } from 'polished';
-import RevealMove from '../index';
+import FocalRevealMove from '../index';
 import Noop from '../../Noop';
 import Baba from '../../../Baba';
 import FocalTarget from '../../../FocalTarget';
 import * as Styled from './styled';
 import albumArt from './images/halcyda.png';
 
-# RevealMove
+# FocalRevealMove
 
 Is a composite animation of Reveal and [Move](/move).
 Useful for transitioning from a parent to a child,
@@ -37,20 +37,20 @@ Requires the use of the [FocalTarget](/focal-target) component to specify the fo
 ## Usage
 
 ```js
-import Baba, { RevealMove, FocalTarget } from 'yubaba';
+import Baba, { FocalRevealMove, FocalTarget } from 'yubaba';
 ```
 
 <Playground>
   {() => {
     const revealingImage = ({ albumArt }) => (
       <Baba name="reveal-move">
-        <RevealMove useClipPath>
+        <FocalRevealMove useClipPath>
           {({ ref, style }) => (
             <Link to="/details">
               <Styled.BackgroundImage src={albumArt} style={style} innerRef={ref} />
             </Link>
           )}
-        </RevealMove>
+        </FocalRevealMove>
       </Baba>
     );
 
@@ -211,7 +211,7 @@ import Baba, { RevealMove, FocalTarget } from 'yubaba';
 
 ## Props
 
-<PropsTable of={RevealMove} />
+<PropsTable of={FocalRevealMove} />
 
 ## Caveats
 
diff --git a/packages/yubaba/src/animations/RevealMove/__docs__/images/halcyda.png b/packages/yubaba/src/animations/FocalRevealMove/__docs__/images/halcyda.png
similarity index 100%
rename from packages/yubaba/src/animations/RevealMove/__docs__/images/halcyda.png
rename to packages/yubaba/src/animations/FocalRevealMove/__docs__/images/halcyda.png
diff --git a/packages/yubaba/src/animations/RevealMove/__docs__/styled.tsx b/packages/yubaba/src/animations/FocalRevealMove/__docs__/styled.tsx
similarity index 100%
rename from packages/yubaba/src/animations/RevealMove/__docs__/styled.tsx
rename to packages/yubaba/src/animations/FocalRevealMove/__docs__/styled.tsx
diff --git a/packages/yubaba/src/animations/RevealMove/index.tsx b/packages/yubaba/src/animations/FocalRevealMove/index.tsx
similarity index 55%
rename from packages/yubaba/src/animations/RevealMove/index.tsx
rename to packages/yubaba/src/animations/FocalRevealMove/index.tsx
index 4186c33..c405654 100644
--- a/packages/yubaba/src/animations/RevealMove/index.tsx
+++ b/packages/yubaba/src/animations/FocalRevealMove/index.tsx
@@ -1,21 +1,21 @@
 import * as React from 'react';
-import Reveal, { RevealProps } from '../Reveal';
+import FocalReveal, { FocalRevealProps } from '../FocalReveal';
 import Move, { MoveProps } from '../Move';
 
-export default class RevealMove extends React.Component<RevealProps & MoveProps> {
+export default class FocalRevealMove extends React.Component<FocalRevealProps & MoveProps> {
   static defaultProps = {
-    ...Reveal.defaultProps,
+    ...FocalReveal.defaultProps,
     ...Move.defaultProps,
   };
 
   render() {
     const { children, ...props } = this.props;
     return (
-      <Reveal {...props}>
+      <FocalReveal {...props}>
         <Move {...props} useFocalTarget>
           {children}
         </Move>
-      </Reveal>
+      </FocalReveal>
     );
   }
 }
diff --git a/packages/yubaba/src/animations/RevealMove/stories.tsx b/packages/yubaba/src/animations/FocalRevealMove/stories.tsx
similarity index 97%
rename from packages/yubaba/src/animations/RevealMove/stories.tsx
rename to packages/yubaba/src/animations/FocalRevealMove/stories.tsx
index 7326ffa..35bac2b 100644
--- a/packages/yubaba/src/animations/RevealMove/stories.tsx
+++ b/packages/yubaba/src/animations/FocalRevealMove/stories.tsx
@@ -5,7 +5,7 @@ import { Toggler } from 'yubaba-common';
 import Baba from '../../Baba';
 import Noop from '../Noop';
 import Target from '../../FocalTarget';
-import RevealMove from './index';
+import FocalRevealMove from './index';
 
 type Appearance = 'left' | 'center' | 'right';
 
@@ -93,7 +93,7 @@ const build = (
         {shown || (
           <List appearance={appearance}>
             <Baba name={`reveal-move-${orientation}-${appearance}-${useClipPath}`}>
-              <RevealMove
+              <FocalRevealMove
                 childrenTransformX={useClipPath || orientation === 'vertical'}
                 childrenTransformY={useClipPath || orientation === 'horizontal'}
                 transformX={useClipPath || appearance !== 'center'}
@@ -109,7 +109,7 @@ const build = (
                     height={height}
                   />
                 )}
-              </RevealMove>
+              </FocalRevealMove>
             </Baba>
           </List>
         )}
@@ -146,7 +146,7 @@ const build = (
   </Toggler>
 );
 
-storiesOf('yubaba/RevealMove', module)
+storiesOf('yubaba/FocalRevealMove', module)
   .add('RevealHeight/Left', () => build(200, 200, 'vertical', 'left'))
   .add('RevealWidth/Left', () => build(200, 200, 'horizontal', 'left'))
   .add('RevealBoth/Left', () => build(200, 200, 'both', 'left'))
diff --git a/packages/yubaba/src/animations/Move/index.tsx b/packages/yubaba/src/animations/Move/index.tsx
index ac63b96..f4843e8 100644
--- a/packages/yubaba/src/animations/Move/index.tsx
+++ b/packages/yubaba/src/animations/Move/index.tsx
@@ -29,7 +29,7 @@ export interface MoveProps extends CollectorChildrenProps {
 
   /**
    * Will use <FocalTarget /> size and location for destination transform calculation.
-   * Internally this is used for the <RevealMove /> animation.
+   * Internally this is used for the <FocalRevealMove /> animation.
    */
   useFocalTarget: boolean;
 
diff --git a/packages/yubaba/src/animations/Reveal/__docz__/docs.mdx b/packages/yubaba/src/animations/Reveal/__docz__/docs.mdx
index becb3fd..1cd34f9 100644
--- a/packages/yubaba/src/animations/Reveal/__docz__/docs.mdx
+++ b/packages/yubaba/src/animations/Reveal/__docz__/docs.mdx
@@ -1,6 +1,6 @@
 ---
-name: SimpleReveal
-route: /simple-reveal
+name: Reveal
+route: /reveal
 menu: Focal animations
 ---
 
@@ -10,11 +10,7 @@ import Reveal from '../index';
 
 # Reveal
 
-Will reveal a container around a marked focal element using `width` and `height`,
-or alternatively `clip-path`.
-See [RevealMove](/reveal-move) for what this looks like.
-
-This component requires the use of a [FocalTarget](/focal-target) to mark the focal element.
+Will reveal the destination element from the origin size to the destination size using `clip-path` only which will not work for IE11.
 
 ## Usage
 
@@ -25,3 +21,10 @@ import { Reveal } from 'yubaba';
 ## Props
 
 <PropsTable of={Reveal} />
+
+## Caveats
+
+Be careful of collapsing margins when utilising this animation,
+they will make the destination element jump around,
+probably.
+If you're seeing some odd behavior - maybe try a flex container instead.
diff --git a/packages/yubaba/src/animations/Reveal/index.tsx b/packages/yubaba/src/animations/Reveal/index.tsx
index 63cbbc3..7a4f478 100644
--- a/packages/yubaba/src/animations/Reveal/index.tsx
+++ b/packages/yubaba/src/animations/Reveal/index.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { css } from 'emotion';
 import Collector, {
   CollectorChildrenProps,
   AnimationCallback,
@@ -12,133 +11,75 @@ import { Duration } from '../types';
 
 export interface RevealProps extends CollectorChildrenProps {
   /**
+   * Takes either "dynamic" or a number in ms.
    * How long the animation should take over {duration}ms.
+   * Defaults to "dynamic".
    */
   duration: Duration;
 
-  /**
-   * zIndex to be applied to the moving element.
-   */
-  zIndex?: number;
-
   /**
    * Timing function to be used in the transition.
    */
   timingFunction: string;
 
   /**
-   * Set to false to disable transforming the children to the X position of the focal element.
-   * Defaults to true.
-   */
-  childrenTransformX: boolean;
-
-  /**
-   * Set to false to disable transforming the children to the Y position of the focal element.
-   * Defaults to `true`.
-   */
-  childrenTransformY: boolean;
-
-  /**
-   * Will transition using clip-path over height and width.
-   * This results in a more resilient transition since page flow isn't affected at the cost of browser support.
-   * See: https://caniuse.com/#feat=css-clip-path
+   * This will increase (or decrease) the size of the clip-path box.
+   * Use with caution.
+   * [top, right, bottom, left]
    */
-  useClipPath?: boolean;
+  offset: [number, number, number, number];
 }
 
 export default class Reveal extends React.Component<RevealProps> {
   static defaultProps = {
     duration: 'dynamic',
     timingFunction: standard(),
-    childrenTransformX: true,
-    childrenTransformY: true,
+    offset: [0, 0, 0, 0],
   };
 
   beforeAnimate: AnimationCallback = (data, onFinish, setChildProps) => {
-    if (!data.destination.focalTargetElementBoundingBox) {
-      throw new Error(`yubaba
-<FocalTarget /> was not found, if you haven't defined one make sure to add one as a descendant of your target Baba.`);
-    }
-
-    const { childrenTransformX, childrenTransformY, useClipPath } = this.props;
-
-    const offsetChildrenX = childrenTransformX
-      ? data.destination.focalTargetElementBoundingBox.location.left -
-        data.destination.elementBoundingBox.location.left
-      : 0;
-    const offsetChildrenY = childrenTransformY
-      ? data.destination.focalTargetElementBoundingBox.location.top -
-        data.destination.elementBoundingBox.location.top
-      : 0;
+    const [topOffset, rightOffset, bottomOffset, leftOffset] = this.props.offset;
 
-    const revealStyles = useClipPath
-      ? {
-          clipPath: `inset(0 ${data.destination.elementBoundingBox.size.width -
-            data.destination.focalTargetElementBoundingBox.size.width}px ${data.destination
-            .elementBoundingBox.size.height -
-            data.destination.focalTargetElementBoundingBox.size.height}px 0)`,
-        }
-      : {
-          height: data.destination.focalTargetElementBoundingBox.size.height,
-          width: data.destination.focalTargetElementBoundingBox.size.width,
-        };
+    const right =
+      data.destination.elementBoundingBox.size.width -
+      data.origin.elementBoundingBox.size.width +
+      rightOffset;
+    const bottom =
+      data.destination.elementBoundingBox.size.height -
+      data.origin.elementBoundingBox.size.height +
+      bottomOffset;
 
     setChildProps({
       style: prevStyles =>
-        data.destination.focalTargetElementBoundingBox
+        data.origin.elementBoundingBox
           ? {
               ...prevStyles,
-              ...revealStyles,
+              clipPath: `inset(${topOffset}px ${right}px ${bottom}px ${leftOffset}px)`,
               opacity: 1,
               visibility: 'visible',
-              willChange: combine('height, width, clip-path')(prevStyles.willChange),
-              overflow: 'hidden',
+              willChange: combine('clip-path')(prevStyles.willChange),
             }
           : undefined,
-      className: () =>
-        data.destination.focalTargetElementBoundingBox
-          ? css({
-              '> *': {
-                transform: `translate3d(-${offsetChildrenX}px, -${offsetChildrenY}px, 0)`,
-              },
-            })
-          : undefined,
     });
 
     onFinish();
   };
 
   animate: AnimationCallback = (data, onFinish, setChildProps) => {
-    const { timingFunction, duration, useClipPath } = this.props;
+    const { timingFunction, duration } = this.props;
     const calculatedDuration =
       duration === 'dynamic'
         ? dynamic(data.origin.elementBoundingBox, data.destination.elementBoundingBox)
         : duration;
 
-    const revealStyles = useClipPath
-      ? {
-          clipPath: 'inset(0 0 0 0)',
-        }
-      : {
-          height: data.destination.elementBoundingBox.size.height,
-          width: data.destination.elementBoundingBox.size.width,
-        };
-
     setChildProps({
       style: prevStyles => ({
         ...prevStyles,
-        ...revealStyles,
-        transition: combine(
-          `height ${calculatedDuration}ms ${timingFunction}, width ${calculatedDuration}ms ${timingFunction}, clip-path ${calculatedDuration}ms ${timingFunction}`
-        )(prevStyles.transition),
+        clipPath: 'inset(0px)',
+        transition: combine(`clip-path ${calculatedDuration}ms ${timingFunction}`)(
+          prevStyles.transition
+        ),
       }),
-      className: () =>
-        css({
-          '> *': {
-            transform: `translate3d(0, 0, 0)`,
-            transition: `transform ${calculatedDuration}ms ${timingFunction}`,
-          },
-        }),
     });
 
     setTimeout(() => onFinish(), calculatedDuration);
diff --git a/packages/yubaba/src/animations/Reveal/stories.tsx b/packages/yubaba/src/animations/Reveal/stories.tsx
index e69de29..2cd0919 100644
--- a/packages/yubaba/src/animations/Reveal/stories.tsx
+++ b/packages/yubaba/src/animations/Reveal/stories.tsx
@@ -0,0 +1,46 @@
+/* eslint-disable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */
+import * as React from 'react';
+import { storiesOf } from '@storybook/react';
+import styled from 'styled-components';
+import { Toggler } from 'yubaba-common';
+import { WrappedBaba as Baba } from '../../Baba';
+import Reveal from './index';
+
+const Container = styled.div`
+  margin: 0.67rem 0;
+  background-color: #ccc;
+`;
+
+const Header = styled.h1`
+  margin: 0.67rem 0;
+`;
+
+storiesOf('yubaba/Reveal', module).add('ChildrenHeightChanging', () => (
+  <Container>
+    <Toggler>
+      {toggler => (
+        <Baba name="simple-reveal" key={`${toggler.shown}`}>
+          <Reveal>
+            {baba => (
+              <div {...baba}>
+                {toggler.shown ? (
+                  <>
+                    <Header>Details</Header>
+                    <p>Many details are revealed here.</p>
+                    <button type="button" onClick={() => toggler.toggle()}>
+                      Hide contents
+                    </button>
+                  </>
+                ) : (
+                  <button type="button" onClick={() => toggler.toggle()}>
+                    View contents
+                  </button>
+                )}
+              </div>
+            )}
+          </Reveal>
+        </Baba>
+      )}
+    </Toggler>
+  </Container>
+));
diff --git a/packages/yubaba/src/animations/RevealReshapingContainer/index.tsx b/packages/yubaba/src/animations/RevealReshapingContainer/index.tsx
index 64482df..26bea11 100644
--- a/packages/yubaba/src/animations/RevealReshapingContainer/index.tsx
+++ b/packages/yubaba/src/animations/RevealReshapingContainer/index.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import Baba from '../../Baba';
 import { CollectorChildrenAsFunction } from '../../Collector';
 import ReshapingContainer, { ReshapingContainerProps } from '../ReshapingContainer';
-import SimpleReveal from '../SimpleReveal';
+import Reveal from '../Reveal';
 
 interface RevealReshapingContainerProps extends ReshapingContainerProps {
   /**
@@ -89,7 +89,7 @@ export default class RevealReshapingContainer extends React.PureComponent<
       <ReshapingContainer {...this.props}>
         {reshaping => (
           <Baba name={`${id}-children`} key={this.state.renderCount}>
-            <SimpleReveal
+            <Reveal
               duration={duration}
               offset={this.getInversePaddingParts()}
               timingFunction={timingFunction}
@@ -103,7 +103,7 @@ export default class RevealReshapingContainer extends React.PureComponent<
                   },
                 })
               }
-            </SimpleReveal>
+            </Reveal>
           </Baba>
         )}
       </ReshapingContainer>
diff --git a/packages/yubaba/src/animations/SimpleReveal/__docz__/docs.mdx b/packages/yubaba/src/animations/SimpleReveal/__docz__/docs.mdx
deleted file mode 100644
index 67ba4bb..0000000
--- a/packages/yubaba/src/animations/SimpleReveal/__docz__/docs.mdx
+++ /dev/null
@@ -1,30 +0,0 @@
----
-name: SimpleReveal
-route: /simple-reveal
-menu: Focal animations
----
-
-import { Playground, PropsTable } from 'docz';
-import * as Common from 'yubaba-common';
-import SimpleReveal from '../index';
-
-# SimpleReveal
-
-Will reveal the destination element from the origin size to the destination size using `clip-path` only which will not work for IE11.
-
-## Usage
-
-```js
-import { SimpleReveal } from 'yubaba';
-```
-
-## Props
-
-<PropsTable of={SimpleReveal} />
-
-## Caveats
-
-Be careful of collapsing margins when utilising this animation,
-they will make the destination element jump around,
-probably.
-If you're seeing some odd behavior - maybe try a flex container instead.
diff --git a/packages/yubaba/src/animations/SimpleReveal/index.tsx b/packages/yubaba/src/animations/SimpleReveal/index.tsx
deleted file mode 100644
index 7a4f478..0000000
--- a/packages/yubaba/src/animations/SimpleReveal/index.tsx
+++ /dev/null
@@ -1,105 +0,0 @@
-import * as React from 'react';
-import Collector, {
-  CollectorChildrenProps,
-  AnimationCallback,
-  CollectorActions,
-} from '../../Collector';
-import { standard } from '../../lib/curves';
-import { combine } from '../../lib/style';
-import { dynamic } from '../../lib/duration';
-import { Duration } from '../types';
-
-export interface RevealProps extends CollectorChildrenProps {
-  /**
-   * Takes either "dynamic" or a number in ms.
-   * How long the animation should take over {duration}ms.
-   * Defaults to "dynamic".
-   */
-  duration: Duration;
-
-  /**
-   * Timing function to be used in the transition.
-   */
-  timingFunction: string;
-
-  /**
-   * This will increase (or decrease) the size of the clip-path box.
-   * Use with caution.
-   * [top, right, bottom, left]
-   */
-  offset: [number, number, number, number];
-}
-
-export default class Reveal extends React.Component<RevealProps> {
-  static defaultProps = {
-    duration: 'dynamic',
-    timingFunction: standard(),
-    offset: [0, 0, 0, 0],
-  };
-
-  beforeAnimate: AnimationCallback = (data, onFinish, setChildProps) => {
-    const [topOffset, rightOffset, bottomOffset, leftOffset] = this.props.offset;
-
-    const right =
-      data.destination.elementBoundingBox.size.width -
-      data.origin.elementBoundingBox.size.width +
-      rightOffset;
-    const bottom =
-      data.destination.elementBoundingBox.size.height -
-      data.origin.elementBoundingBox.size.height +
-      bottomOffset;
-
-    setChildProps({
-      style: prevStyles =>
-        data.origin.elementBoundingBox
-          ? {
-              ...prevStyles,
-              clipPath: `inset(${topOffset}px ${right}px ${bottom}px ${leftOffset}px)`,
-              opacity: 1,
-              visibility: 'visible',
-              willChange: combine('clip-path')(prevStyles.willChange),
-            }
-          : undefined,
-    });
-
-    onFinish();
-  };
-
-  animate: AnimationCallback = (data, onFinish, setChildProps) => {
-    const { timingFunction, duration } = this.props;
-    const calculatedDuration =
-      duration === 'dynamic'
-        ? dynamic(data.origin.elementBoundingBox, data.destination.elementBoundingBox)
-        : duration;
-
-    setChildProps({
-      style: prevStyles => ({
-        ...prevStyles,
-        clipPath: 'inset(0px)',
-        transition: combine(`clip-path ${calculatedDuration}ms ${timingFunction}`)(
-          prevStyles.transition
-        ),
-      }),
-    });
-
-    setTimeout(() => onFinish(), calculatedDuration);
-  };
-
-  render() {
-    const { children } = this.props;
-
-    return (
-      <Collector
-        data={{
-          action: CollectorActions.animation,
-          payload: {
-            beforeAnimate: this.beforeAnimate,
-            animate: this.animate,
-          },
-        }}
-      >
-        {children}
-      </Collector>
-    );
-  }
-}
diff --git a/packages/yubaba/src/animations/SimpleReveal/stories.tsx b/packages/yubaba/src/animations/SimpleReveal/stories.tsx
deleted file mode 100644
index c1eba28..0000000
--- a/packages/yubaba/src/animations/SimpleReveal/stories.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-/* eslint-disable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */
-import * as React from 'react';
-import { storiesOf } from '@storybook/react';
-import styled from 'styled-components';
-import { Toggler } from 'yubaba-common';
-import { WrappedBaba as Baba } from '../../Baba';
-import SimpleReveal from './index';
-
-const Container = styled.div`
-  margin: 0.67rem 0;
-  background-color: #ccc;
-`;
-
-const Header = styled.h1`
-  margin: 0.67rem 0;
-`;
-
-storiesOf('yubaba/SimpleReveal', module).add('ChildrenHeightChanging', () => (
-  <Container>
-    <Toggler>
-      {toggler => (
-        <Baba name="simple-reveal" key={`${toggler.shown}`}>
-          <SimpleReveal>
-            {baba => (
-              <div {...baba}>
-                {toggler.shown ? (
-                  <>
-                    <Header>Details</Header>
-                    <p>Many details are revealed here.</p>
-                    <button type="button" onClick={() => toggler.toggle()}>
-                      Hide contents
-                    </button>
-                  </>
-                ) : (
-                  <button type="button" onClick={() => toggler.toggle()}>
-                    View contents
-                  </button>
-                )}
-              </div>
-            )}
-          </SimpleReveal>
-        </Baba>
-      )}
-    </Toggler>
-  </Container>
-));
diff --git a/packages/yubaba/src/index.tsx b/packages/yubaba/src/index.tsx
index 9d4ecdc..8c1b43b 100644
--- a/packages/yubaba/src/index.tsx
+++ b/packages/yubaba/src/index.tsx
@@ -11,12 +11,12 @@ export { default as Move } from './animations/Move';
 export { default as Swipe } from './animations/Swipe';
 export { default as CircleExpand } from './animations/CircleExpand';
 export { default as CircleShrink } from './animations/CircleShrink';
-export { default as Reveal } from './animations/Reveal';
-export { default as RevealMove } from './animations/RevealMove';
+export { default as FocalReveal } from './animations/FocalReveal';
+export { default as RevealMove, default as FocalRevealMove } from './animations/FocalRevealMove';
 export { default as ConcealMove } from './animations/ConcealMove';
 export { default as ReshapingContainer } from './animations/ReshapingContainer';
 export { default as RevealReshapingContainer } from './animations/RevealReshapingContainer';
-export { default as SimpleReveal } from './animations/SimpleReveal';
+export { default as Reveal } from './animations/Reveal';
 
 // Utility stuff
 export * from './Collector';