Skip to content

Commit cc0f072

Browse files
lorensrlorensr
committed
Add react-motion ul animation
1 parent 2e85904 commit cc0f072

File tree

6 files changed

+133
-44
lines changed

6 files changed

+133
-44
lines changed

‎components/book-li.js

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,15 @@
11
import React, { Component } from 'react'
2+
import stylePropType from 'react-style-proptype'
23

34
import Emoji from './emoji'
45

5-
const BookLI = ({ children }) => {
6+
const BookLI = ({ style, children }) => {
67
return (
78
<li
89
style={{
910
listStyle: 'none',
1011
marginBottom: 10,
12+
...style,
1113
}}
1214
>
1315
<span
@@ -31,7 +33,15 @@ const BookLI = ({ children }) => {
3133
}
3234

3335
BookLI.propTypes = {
34-
children: React.PropTypes.element.isRequired,
36+
style: stylePropType,
37+
children: React.PropTypes.oneOfType([
38+
React.PropTypes.element,
39+
React.PropTypes.string,
40+
]).isRequired,
41+
}
42+
43+
BookLI.defaultProps = {
44+
style: {},
3545
}
3646

3747
export default BookLI

‎css/raw.js

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import { fontFamily, color } from '../lib/styles'
2+
3+
export default `
4+
body {
5+
font-family: ${fontFamily};
6+
color: #333;
7+
font-size: 18px;
8+
line-height: 1.7;
9+
}
10+
11+
@media screen and (max-width: 760px) {
12+
body {
13+
font-size: 16px;
14+
}
15+
}
16+
17+
a {
18+
color: ${color};
19+
text-decoration: none;
20+
}
21+
22+
a:hover {
23+
text-decoration: underline;
24+
}
25+
26+
27+
`

‎package.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,10 +26,13 @@
2626
"graphql": "^0.8.2",
2727
"graphql-server-express": "^0.4.4",
2828
"graphql-tools": "^0.9.0",
29+
"lodash": "^4.17.4",
2930
"material-ui": "^0.16.6",
3031
"next": "^2.0.0-beta",
3132
"react": "^15.4.2",
3233
"react-email-autocomplete": "^1.0.2",
34+
"react-motion": "^0.4.7",
35+
"react-style-proptype": "^1.4.0",
3336
"react-tap-event-plugin": "^2.0.1"
3437
},
3538
"devDependencies": {

‎pages/_document.js

Lines changed: 2 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import Document, { Head, Main, NextScript } from 'next/document'
22

3-
import { fontFamily, color } from '../lib/styles'
3+
import raw from '../css/raw'
44

55
export default class MyDocument extends Document {
66
static async getInitialProps({ renderPage }) {
@@ -14,29 +14,7 @@ export default class MyDocument extends Document {
1414
<Head>
1515
<title>My page</title>
1616
<style
17-
dangerouslySetInnerHTML={{ __html: `
18-
body {
19-
font-family: ${fontFamily};
20-
color: #333;
21-
font-size: 18px;
22-
line-height: 1.7;
23-
}
24-
25-
@media screen and (max-width: 760px) {
26-
body {
27-
font-size: 16px;
28-
}
29-
}
30-
31-
a {
32-
color: ${color};
33-
text-decoration: none;
34-
}
35-
36-
a:hover {
37-
text-decoration: underline;
38-
}
39-
` }}
17+
dangerouslySetInnerHTML={{ __html: raw }}
4018
/>
4119
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css" rel="stylesheet" />
4220
</Head>

‎pages/index.js

Lines changed: 67 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ import Avatar from 'material-ui/Avatar'
66
import injectTapEventPlugin from 'react-tap-event-plugin'
77
import Head from 'next/head'
88
import css from 'next/css'
9+
import { StaggeredMotion, spring } from 'react-motion'
10+
import _ from 'lodash'
911

1012
import Email from '../components/email'
1113
import BookLI from '../components/book-li'
@@ -35,6 +37,10 @@ const styles = {
3537
alignItems: 'center',
3638
justifyContent: 'center',
3739
},
40+
listAnimation: {
41+
maxLeft: 200,
42+
default: { opacity: 0, left: 200 },
43+
},
3844
}
3945

4046
const headerH = 280
@@ -44,6 +50,14 @@ const logo = css({
4450
height: 150,
4551
})
4652

53+
const bookTopics = [
54+
'GraphQL beginner introduction',
55+
'GraphQL concepts in depth',
56+
'Frontend – using Apollo Client',
57+
'Backend – writing a GraphQL server',
58+
'React, React Native, Redux, Angular, and Node',
59+
]
60+
4761
class Index extends Component {
4862
constructor(props) {
4963
super(props)
@@ -58,6 +72,7 @@ class Index extends Component {
5872
The GraphQL Book
5973
</title>
6074
</Head>
75+
<div className="animation-target">
6176
<Paper
6277
zDepth={2}
6378
style={{
@@ -148,6 +163,7 @@ class Index extends Component {
148163

149164
</div>
150165
</Paper>
166+
</div>
151167
<div
152168
style={{
153169
display: 'flex',
@@ -186,23 +202,57 @@ class Index extends Component {
186202
{` maintainer. We’re in the process of writing the best GraphQL
187203
reference, which inclues:`}
188204
</p>
189-
<ul>
190-
<BookLI>
191-
GraphQL beginner introduction
192-
</BookLI>
193-
<BookLI>
194-
GraphQL concepts in depth
195-
</BookLI>
196-
<BookLI>
197-
Frontend – using Apollo Client
198-
</BookLI>
199-
<BookLI>
200-
Backend – writing a GraphQL server
201-
</BookLI>
202-
<BookLI>
203-
Examples with React, React Native, Redux, Angular, and Node
204-
</BookLI>
205-
</ul>
205+
<StaggeredMotion
206+
defaultStyles={_.times(bookTopics.length,
207+
_.constant(styles.listAnimation.default),
208+
)}
209+
styles={prevInterpolatedStyles => prevInterpolatedStyles.map((x, i) => {
210+
const prev = prevInterpolatedStyles[i - 1] || styles.listAnimation.default
211+
let left
212+
if (i === 0 || prev.left < 1) {
213+
left = 0
214+
} else {
215+
left = Math.min(
216+
prev.left * 1.2,
217+
styles.listAnimation.maxLeft,
218+
)
219+
}
220+
221+
let opacity
222+
if (i === 0 || prev.opacity > 0.7) {
223+
opacity = 1
224+
} else {
225+
opacity = prev.opacity * 0.99
226+
}
227+
228+
return {
229+
opacity: prev.opacity > 0.95 ? 1 : spring(opacity, {
230+
stiffness: 30,
231+
damping: 26,
232+
}),
233+
left: spring(left, {
234+
stiffness: 150,
235+
damping: 26,
236+
}),
237+
}
238+
})}
239+
>
240+
{interpolatingStyles =>
241+
<ul>
242+
{interpolatingStyles.map((style, i) => (
243+
<BookLI
244+
key={i} // eslint-disable-line
245+
style={{
246+
transform: `translateX(-${style.left}px)`,
247+
opacity: style.opacity,
248+
}}
249+
>
250+
{bookTopics[i]}
251+
</BookLI>
252+
))}
253+
</ul>
254+
}
255+
</StaggeredMotion>
206256
<div
207257
style={{
208258
display: 'flex',

‎yarn.lock

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2467,7 +2467,7 @@ lodash.throttle@^4.1.1:
24672467
version "4.1.1"
24682468
resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
24692469

2470-
lodash@^4.0.0, lodash@^4.14.0, lodash@^4.2.0, lodash@^4.3.0, lodash@^4.5.1, lodash@^4.6.1:
2470+
lodash@^4.0.0, lodash@^4.14.0, lodash@^4.17.4, lodash@^4.2.0, lodash@^4.3.0, lodash@^4.5.1, lodash@^4.6.1:
24712471
version "4.17.4"
24722472
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"
24732473

@@ -2936,6 +2936,10 @@ pbkdf2@^3.0.3:
29362936
dependencies:
29372937
create-hmac "^1.1.2"
29382938

2939+
performance-now@^0.2.0, performance-now@~0.2.0:
2940+
version "0.2.0"
2941+
resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-0.2.0.tgz#33ef30c5c77d4ea21c5a53869d91b56d8f2555e5"
2942+
29392943
pify@^2.0.0:
29402944
version "2.3.0"
29412945
resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
@@ -3049,6 +3053,12 @@ [email protected], querystring@^0.2.0:
30493053
version "0.2.0"
30503054
resolved "https://registry.yarnpkg.com/querystring/-/querystring-0.2.0.tgz#b209849203bb25df820da756e747005878521620"
30513055

3056+
raf@^3.1.0:
3057+
version "3.3.0"
3058+
resolved "https://registry.yarnpkg.com/raf/-/raf-3.3.0.tgz#93845eeffc773f8129039f677f80a36044eee2c3"
3059+
dependencies:
3060+
performance-now "~0.2.0"
3061+
30523062
randomatic@^1.1.3:
30533063
version "1.1.6"
30543064
resolved "https://registry.yarnpkg.com/randomatic/-/randomatic-1.1.6.tgz#110dcabff397e9dcff7c0789ccc0a49adf1ec5bb"
@@ -3138,12 +3148,23 @@ [email protected]:
31383148
redbox-react "^1.2.5"
31393149
source-map "^0.4.4"
31403150

3151+
react-motion@^0.4.7:
3152+
version "0.4.7"
3153+
resolved "https://registry.yarnpkg.com/react-motion/-/react-motion-0.4.7.tgz#f77331ec7920bdb0d0cfc37eb6ffa10571bf42c7"
3154+
dependencies:
3155+
performance-now "^0.2.0"
3156+
raf "^3.1.0"
3157+
31413158
react-proxy@^3.0.0-alpha.0:
31423159
version "3.0.0-alpha.1"
31433160
resolved "https://registry.yarnpkg.com/react-proxy/-/react-proxy-3.0.0-alpha.1.tgz#4400426bcfa80caa6724c7755695315209fa4b07"
31443161
dependencies:
31453162
lodash "^4.6.1"
31463163

3164+
react-style-proptype@^1.4.0:
3165+
version "1.4.0"
3166+
resolved "https://registry.yarnpkg.com/react-style-proptype/-/react-style-proptype-1.4.0.tgz#d82c4093b73767e3efaacba013cea22a50e7b5ee"
3167+
31473168
react-tap-event-plugin@^2.0.1:
31483169
version "2.0.1"
31493170
resolved "https://registry.yarnpkg.com/react-tap-event-plugin/-/react-tap-event-plugin-2.0.1.tgz#316beb3bc6556e29ec869a7293e89c826a9074d2"

0 commit comments

Comments
 (0)