chore: updates readme and docs

Author: itsdouges

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

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

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.

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.

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.

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 }) => (

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
 

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
 

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 {

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} />