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

Commit 84b2818

Browse files
author
Michael Dougall
committed
feat(reveal): adds ability to resize via width and height
1 parent c812e35 commit 84b2818

File tree

14 files changed

+393
-75
lines changed

14 files changed

+393
-75
lines changed

‎packages/core/src/FocalTarget/__docs__/docs.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ for example [FocalConcealMove](/focal-conceal-move).
1818
## Usage
1919

2020
```js
21-
import { FocalTarget, FocalConcealMove } from '@element-motion/core';
21+
import Motion, { FocalTarget, FocalConcealMove } from '@element-motion/core';
2222

2323
const ItemDetails = ({ title, recipients, body, index }) => (
2424
<Motion name={`item-${index}`}>

‎packages/core/src/motions/CircleExpand/__docs__/docs.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ Generally you should use [CircleExpand](/circle-expand) and [CricleShrink](/circ
2020
## Usage
2121

2222
```js
23-
import { CircleExpand } from '@element-motion/core';
23+
import Motion, { CircleExpand } from '@element-motion/core';
2424
```
2525

2626
<Playground>

‎packages/core/src/motions/CircleShrink/__docs__/docs.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ Generally you should use [CircleExpand](/circle-expand) and [CricleShrink](/circ
2020
## Usage
2121

2222
```js
23-
import { CircleShrink } from '@element-motion/core';
23+
import Motion, { CircleShrink } from '@element-motion/core';
2424
```
2525

2626
<Playground>

‎packages/core/src/motions/CrossFadeMove/__docs__/docs.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ Useful for moving an element moving from one position to another when the elemen
1818
## Usage
1919

2020
```js
21-
import { CrossFadeMove } from '@element-motion/core';
21+
import Motion, { CrossFadeMove } from '@element-motion/core';
2222
```
2323

2424
<Playground>

‎packages/core/src/motions/FadeMove/__docz__/docs.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ Generally you'd want to use [Move](/move) or [CrossFadeMove](/cross-fade-move) o
2020
## Usage
2121

2222
```js
23-
import { FadeMove } from '@element-motion/core';
23+
import Motion, { FadeMove } from '@element-motion/core';
2424
```
2525

2626
<Playground>

‎packages/core/src/motions/FocalReveal/__docz__/docs.mdx‎

Lines changed: 20 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,23 +5,37 @@ menu: Focal motions
55
---
66

77
import { Playground, Props } from 'docz';
8-
import * as Common from '@element-motion/dev';
8+
import { build } from './styled';
99
import FocalReveal from '../index';
1010

1111
# FocalReveal
1212

13-
Will reveal a container around a marked focal element using `width` and `height`,
14-
or alternatively `clip-path`.
15-
See [FocalRevealMove](/focal-reveal-move) for what this looks like.
16-
13+
Will reveal an element around a focal element. Defaults to using `width` and `height`.
1714
This component requires the use of a [FocalTarget](/focal-target) to mark the focal element.
1815

1916
## Usage
2017

2118
```js
22-
import { FocalReveal } from '@element-motion/core';
19+
import Motion, { FocalReveal } from '@element-motion/core';
2320
```
2421

22+
### With clip path
23+
24+
- ✅ Performant
25+
- ✅ Doesn't affect page flow (elements don't move during motion)
26+
- ❌ Clips everything outside of the element (read: box shadow disappears during the motion)
27+
- ❌ Doesn't work in IE11
28+
29+
<Playground>{() => build(200, 200, 'horizontal', 'center', true)}</Playground>
30+
31+
### With width and height
32+
33+
- ✅ Looks good when used with box shadow
34+
- ❌ Affects page flow (elements move during motion)
35+
- ❌ Not performant
36+
37+
<Playground>{() => build(200, 200, 'horizontal', 'center')}</Playground>
38+
2539
## Props
2640

2741
<Props of={FocalReveal} />

‎packages/core/src/motions/FocalReveal/__docz__/styled.tsx‎

Lines changed: 131 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
import * as React from 'react';
2+
import styled from 'styled-components'; // eslint-disable-line
3+
import { Toggler } from '@element-motion/dev'; // eslint-disable-line
4+
import Motion from '../../../Motion';
5+
import Noop from '../../Noop';
6+
import Target from '../../../FocalTarget';
7+
import FocalReveal from '../index';
8+
9+
type Appearance = 'left' | 'center' | 'right';
10+
11+
const justifyContentMap = {
12+
left: 'flex-start',
13+
center: 'center',
14+
right: 'flex-end',
15+
};
16+
17+
const List = styled.div<{ appearance: Appearance }>`
18+
display: flex;
19+
justify-content: ${props => justifyContentMap[props.appearance]};
20+
`;
21+
22+
interface ListItemProps {
23+
height: number;
24+
width: number;
25+
}
26+
27+
const ListItem = styled.div<ListItemProps>`
28+
background-color: #dc143c;
29+
height: ${props => props.height}px;
30+
width: ${props => props.width}px;
31+
position: relative;
32+
cursor: pointer;
33+
34+
&:before {
35+
content: 'click me';
36+
text-align: center;
37+
left: 0;
38+
right: 0;
39+
position: absolute;
40+
color: rgba(255, 255, 255, 0.9);
41+
font-size: 24px;
42+
font-family: Roboto, HelveticaNeue, Arial, sans-serif;
43+
top: 70%;
44+
}
45+
46+
&:after {
47+
content: '😊';
48+
position: absolute;
49+
display: flex;
50+
align-items: center;
51+
justify-content: center;
52+
font-size: 50px;
53+
top: 0;
54+
bottom: 0;
55+
right: 0;
56+
left: 0;
57+
pointer-events: none;
58+
}
59+
`;
60+
61+
type Orientation = 'horizontal' | 'vertical' | 'both';
62+
63+
interface TallListItemProps extends ListItemProps {
64+
orientation: Orientation;
65+
}
66+
67+
const TallListItem = styled.div<TallListItemProps>`
68+
display: flex;
69+
align-items: center;
70+
background: rgb(210, 215, 225);
71+
margin: 0 auto;
72+
height: ${props =>
73+
props.orientation === 'both' || props.orientation === 'vertical'
74+
? props.height * 3
75+
: props.height}px;
76+
max-width: ${props =>
77+
props.orientation === 'both' || props.orientation === 'horizontal'
78+
? props.width * 3
79+
: props.width}px;
80+
`;
81+
82+
export const build = (
83+
width: number,
84+
height: number,
85+
orientation: Orientation,
86+
appearance: Appearance,
87+
useClipPath = false
88+
) => (
89+
<Toggler>
90+
{({ shown, toggle }) => (
91+
<React.Fragment>
92+
{shown || (
93+
<List appearance={appearance}>
94+
<Motion name={`reveal-move-${orientation}-${appearance}-${useClipPath}`}>
95+
<FocalReveal
96+
childrenTransformX={useClipPath || orientation === 'vertical'}
97+
childrenTransformY={useClipPath || orientation === 'horizontal'}
98+
useClipPath={useClipPath}
99+
>
100+
{motion => (
101+
<ListItem {...motion} onClick={() => toggle()} width={width} height={height} />
102+
)}
103+
</FocalReveal>
104+
</Motion>
105+
</List>
106+
)}
107+
108+
{shown && (
109+
<Motion name={`reveal-move-${orientation}-${appearance}-${useClipPath}`}>
110+
<Noop>
111+
{motion => (
112+
<TallListItem {...motion} width={width} height={height} orientation={orientation}>
113+
<Target>
114+
{target => (
115+
<ListItem
116+
width={width}
117+
height={height}
118+
onClick={() => toggle()}
119+
ref={target.ref}
120+
/>
121+
)}
122+
</Target>
123+
</TallListItem>
124+
)}
125+
</Noop>
126+
</Motion>
127+
)}
128+
</React.Fragment>
129+
)}
130+
</Toggler>
131+
);

‎packages/core/src/motions/Move/__docs__/docs.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ This motion uses the [FLIP technique](https://css-tricks.com/animating-layouts-w
1919
## Usage
2020

2121
```js
22-
import { Move } from '@element-motion/core';
22+
import Motion, { Move } from '@element-motion/core';
2323
```
2424

2525
<Playground>

‎packages/core/src/motions/Noop/__docs__/docs.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ A no-operation "noop" motion.
1414
## Usage
1515

1616
```js
17-
import { Noop } from '@element-motion/core';
17+
import Motion, { Noop } from '@element-motion/core';
1818
```
1919

2020
## Props

‎packages/core/src/motions/Reveal/__docz__/docs.mdx‎

Lines changed: 66 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,18 +6,80 @@ menu: Focal motions
66

77
import { Playground, Props } from 'docz';
88
import * as Common from '@element-motion/dev';
9+
import Motion from '../../../Motion';
910
import Reveal from '../index';
11+
import * as Styled from './styled';
1012

1113
# Reveal
1214

13-
Will reveal the destination element from the origin size to the destination size using `clip-path` only which will not work for IE11.
15+
Will reveal the destination element from the origin size to the destination size. Defaults to using clip path.
1416

1517
## Usage
1618

1719
```js
18-
import { Reveal } from '@element-motion/core';
20+
import Motion, { Reveal } from '@element-motion/core';
1921
```
2022

23+
> **Tip -** Notice that there is no hardcoded `height` or `width` in these examples!
24+
> Instead we abuse how `position: absolute` can take elements out of the page flow and collapse it down to just the title.
25+
26+
### With clip path
27+
28+
- ✅ Performant
29+
- ✅ Doesn't affect page flow (elements don't move during motion)
30+
- ❌ Clips everything outside of the element (read: box shadow disappears during the motion)
31+
- ❌ Doesn't work in IE11
32+
33+
<Playground>
34+
<Common.Toggler>
35+
{toggler => (
36+
<Styled.Container onClick={toggler.toggle} aria-role="button">
37+
<Motion triggerSelfKey={toggler.shown}>
38+
<Reveal useClipPath>
39+
{motion => (
40+
<div {...motion}>
41+
<Styled.Title>
42+
{!toggler.shown ? '⬆' : '⬇'} {Styled.shortText}
43+
</Styled.Title>
44+
<Styled.Description aria-hidden={!toggler.shown} floating={!toggler.shown}>
45+
{Styled.longText}
46+
</Styled.Description>
47+
</div>
48+
)}
49+
</Reveal>
50+
</Motion>
51+
</Styled.Container>
52+
)}
53+
</Common.Toggler>
54+
</Playground>
55+
56+
### With width and height
57+
58+
- ✅ Looks good when used with box shadow
59+
- ❌ Affects page flow (elements move during motion)
60+
- ❌ Not performant
61+
62+
<Playground>
63+
<Common.Toggler>
64+
{toggler => (
65+
<Motion triggerSelfKey={toggler.shown}>
66+
<Reveal useClipPath={false}>
67+
{motion => (
68+
<Styled.Container onClick={toggler.toggle} aria-role="button" {...motion}>
69+
<Styled.Title>
70+
{!toggler.shown ? '⬆' : '⬇'} {Styled.shortText}
71+
</Styled.Title>
72+
<Styled.Description aria-hidden={!toggler.shown} floating={!toggler.shown}>
73+
{Styled.longText}
74+
</Styled.Description>
75+
</Styled.Container>
76+
)}
77+
</Reveal>
78+
</Motion>
79+
)}
80+
</Common.Toggler>
81+
</Playground>
82+
2183
## Props
2284

2385
<Props of={Reveal} />
@@ -33,5 +95,5 @@ If you're seeing some odd behavior - maybe try a flex container instead.
3395

3496
### Composing with move
3597

36-
When composing with any motion that uses `transform` or `position: relative`,
37-
Reveal will not work in Safari - follow the bug here: https://bugs.webkit.org/show_bug.cgi?id=196731.
98+
When composing with any motion that uses `transform` or `position: relative` with `clip-path` will not work in Safari -
99+
follow the bug here: https://bugs.webkit.org/show_bug.cgi?id=196731.

0 commit comments

Comments
 (0)