Skip to content
This repository was archived by the owner on Apr 14, 2020. It is now read-only.

Commit f58bef8

Browse files
itsdougesitsdouges
committed
chore: adds examples for other libraries, updates docz theme
1 parent 63eb8ae commit f58bef8

13 files changed

Lines changed: 458 additions & 121 deletions

File tree

‎README.md‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,9 @@
1212

1313
It's all about ✨**animation over state transitions** ✨it can help with:
1414

15+
- 📴 Enabling animations to be possible between disconnected leaf nodes in the React tree
1516
- 🚚 [Moving an element](https://yubabajs.com/move) from one location to another
1617
- 💨 [Revealing elements](https://yubabajs.com/focal-reveal-move) inside another element
17-
- 📴 Enabling animations to be possible between disconnected leaf nodes in the React tree
1818
- 👓 [Supporting animations](https://yubabajs.com/supporting-animations) by obstructing elements in view
1919
- 🤫 [Hiding children elements](https://yubabajs.com/advanced-usage#delay-showing-content-until-all-animations-have-finished) until animations have completed to trick users
2020
- 🔢 [Orchestrating](https://yubabajs.com/advanced-usage#wait-for-the-previous-animation-to-finish-before-starting-the-next) when animations should start and [in what order](https://yubabajs.com/advanced-usage#controlling-in-what-order-animations-should-execute)
@@ -35,8 +35,10 @@ or
3535
yarn add yubaba react@^16.4.x react-dom@^16.4.x emotion@^10.x.x
3636
```
3737

38-
[Function as children](https://reactpatterns.com/#function-as-children) is a common pattern here.
39-
The most basic usage could animate an element between `small` and `large` states.
38+
> **Tip -** Both es and commonjs modules are provided in the package.
39+
> Make sure to consume the es modules for their tree shaking ability!
40+
41+
## Usage
4042

4143
```js
4244
import Baba, { Move } from 'yubaba';

‎doczrc.js‎

Lines changed: 76 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,10 @@
11
const pkg = require('./packages/yubaba/package.json');
2+
const { css } = require('styled-components'); // eslint-disable-line
3+
4+
const primary = 'rgb(133, 47, 255)';
5+
const altPrimary = 'rgba(200, 57, 236, 1)';
6+
const primaryText = 'rgba(255, 255, 255, 0.95)';
7+
const background = `linear-gradient(135deg, ${altPrimary} 25%, ${primary} 100%)`;
28

39
module.exports = {
410
title: 'yubaba 🧙✨',
@@ -10,7 +16,76 @@ module.exports = {
1016
filterComponents: files => files.filter(filepath => /([^d]\.tsx?)$/.test(filepath)),
1117
themeConfig: {
1218
colors: {
13-
primary: '#468cee',
19+
primary,
20+
sidebarBg: background,
21+
sidebarText: primaryText,
22+
sidebarPrimary: primaryText,
23+
sidebarBorder: 'transparent',
24+
link: primary,
25+
},
26+
styles: {
27+
body: css`
28+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
29+
'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
30+
font-size: 16px;
31+
line-height: 1.6;
32+
33+
input::placeholder {
34+
color: rgba(255, 255, 255, 0.7);
35+
}
36+
37+
div[class^='Logo__Wrapper-'] {
38+
::before {
39+
display: none;
40+
}
41+
}
42+
43+
div[class^='Sidebar__Footer-'] {
44+
display: none;
45+
}
46+
47+
a[class^='MenuLink__createLink-'] {
48+
font-weight: 400;
49+
50+
:hover,
51+
:focus {
52+
font-weight: 600;
53+
}
54+
}
55+
56+
a[class^='SmallLink__Link'] {
57+
opacity: 0.65;
58+
}
59+
`,
60+
h1: css`
61+
display: inline-block;
62+
margin: 60px 0 20px;
63+
font-size: 48px;
64+
font-weight: 600;
65+
letter-spacing: -0.06em;
66+
color: ${primaryText};
67+
position: relative;
68+
z-index: 1;
69+
70+
:after {
71+
position: absolute;
72+
content: '';
73+
top: 0;
74+
right: 1px;
75+
left: 6px;
76+
bottom: 0;
77+
background: ${background};
78+
transform: skew(-1deg, 1deg);
79+
z-index: -1;
80+
}
81+
`,
82+
h2: css`
83+
margin: 45px 0 15px;
84+
line-height: 1.4em;
85+
font-weight: 500;
86+
font-size: 28px;
87+
letter-spacing: -0.02em;
88+
`,
1489
},
1590
},
1691
};

‎packages/yubaba-common/src/Toggler.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,16 @@ import * as React from 'react';
33
interface Props {
44
interval: boolean;
55
intervalMs: number;
6-
onIntervalSet: (value: string | boolean) => string | boolean;
6+
onIntervalSet: (value: any) => any;
77
children: (props: {
8-
toggle: (value?: string) => void;
9-
set: (value: string) => void;
10-
shown: boolean | string;
8+
toggle: (value?: any) => void;
9+
set: (value: any) => void;
10+
shown: any;
1111
}) => React.ReactNode;
1212
}
1313

1414
interface State {
15-
shown: boolean | string;
15+
shown: any;
1616
}
1717

1818
export default class Toggler extends React.Component<Props, State> {
@@ -45,15 +45,15 @@ export default class Toggler extends React.Component<Props, State> {
4545
this.cleanup();
4646
}
4747

48-
toggle = (value?: string) => {
48+
toggle = (value?: any) => {
4949
this.cleanup();
5050

5151
this.setState(prevState => ({
5252
shown: prevState.shown ? false : value || true,
5353
}));
5454
};
5555

56-
set = (value: string) => {
56+
set = (value: any) => {
5757
this.cleanup();
5858

5959
this.setState({

‎packages/yubaba/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@
3737
"@storybook/react": "5.0.11",
3838
"emotion": "^10.0.9",
3939
"polished": "^3.3.0",
40+
"popmotion": "^8.6.10",
4041
"react": "^16.8.6",
4142
"react-body-classname": "^1.2.0",
4243
"react-dom": "^16.8.6",

‎packages/yubaba/src/__docs__/1-introduction/docs.mdx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,9 +19,9 @@ import * as Styled from './styled';
1919

2020
It's all about **animation** 🧙✨ - it can help with:
2121

22+
- 📴 Enabling animations to be possible between disconnected leaf nodes in the React tree
2223
- 🚚 [Moving an element](/move) from one location to another
2324
- 💨 [Revealing elements](/focal-reveal-move) inside another element
24-
- 📴 Enabling animations to be possible between disconnected leaf nodes in the React tree
2525
- 👓 [Supporting animations](/supporting-animations) by obstructing elements in view
2626
- 🤫 [Hiding children elements](/advanced-usage#delay-showing-content-until-all-animations-have-finished) until animations have completed to trick users
2727
- 🔢 [Orchestrating](/advanced-usage#wait-for-the-previous-animation-to-finish-before-starting-the-next) when animations should start and [in what order](/advanced-usage#controlling-in-what-order-animations-should-execute)
@@ -42,8 +42,10 @@ or
4242
yarn add yubaba react@^16.4.x react-dom@^16.4.x emotion@^10.x.x
4343
```
4444

45-
[Function as children](https://reactpatterns.com/#function-as-children) is a common pattern here.
46-
The most basic usage could animate an element between `small` and `large` states.
45+
> **Tip -** Both es and commonjs modules are provided in the package.
46+
> Make sure to consume the es modules for their tree shaking ability!
47+
48+
## Usage
4749

4850
```js
4951
import Baba, { Move } from 'yubaba';

‎packages/yubaba/src/__docs__/3-advanced-usage/PopmotionMoveRight.tsx‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import React, { useRef } from 'react';
2+
import { styler, tween, easing } from 'popmotion'; // eslint-disable-line import/no-extraneous-dependencies
3+
import Collector, { CollectorActions } from '../../Collector';
4+
5+
const MoveRight = (props: any) => {
6+
const elementStyler = useRef<any>();
7+
8+
return (
9+
<Collector
10+
data={{
11+
action: CollectorActions.animation,
12+
payload: {
13+
beforeAnimate: (elements, onFinish) => {
14+
elementStyler.current = styler(elements.destination.element);
15+
onFinish();
16+
},
17+
animate: (_, onFinish) => {
18+
tween({ from: 0, to: { x: 300 }, duration: 1000, ease: easing.backOut }).start({
19+
complete: () => onFinish(),
20+
update: elementStyler.current.set,
21+
});
22+
},
23+
},
24+
}}
25+
>
26+
{props.children}
27+
</Collector>
28+
);
29+
};
30+
31+
export default MoveRight;

‎packages/yubaba/src/__docs__/3-advanced-usage/docs.mdx‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,16 +29,99 @@ import * as Styled from './styled';
2929
import { WrappedBaba as Baba } from '../../Baba';
3030
import { WrappedVisibilityManager as VisibilityManager } from '../../VisibilityManager';
3131
import CircleExpand from '../../animations/CircleExpand';
32+
import TripeHoverMenu from '../../animations/ReshapingContainer/__docz__/TripeHoverMenu';
3233
import FocalRevealMove from '../../animations/FocalRevealMove';
3334
import FocalConcealMove from '../../animations/FocalConcealMove';
3435
import FocalTarget from '../../FocalTarget';
3536
import Move from '../../animations/Move';
3637
import CircleShrink from '../../animations/CircleShrink';
3738
import ovi from './images/ovechkin.jpg';
3839
import EmailChain from './EmailChain';
40+
import PopmotionMoveRight from './PopmotionMoveRight';
3941

4042
# Advanced usage
4143

44+
## Use with other libaries
45+
46+
Doing everything is a pretty hard gig.
47+
Luckily `yubaba` works great with other libraries!
48+
49+
### [React Transition Group](https://reactcommunity.org/react-transition-group)
50+
51+
Useful when you have an animation you want to happen when an element is entering or leaving,
52+
for example here in our _tripe.com_ menu we use it for just that!
53+
54+
<Playground>
55+
<TripeHoverMenu />
56+
</Playground>
57+
58+
```js
59+
({ isMenuShown, shownMenuId }) => (
60+
<CSSTransition in={isMenuShown} unmountOnExit mountOnEnter timeout={{ enter: 0, exit: 100 }}>
61+
<div class="menu-container">
62+
<ReshapingContainer id="reshape-with-transition" triggerKey={shownMenuId}>
63+
hello world
64+
</ReshapingContainer>
65+
</div>
66+
</CSSTransition>
67+
);
68+
```
69+
70+
> **Tip -** This example is using the [ReshapingContainer](/reshaping-container) component.
71+
> It will reshape the background around the children when its prop `triggerKey` changes!
72+
73+
### [Popmotion](https://popmotion.io/pure/)
74+
75+
Creating [custom animations](/custom-animations) with third party libraries works a treat,
76+
remember that although `yubaba` comes with beautiful animations out of the box -
77+
at its core is a powerful orchestration layer you can use to write your own!
78+
79+
Here we use Popmotion to do the animating.
80+
81+
<Playground>
82+
<Common.Toggler interval>
83+
{toggler => (
84+
<Baba name="popmotion-right" key={toggler.shown}>
85+
<PopmotionMoveRight>{anim => <Styled.Root {...anim} />}</PopmotionMoveRight>
86+
</Baba>
87+
)}
88+
</Common.Toggler>
89+
</Playground>
90+
91+
> **Tip -** [React Spring](https://www.react-spring.io/) can also be used for similar results using its imperative [Manual API](https://www.react-spring.io/docs/props/gotchas#manual-api).
92+
93+
```js
94+
import { Collector } from 'yubaba';
95+
import React, { useRef } from 'react';
96+
import { styler, tween } from 'popmotion';
97+
98+
const PopmotionMoveRight = props => {
99+
const elementStyler = useRef();
100+
101+
return (
102+
<Collector
103+
data={{
104+
action: 'animation',
105+
payload: {
106+
beforeAnimate: (elements, onFinish, setChildProps) => {
107+
elementStyler.current = styler(elements.destination.element);
108+
onFinish();
109+
},
110+
animate: (elements, onFinish, setChildProps) => {
111+
tween({ from: 0, to: { x: 300 } }).start({
112+
complete: onFinish,
113+
update: elementStyler.current,
114+
});
115+
},
116+
},
117+
}}
118+
>
119+
{props.children}
120+
</Collector>
121+
);
122+
};
123+
```
124+
42125
## Controlling in what order animations should execute
43126

44127
> **Tip -** Animations have three phases,

‎packages/yubaba/src/__docs__/3-advanced-usage/styled.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ export const Root = styled.div`
1616
justify-content: center;
1717
flex-shrink: 0;
1818
cursor: pointer;
19+
border-radius: 4px;
1920
`;
2021

2122
export const Container = styled.div`

‎packages/yubaba/src/__docs__/4-custom-animations/docs.mdx‎

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -14,15 +14,18 @@ import * as Styled from './styled';
1414

1515
# Custom animations
1616

17-
Everything is a custom animation in `yubaba` -
18-
all animations that come with `yubaba` are built in exactly the same way you will build yours.
17+
At its core `yubaba` is a powerful orchestration layer which provides a way to collect and trigger animations,
18+
as well as providing snapshots of the DOM to the animations,
19+
this can be helpful for example when figuring out where you'd like to move an element.
20+
21+
> **Tip -** `yubaba` works great with [other animation libraries](/advanced-usage#use-with-other-libaries) just incase you're wondering.
1922
2023
## Lifecyle of an animation
2124

2225
There are three phases of an animation:
2326

24-
1. `beforeAnimate()` used for any initial work needed for an animation, e.g. moving the destination ontop of the origin
25-
2. `animate()` used for the primary animation, e.g. moving from origin to destination
27+
1. `beforeAnimate()` used for any initial work needed for an animation, e.g. moving the `destination` ontop of the `origin`
28+
2. `animate()` used for the primary animation, e.g. moving from `origin` to `destination`
2629
3. `afterAnimate()` used for any supplementary post-animation animation, e.g. fading out
2730

2831
<br />
@@ -37,12 +40,13 @@ Each phase method has the same type signature:
3740
> If you do it will be created for that phase - and reconciled from the result of the following phases.
3841
> This means if you return JSX elements in `beforeAnimate()` but not in `animate()` or `afterAnimate()` it will be removed!
3942
40-
### What is `elements`
43+
### What is `elements{}`
4144

42-
This contains snapshot data for the origin and destination elements.
43-
Use this for doing any dynamic calculation for your animation.
45+
This contains snapshot data for the `origin` and `destination` elements,
46+
use this for doing any dynamic calculation for your animation.
47+
Remember that an animation will always have an `origin` and `destination`.
4448

45-
> **Tip -** Notice there is a `render` property in origin and destination -
49+
> **Tip -** Notice there is a `render` property in `origin` and `destination` -
4650
> this is the render prop that consumers pass through which you can use to create the same element if needed!
4751
4852
```js

0 commit comments

Comments
 (0)