{poll.title}
37 | { this.$ballsContainer = n }} />
38 |
47 |
52 |
53 | Animations ↝
in a stateful world 54 |
55 |
56 |
57 |
58 | Alexey Taktarov
React Kyiv March 59 |
60 |
61 | @mlfrg · molefrog.com
62 |
63 |
64 |
65 |
66 |
71 | (before) product designer/dev at Shogun{' '}
72 |
74 |
75 |
76 |
77 | ~500k
80 | registered users
81 |
82 | 1.5 years
83 | active, since 2016
84 |
85 | 6 countries
86 | US and Europe
87 |
88 |
89 | 90 |
91 |
92 |
93 |
94 |
97 | 98 |
99 |
100 |
101 |
120 |
137 | The
139 |
140 |
141 | {/* Как выглядят современные веб-приложения */}
142 |
143 | 
144 |
145 | Immutable UI is the foundation of modern apps.
146 | Application state maps to DOM. 147 |
148 |
149 |
150 |
151 | 
152 |
153 | Application as a chain of immutable states.
154 |
155 |
156 |
157 |
158 |
159 |
161 | Immutable UIs are predictable, maintainable
163 |
164 | But what about animations?
165 |
166 |
167 |
173 | CSS transitions
174 | are supported out of the box in React
175 |
176 |
177 |
190 |
192 | Spring-based animations are not time limited
193 | Hard to work with sequences
194 | Performance issues
195 |
196 |
197 |
198 |
204 | Dirty animations
205 | A dialog window example
206 |
207 |
208 |
209 |
222 | The «animation on enter» pattern. Works through{' '}
223 |
225 |
226 |
227 |
228 |
242 | Make sure you stop the animation on unmount.
243 |
244 |
245 |
246 |
249 |
255 | Animating exit is hard — there is nothing to animate since the component
256 | is not in the DOM anymore.
257 |
258 |
259 |
260 |
261 |
267 | Introducing
270 |
271 |
272 |
273 | 
274 |
275 | The state map of the
277 |
278 |
279 |
280 |
286 | JSX is nothing but a light-weight serializable object.
287 |
288 |
289 |
290 |
296 |
311 |
312 | Finite State Machine. 313 |
314 |
315 |
316 |
322 |
333 |
a declarative way 334 | for enter/exit animations 335 |
336 |
337 |
338 |
341 |
354 | Using lifecycle hooks you can completely{' '}
355 | override component's render. For exaple when using{' '}
356 |
358 |
359 |
360 |
361 | breaking changes in React 16.3:
362 | componentWillReceiveProps()
363 | static getDerivedStateFromProps()
364 |
369 |
370 |
373 |
380 | This little trick called P-controller (taken from control theory)
381 | is handy for time-unbound animations
382 |
383 |
384 |
385 |
393 |
404 | Actuator is used in Redux apps where global state is the only way to
405 | communicate.
406 |
407 |
408 |
409 |
410 |
412 |
413 |
416 |
418 | Building high-performance animations
420 |
421 | 422 |
423 |
424 |
425 |
426 |
434 | Step 1. Define a value.
435 |
436 |
437 |
438 |
439 |
456 | Step 2. Connect it to the View.
457 |
458 |
459 |
460 |
461 |
471 | Step 3. Fire it up!
472 |
473 |
474 |
475 |
481 | )
482 |
483 | export default DirtyAnimations
484 |
485 | const MetricNumber = styled.div`
486 | font-size: 38px;
487 | font-weight: 700;
488 | `
489 |
490 | const MetricLabel = styled.div`
491 | text-transform: uppercase;
492 | font-size: 17px;
493 | font-weight: 600;
494 | color: #a0a0a0;
495 | letter-spacing: 0.5px;
496 | margin-bottom: 20px;
497 | `
498 |
499 | const ImmutableLogo = styled.img`
500 | margin-bottom: 24px;
501 | `
502 |
503 | const Question = styled.div`
504 | margin-top: 20px;
505 | font-size: 25px;
506 | background-color: #fbf177;
507 | padding: 2px 3px;
508 | `
509 |
510 | const ConsList = styled.ul`
511 | font-size: 26px;
512 | text-align: left;
513 | padding: 0;
514 | padding-top: 15px;
515 | color: #333333;
516 |
517 | li {
518 | margin-bottom: 32px;
519 | list-style-type: none;
520 |
521 | &:before {
522 | content: '❌';
523 | padding-right: 15px;
524 | }
525 | }
526 | `
527 |
528 | const OutlineCode = styled.code`
529 | font-size: 26px;
530 | margin: 15px;
531 |
532 | ${props => props.strikethrough && 'text-decoration: line-through;'};
533 | `
534 |
535 | const CustomImageLayout = styled.div`
536 | width: 100%;
537 | height: 100%;
538 |
539 | display: flex;
540 | flex-direction: column;
541 | align-items: center;
542 | justify-content: center;
543 |
544 | > img {
545 | align-self: stretch;
546 | }
547 | `
548 |
549 | const ResumeioLogo = styled.img`
550 | margin-bottom: 38px;
551 | `
552 |
553 | const YCBadge = styled.span`
554 | background: #f06530;
555 | padding: 3px 5px;
556 | color: white;
557 | font-weight: 700;
558 | border-radius: 3px;
559 | margin: 0 2px;
560 | `
561 |
562 | const DeckTitle = styled(Title)`
563 | line-height: 0.95;
564 | margin-top: 90px;
565 | `
566 |
567 | const Contacts = styled.div`
568 | display: flex;
569 | justify-content: space-between;
570 | margin-top: 180px;
571 | color: white;
572 | font-weight: bold;
573 | font-size: 24px;
574 | align-items: flex-end;
575 | `
576 |
577 | const Author = styled.div`
578 | border-bottom: 4px solid white;
579 | padding-top: 10px;
580 | `
581 |
582 | const TwitterHandle = styled.div`
583 | font-size: 20px;
584 | `
585 |
--------------------------------------------------------------------------------
/src/slides/actuation/action-logger.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 | import styled from 'styled-components'
3 | import { Actuator } from 'redux-actuator'
4 | import { TransitionMotion, spring, presets } from 'react-motion'
5 |
6 | // Action logger event entry box
7 | const ActionLoggerEvent = ({ msg, alpha }) => (
8 |
16 |
17 | {msg.key}
18 |
19 |
20 |
21 | ch:
22 | {msg.channel}
23 |
24 |
25 |
26 | arg:
27 | {JSON.stringify(msg.args)}
28 |
29 |
30 | )
31 |
32 | class Logger extends Component {
33 | constructor(props) {
34 | super(props)
35 | this.state = { logs: [] }
36 | }
37 |
38 | render() {
39 | const { logs } = this.state
40 |
41 | // styles for TransitionMotion
42 | const motionStyles = logs.map((msg, i) => ({
43 | key: msg.timestamp.toString(),
44 | data: msg,
45 | style: {
46 | x: spring(1.0, presets.wobbly)
47 | }
48 | }))
49 |
50 | return (
51 |
52 | {!!logs.length && Action Logger }
53 |
54 | this.setState({ logs: [msg, ...logs] })
57 | }}
58 | >
59 | ({ x: spring(0) })}
61 | willEnter={() => ({ x: 0 })}
62 | styles={motionStyles}
63 | >
64 | {interpolatedStyles => (
65 |
66 | {interpolatedStyles.map(config => {
67 | const msg = config.data
68 | const { x } = config.style
69 |
70 | return (
71 |
75 | )}
76 |
77 |
78 |
79 | )
80 | }
81 | }
82 |
83 | const ActionLogger = styled.div`
84 | align-self: stretch;
85 | `
86 |
87 | const Events = styled.div`
88 | white-space: nowrap;
89 | `
90 |
91 | const LoggerLabel = styled.div`
92 | font-size: 18px;
93 | padding-left: 16px;
94 | margin-bottom: 4px;
95 | color: #757575;
96 | font-weight: 500;
97 | `
98 |
99 | const Field = styled.span`
100 | font-weight: bold;
101 | `
102 |
103 | const Line = styled.div`
104 | white-space: nowrap;
105 | overflow: hidden;
106 | text-overflow: ellipsis;
107 | `
108 |
109 | const Entry = styled.div`
110 | display: inline-block;
111 | background-color: #ffffe6;
112 | border: 2px solid #ddd;
113 | border-radius: 6px;
114 | padding: 8px 14px;
115 | margin: 4px;
116 | font-size: 14px;
117 | font-family: 'SF Mono', 'Lucida Console', Monaco, monospace;
118 | `
119 |
120 | export default Logger
121 |
--------------------------------------------------------------------------------
/src/slides/actuation/talking-heads.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 | import styled from 'styled-components'
3 | import _ from 'lodash'
4 |
5 | // Redux swiss knife
6 | import { createStore, combineReducers } from 'redux'
7 | import { Provider } from 'react-redux'
8 | import createEngine, { actuate, Actuator } from 'redux-actuator'
9 |
10 | // Local components
11 | import ThisGuy from './this-guy'
12 | import ActionLogger from './action-logger'
13 | import Button from 'blocks/button'
14 |
15 | // This will create store. The store is instatiated inside
16 | // components' constructors which isn't cool, but works for demos
17 | const configureStore = () => {
18 | const engine = createEngine()
19 |
20 | const rootReducer = combineReducers({ actuator: engine.reducer })
21 | return createStore(rootReducer)
22 | }
23 |
24 | // This is a wrapper around ThisGuys component with an Actuator
25 | // Normally the Actuator is placed inside the component, but
26 | // I wanted to isolate the component from Redux-related logic
27 | class TalkingGuy extends Component {
28 | render() {
29 | const { channel = 'default', ...restProps } = this.props
30 |
31 | return (
32 | {
35 | const guy = this.guy
36 | guy && guy.say(...args)
37 | }}
38 | >
39 | {
41 | this.guy = g
42 | }}
43 | {...restProps}
44 | />
45 |
46 | )
47 | }
48 | }
49 |
50 | const internationalPhrases = {
51 | jose: ['¡Hóla!', 'Cómo estás?', 'Puedes repetirlo?', 'Lo siento, pero...'],
52 |
53 | gustav: ['Goeden avond!', 'Goeiedag!', 'Dank u wel'],
54 |
55 | pierrot: [
56 | 'Quoi de neuf?',
57 | 'Bonjour!',
58 | 'Salut!',
59 | 'Coucou!',
60 | 'Au revoir!',
61 | 'Comment ça va?'
62 | ],
63 |
64 | avram: ['Tzohorayim Tovim', 'Lilah Tov', 'Shabbat Shalom', 'Shavua Tov']
65 | }
66 |
67 | const logActuatorAction = (store, action, color = null) => {
68 | store.dispatch(action)
69 | store.dispatch(
70 | actuate('log', {
71 | color: color,
72 | ...action.payload
73 | })
74 | )
75 | }
76 |
77 | // First demo. One guy talking on demand.
78 | // Only one Actuator channel
79 | class TalkingHeads extends Component {
80 | constructor() {
81 | super()
82 | this.state = {
83 | isMany: false
84 | }
85 | this.store = configureStore()
86 | }
87 |
88 | saySomething() {
89 | const guy = this.state.isMany
90 | ? _.sample(Object.keys(internationalPhrases))
91 | : 'gustav'
92 |
93 | const phrase = _.sample(internationalPhrases[guy])
94 |
95 | const actuatorAction = actuate(guy, phrase)
96 |
97 | const colors = {
98 | jose: 'rgba(247, 49, 111, 0.2)',
99 | gustav: null,
100 | pierrot: 'rgba(64, 148, 237, 0.2)',
101 | avram: 'rgba(42, 213, 139, 0.2)'
102 | }
103 | logActuatorAction(this.store, actuatorAction, colors[guy])
104 | }
105 |
106 | render() {
107 | const store = this.store
108 |
109 | return (
110 |
111 |
112 |
113 |
114 | Gustav
117 |
118 |
119 | {this.state.isMany && (
120 |
121 | José
124 |
125 | )}
126 |
127 | {this.state.isMany && (
128 |
129 | Pierrot
132 |
133 | )}
134 |
135 | {this.state.isMany && (
136 |
137 | Avram
140 |
141 | )}
142 |
143 |
144 |
145 |
148 |
149 |
155 |
156 |
157 |
159 |
160 | )
161 | }
162 | }
163 |
164 | const Container = styled.div`
165 | display: flex;
166 | flex-flow: column nowrap;
167 | align-items: center;
168 | justify-content: center;
169 | padding-top: 90px;
170 | `
171 |
172 | const Heads = styled.div`
173 | display: flex;
174 | flex-flow: row nowrap;
175 | justify-content: center;
176 |
177 | > div {
178 | margin: 0 30px;
179 | }
180 | `
181 |
182 | const Head = styled.div``
183 |
184 | const HeadName = styled.div`
185 | font-size: 18px;
186 | text-align: center;
187 | margin-top: 12px;
188 | font-weight: 500;
189 |
190 | &.head-jose {
191 | color: #666;
192 | }
193 |
194 | &.head-gustav {
195 | color: #f7316f;
196 | }
197 |
198 | &.head-pierrot {
199 | color: #4094ed;
200 | }
201 |
202 | &.head-avram {
203 | color: #2ad58b;
204 | }
205 | `
206 |
207 | const Controls = styled.div`
208 | margin-top: 22px;
209 | margin-bottom: 16px;
210 | `
211 |
212 | export { TalkingHeads }
213 |
--------------------------------------------------------------------------------
/src/slides/actuation/this-guy.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable react/no-find-dom-node */
2 | import Velocity from 'velocity-animate'
3 | import React from 'react'
4 | import styled from 'styled-components'
5 | import { findDOMNode } from 'react-dom'
6 | import { Howl } from 'howler'
7 |
8 | class ThisGuy extends React.Component {
9 | constructor(props) {
10 | super(props)
11 | this.whoopSound = new Howl({ src: './sounds/whoop.mp3', volume: 0.6 })
12 | }
13 |
14 | render() {
15 | // Default viewport
16 | const viewport = { width: 70, height: 110 }
17 |
18 | // Scaling
19 | const factor = this.props.zoomFactor
20 | const width = viewport.width * factor
21 | const height = viewport.height * factor
22 |
23 | const imageUrl = `url(./images/guys/${this.props.who}.svg)`
24 |
25 | return (
26 | ![]()
33 | )
34 | }
35 |
36 | doMagic(phrase) {
37 | const container = findDOMNode(this)
38 |
39 | Velocity(container, { scaleY: 0.1 }, { duration: 100 })
40 | Velocity(container, { scaleY: 1.0 }, { duration: 800, easing: [30, 5] })
41 | }
42 |
43 | say(phrase) {
44 | const container = findDOMNode(this)
45 | if (!container) return
46 |
47 | const dialog = document.createElement('div')
48 | dialog.classList.add('guy__dialog')
49 |
50 | const dialogText = document.createElement('div')
51 | dialogText.classList.add('guy__dialog-text')
52 | dialogText.textContent = phrase
53 |
54 | dialog.appendChild(dialogText)
55 | container.appendChild(dialog)
56 |
57 | dialogText.style.fontSize = `${this.props.zoomFactor * 12}px`
58 |
59 | Velocity(
60 | dialogText,
61 | { scaleX: 0.3, scaleY: 0.3, opacity: 0.3 },
62 | { duration: 0 }
63 | )
64 |
65 | Velocity(
66 | dialogText,
67 | {
68 | scaleX: '1.0',
69 | scaleY: '1.0'
70 | },
71 | { duration: 800, easing: [250, 15], queue: false }
72 | )
73 |
74 | Velocity(
75 | dialogText,
76 | { opacity: 1.0 },
77 | { duration: 200, easing: 'easeOutCirc', queue: false }
78 | )
79 |
80 | Velocity(
81 | dialogText,
82 | { translateY: '-400px' },
83 | {
84 | duration: 6000,
85 | queue: false,
86 | complete: () => container.removeChild(dialog)
87 | }
88 | )
89 |
90 | setTimeout(() => {
91 | if (!findDOMNode(this)) return
92 | Velocity(dialogText, { opacity: 0.0 }, { duration: 1000, queue: false })
93 | }, 2000)
94 |
95 | this.whoopSound.play()
96 | }
97 | }
98 |
99 | ThisGuy.defaultProps = {
100 | zoomFactor: 1.0,
101 | who: 'tikhon'
102 | }
103 |
104 | const Img = styled.div`
105 | cursor: pointer;
106 | position: relative;
107 |
108 | width: 70px;
109 | height: 110px;
110 |
111 | background-repeat: no-repeat;
112 | background-size: 100% auto;
113 | background-position: bottom;
114 |
115 | .guy__dialog {
116 | position: absolute;
117 | bottom: 85%;
118 | left: 50%;
119 | transform: translate(-50%, 0);
120 | }
121 |
122 | .guy__dialog-text {
123 | background-color: black;
124 | color: white;
125 | padding: 3px 10px;
126 | border-radius: 3px;
127 | font-size: 16px;
128 | text-align: center;
129 | font-family: Rubik, sans-serif;
130 | }
131 | `
132 |
133 | export default ThisGuy
134 |
--------------------------------------------------------------------------------
/src/slides/boids/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import styled from 'styled-components'
3 | import { Slide } from 'presa'
4 |
5 | import Simulator from './simulator'
6 |
7 | // transforms event's mouse coordinates to relative ones
8 | // e.g. [0.3, 0.9]
9 | const toRelativeMouseCoords = event => {
10 | const rect = event.currentTarget.getBoundingClientRect()
11 |
12 | return {
13 | x: (event.clientX - rect.left) / rect.width,
14 | y: (event.clientY - rect.top) / rect.height
15 | }
16 | }
17 |
18 | class GameSlide extends React.Component {
19 | constructor(props) {
20 | super(props)
21 |
22 | this.state = {
23 | started: false
24 | }
25 | }
26 |
27 | handleKeyDown = event => {
28 | // A
29 | if (event.keyCode === 65) {
30 | this._engine.alphaLaw = !this._engine.alphaLaw
31 | }
32 |
33 | // S
34 | if (event.keyCode === 83) {
35 | this._engine.betaLaw = !this._engine.betaLaw
36 | }
37 |
38 | // D
39 | if (event.keyCode === 68) {
40 | this._engine.gammaLaw = !this._engine.gammaLaw
41 | }
42 |
43 | // F
44 | if (event.keyCode === 70) {
45 | this._engine.attractLaw = !this._engine.attractLaw
46 | }
47 | }
48 |
49 | componentDidMount() {
50 | this._engine = new Simulator(this._root)
51 | document.body.addEventListener('keydown', this.handleKeyDown)
52 | }
53 |
54 | componentWillUnmount() {
55 | this._engine.stop()
56 | document.body.removeEventListener('keydown', this.handleKeyDown)
57 | }
58 |
59 | handleMouseMove = event => {
60 | const point = toRelativeMouseCoords(event)
61 |
62 | this._engine.targetX = point.x
63 | this._engine.targetY = point.y
64 | }
65 |
66 | startTheParty = event => {
67 | this.setState({ started: true })
68 |
69 | const point = toRelativeMouseCoords(event)
70 | this._engine.start(point.x, point.y)
71 | }
72 |
73 | render() {
74 | const { started } = this.state
75 |
76 | return (
77 |
78 |
79 | (this._root = e)} />
80 |
84 |
85 | Click anywhere on a screen
86 |
87 |
88 |
89 |
90 | )
91 | }
92 | }
93 |
94 | const ClickAnywhere = styled.div`
95 | font-weight: 600;
96 | color: #777;
97 | pointer-events: none;
98 | user-select: none;
99 | transition: all 1s ease;
100 |
101 | ${props =>
102 | props.invisible &&
103 | `
104 | opacity: 0;
105 | transform: scale(1.3, 1.3) translateY(-100px);
106 | `};
107 | `
108 |
109 | const Controls = styled.div`
110 | position: absolute;
111 | cursor: pointer;
112 | width: 100%;
113 | height: 100%;
114 | top: 0;
115 | left: 0;
116 |
117 | display: flex;
118 | align-items: center;
119 | justify-content: center;
120 | `
121 |
122 | const Container = styled.div`
123 | width: 100%;
124 | height: 100%;
125 | overflow: hidden;
126 | position: relative;
127 | `
128 |
129 | const Game = styled.div`
130 | width: 100%;
131 | height: 100%;
132 | position: relative;
133 | will-change: transform;
134 |
135 | .boids__fps {
136 | position: absolute;
137 | font-family: monospace;
138 | font-size: 20px;
139 | bottom: 20px;
140 | left: 30px;
141 |
142 | white-space: pre;
143 | }
144 |
145 | .boids__cross {
146 | width: 24px;
147 | height: 24px;
148 | line-height: 24px;
149 |
150 | top: -12px;
151 | left: -12px;
152 |
153 | box-sizing: border-box;
154 | display: inline-block;
155 | position: absolute;
156 | border: 1px solid black;
157 |
158 | font-size: 20px;
159 | text-align: center;
160 |
161 | will-change: transform;
162 | transform: translate3d(-30px, -30px, 0);
163 |
164 | &.is-killed {
165 | opacity: 0.2;
166 | }
167 | }
168 | `
169 |
170 | export default GameSlide
171 |
--------------------------------------------------------------------------------
/src/slides/boids/neighbour-detector.js:
--------------------------------------------------------------------------------
1 | import { quadtree } from 'd3-quadtree'
2 |
3 | export default class NeighbourDetector {
4 | constructor(points) {
5 | this.points = points
6 | }
7 |
8 | detect(x, y, radius) {
9 | let qtree = quadtree(this.points, p => p.x, p => p.y)
10 | return this.quadNeighbours(qtree, x, y, radius)
11 | }
12 |
13 | /*
14 | * Find the nodes within the specified
15 | * circle
16 | * Adapted from http://bl.ocks.org/llb4ll/8709363
17 | */
18 | quadNeighbours(quadTree, cx, cy, r) {
19 | const x0 = cx - r,
20 | y0 = cy - r,
21 | x3 = cx + r,
22 | y3 = cy + r
23 |
24 | let result = []
25 | quadTree.visit((node, x1, y1, x2, y2) => {
26 | if (!node.length) {
27 | var d = Math.sqrt(
28 | (node.data.x - cx) * (node.data.x - cx) +
29 | (node.data.y - cy) * (node.data.y - cy)
30 | )
31 |
32 | if (d <= r) {
33 | result.push(node.data)
34 | }
35 | }
36 |
37 | return x1 >= x3 || y1 >= y3 || x2 < x0 || y2 < y0
38 | })
39 |
40 | return result
41 | }
42 | }
43 |
--------------------------------------------------------------------------------
/src/slides/boids/simulator.js:
--------------------------------------------------------------------------------
1 | import requestAnimationFrame from 'raf'
2 | import NeighbourDetector from './neighbour-detector'
3 | import { Howl } from 'howler'
4 |
5 | // boid algorithm params
6 | const alpha = 0.006
7 | const beta = 0.09
8 | const gamma = -0.1
9 |
10 | // friction
11 | const theta = -0.03
12 | const alphaRadius = 100.0
13 | const betaRadius = 100.0
14 | const gammaRadius = 30.0
15 | const attraction = 0.001
16 | const explosionBounce = 3000.0
17 |
18 | const boidSymbols = ['✕', '△', '◯', '▧']
19 |
20 | // Calculates the distance between two points
21 | const distance = (x1, y1, x2, y2) =>
22 | Math.sqrt((x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2))
23 |
24 | // Same as _.sample
25 | const pickRandom = array => array[Math.floor(Math.random() * array.length)]
26 |
27 | const startSound = new Howl({ src: './sounds/game-start.ogg' })
28 | // const slapSound = new Howl({ src: './sounds/slap.ogg' })
29 |
30 | class Simulator {
31 | constructor(_root, N = 100) {
32 | this._root = _root
33 | this.width = 0
34 | this.height = 0
35 |
36 | this.targetX = 0.0
37 | this.targetY = 0.0
38 |
39 | this.alphaLaw = true
40 | this.betaLaw = true
41 | this.gammaLaw = true
42 | this.attractLaw = false
43 |
44 | this.boids = Array(N)
45 | .fill(0)
46 | .map((_, i) => ({
47 | idx: i,
48 | active: true,
49 | x: 0,
50 | y: 0,
51 | vx: 0,
52 | vy: 0,
53 | symbol: pickRandom(boidSymbols)
54 | }))
55 |
56 | this.boidElements = this.boids.map(boid => {
57 | const element = document.createElement('div')
58 |
59 | element.classList.add('boids__cross')
60 | element.textContent = boid.symbol
61 |
62 | // append to the container element
63 | _root.appendChild(element)
64 |
65 | return element
66 | })
67 |
68 | this.fpsCounter = document.createElement('div')
69 | this.fpsCounter.classList.add('boids__fps')
70 | _root.appendChild(this.fpsCounter)
71 | }
72 |
73 | start(initX = 0.5, initY = 0.5) {
74 | // Restart
75 | this.stop()
76 | this.isStopped = false
77 |
78 | this.width = this._root.offsetWidth
79 | this.height = this._root.offsetHeight
80 |
81 | this.boids.forEach(b => {
82 | b.x = this.width * initX
83 | b.y = this.height * initY
84 | b.vx = Math.random() * 3.0 - 1.5
85 | b.vy = Math.random() * 3.0 - 1.5
86 | })
87 |
88 | startSound.play()
89 | this._lastRaf = requestAnimationFrame(this.tick)
90 | }
91 |
92 | stop() {
93 | this.isStopped = true
94 | requestAnimationFrame.cancel(this._lastRaf)
95 | }
96 |
97 | redraw(delta) {
98 | const fps = delta ? 1000.0 / delta : 0.0
99 | this.fpsCounter.textContent =
100 | `delta: ${delta.toFixed(6)} fps: ${fps.toFixed(6)}\n` +
101 | `game: theseguys.io`
102 |
103 | for (var i = 0; i < this.boids.length; ++i) {
104 | const b = this.boids[i]
105 | const angle = Math.atan2(b.vy, b.vx)
106 |
107 | // Update element's transform style
108 | const element = this.boidElements[i]
109 |
110 | element.style.transform = `
111 | translate3d(${b.x}px, ${b.y}px, 0.0px)
112 | rotate(${angle}rad)`
113 | }
114 | }
115 |
116 | tick = ts => {
117 | if (this.isStopped) return
118 |
119 | this._lastRaf = requestAnimationFrame(this.tick)
120 |
121 | // calculate delta
122 | const prevTs = this.prevTs || ts
123 | const delta = Math.min(100.0, ts - prevTs) || 0.0001
124 | this.prevTs = ts
125 |
126 | this.doPhysics(delta)
127 | this.redraw(delta)
128 | }
129 |
130 | doPhysics(delta) {
131 | const detector = new NeighbourDetector(this.boids)
132 |
133 | this.boids.forEach((b, i) => {
134 | if (!b.active) return
135 |
136 | let cx = 0.0
137 | let cy = 0.0
138 | let cvx = 0.0
139 | let cvy = 0.0
140 |
141 | let collisionx = 0.0
142 | let collisiony = 0.0
143 |
144 | let n1 = 0
145 | let n2 = 0
146 |
147 | let nearestBoids = detector.detect(b.x, b.y, 100)
148 |
149 | nearestBoids.forEach((ob, j) => {
150 | if (i === j || !ob.active) {
151 | return
152 | }
153 |
154 | let d = Math.sqrt(
155 | (ob.x - b.x) * (ob.x - b.x) + (ob.y - b.y) * (ob.y - b.y)
156 | )
157 |
158 | if (d < alphaRadius) {
159 | cx += ob.x
160 | cy += ob.y
161 | n1 += 1
162 | }
163 |
164 | if (d < betaRadius) {
165 | cvx += ob.vx
166 | cvy += ob.vy
167 | n2 += 1
168 | }
169 |
170 | if (d < gammaRadius) {
171 | collisionx += ob.x - b.x
172 | collisiony += ob.y - b.y
173 | }
174 | })
175 |
176 | cx = n1 ? cx / n1 : 0.0
177 | cy = n1 ? cy / n1 : 0.0
178 | cvx = n2 ? cvx / n2 : 0.0
179 | cvy = n2 ? cvy / n2 : 0.0
180 |
181 | const _alpha = this.alphaLaw ? alpha : 0.0
182 | const _beta = this.betaLaw ? beta : 0.0
183 | const _gamma = this.gammaLaw ? gamma : 0.0
184 |
185 | let vx1 = (cx - b.x) * _alpha
186 | let vy1 = (cy - b.y) * _alpha
187 |
188 | let vx2 = (cvx - b.vx) * _beta
189 | let vy2 = (cvy - b.vy) * _beta
190 |
191 | let vx3 = collisionx * _gamma
192 | let vy3 = collisiony * _gamma
193 |
194 | const attrC = this.attractLaw ? attraction : 0.0
195 |
196 | b.vx +=
197 | vx1 +
198 | vx2 +
199 | vx3 +
200 | theta * b.vx +
201 | attrC * (this.width * this.targetX - b.x)
202 | b.vy +=
203 | vy1 +
204 | vy2 +
205 | vy3 +
206 | theta * b.vy +
207 | attrC * (this.height * this.targetY - b.y)
208 |
209 | if (this.explode) {
210 | const [eX, eY] = this.explode
211 |
212 | const r = distance(eX, eY, b.x, b.y) || 0.01
213 |
214 | b.vx += explosionBounce * (b.x - eX) / (r * r)
215 | b.vy += explosionBounce * (b.y - eY) / (r * r)
216 | }
217 |
218 | b.x += b.vx
219 | b.y += b.vy
220 |
221 | if (b.x <= 0.0) {
222 | b.x = 0.0
223 | b.vx = -1.0 * b.vx
224 | }
225 |
226 | if (b.x >= this.width) {
227 | b.x = this.width
228 | b.vx = -1.0 * b.vx
229 | }
230 |
231 | if (b.y <= 0.0) {
232 | b.y = 0.0
233 | b.vy = -1.0 * b.vy
234 | }
235 |
236 | if (b.y >= this.height) {
237 | b.y = this.height
238 | b.vy = -1.0 * b.vy
239 | }
240 | })
241 |
242 | this.explode = null
243 | }
244 | }
245 |
246 | export default Simulator
247 |
--------------------------------------------------------------------------------
/src/slides/enter-exit/01-dialog-enter.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable react/no-find-dom-node */
2 | import React, { Component } from 'react'
3 | import { findDOMNode } from 'react-dom'
4 |
5 | import Velocity from 'velocity-animate'
6 |
7 | import FakeDialog from './fake-dialog'
8 |
9 | class AppearableDialog extends Component {
10 | componentDidMount() {
11 | const { slow } = this.props
12 | const root = findDOMNode(this)
13 |
14 | if (!root) {
15 | return
16 | }
17 |
18 | const duration = slow ? 2000 : 600
19 |
20 | Velocity(root, { scale: 0.3, opacity: 0 }, { duration: 0 })
21 | Velocity(
22 | root,
23 | { scale: 1.0, opacity: 1 },
24 | { duration: duration, easing: [55, 7] }
25 | )
26 | }
27 |
28 | render() {
29 | return
63 | {this.props.active && }
64 |
65 | )
66 | }
67 | }
68 |
69 | export default DialogExit
70 |
--------------------------------------------------------------------------------
/src/slides/enter-exit/animated.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable react/no-find-dom-node */
2 | import React, { Component } from 'react'
3 |
4 | const animationStates = {
5 | IDLE: 'IDLE',
6 | ENTERING: 'ENTERING',
7 | ENTERED: 'ENTERED',
8 | EXITING: 'EXITING',
9 | EXITED: 'EXITED'
10 | }
11 |
12 | const st = animationStates
13 |
14 | class Animated extends Component {
15 | constructor(props) {
16 | super(props)
17 |
18 | this._anims = []
19 |
20 | this.state = {
21 | ghostChildren: props.children,
22 | animationState: st.EXITED
23 | }
24 | }
25 |
26 | // Dummiest animation manager ever.
27 | // Simply saves animation handles and cancels
28 | // them all on demand.
29 | registerAnimation(descriptor) {
30 | descriptor && this._anims.push(descriptor)
31 | }
32 |
33 | cancelAllAnimations() {
34 | this._anims.forEach(anim => anim.cancel())
35 | this._anims.splice(0, this._anims.length)
36 | }
37 |
38 | componentWillUnmount() {
39 | this.cancelAllAnimations()
40 | this._unmounted = true
41 | }
42 |
43 | changeAnimationState(state, cb) {
44 | const stateName = state.animationState
45 |
46 | if (stateName) {
47 | this.props.onAnimationState(stateName)
48 | }
49 |
50 | return this.setState(state, cb)
51 | }
52 |
53 | transitionState(transitionTo, options = {}) {
54 | const transitionFrom = this.state.animationState
55 |
56 | // Do nothing
57 | if (transitionFrom === transitionTo) {
58 | return
59 | }
60 |
61 | // terminal states
62 | if (transitionTo === st.ENTERED) {
63 | return this.changeAnimationState({
64 | animationState: st.ENTERED
65 | })
66 | }
67 |
68 | if (transitionTo === st.EXITED) {
69 | return this.changeAnimationState({
70 | animationState: st.EXITED
71 | })
72 | }
73 |
74 | if (transitionTo === st.ENTERING) {
75 | return this.changeAnimationState(
76 | {
77 | animationState: st.ENTERING
78 | },
79 | () => {
80 | this.cancelAllAnimations()
81 |
82 | if (!this.$content || !this.$content.animateAppear) {
83 | return this.transitionState(st.ENTERED)
84 | }
85 |
86 | const animation = this.$content.animateAppear()
87 |
88 | animation.then(() => {
89 | if (!this._unmounted && this.state.animationState !== st.EXITING) {
90 | this.transitionState(st.ENTERED)
91 | }
92 | })
93 | this.registerAnimation(animation)
94 | }
95 | )
96 | }
97 |
98 | if (transitionTo === st.EXITING) {
99 | return this.changeAnimationState(
100 | {
101 | animationState: st.EXITING,
102 | ghostChildren: options.children
103 | },
104 | () => {
105 | this.cancelAllAnimations()
106 |
107 | if (!this.$content || !this.$content.animateExit) {
108 | return this.transitionState(st.EXITED)
109 | }
110 |
111 | const animation = this.$content.animateExit()
112 | animation.then(() => {
113 | if (!this._unmounted && this.state.animationState !== st.ENTERING) {
114 | this.transitionState(st.EXITED)
115 | }
116 | })
117 | this.registerAnimation(animation)
118 | }
119 | )
120 | }
121 | }
122 |
123 | componentWillReceiveProps(nextProps) {
124 | if (this.props.children && !nextProps.children) {
125 | return this.transitionState(st.EXITING, { children: this.props.children })
126 | }
127 |
128 | if (!this.props.children && nextProps.children) {
129 | return this.transitionState(st.ENTERING)
130 | }
131 | }
132 |
133 | componentDidMount() {
134 | this.transitionState(st.ENTERING)
135 | }
136 |
137 | registerElement = node => (this.$content = node)
138 |
139 | render() {
140 | const { animationState, ghostChildren } = this.state
141 |
142 | // This flags shows if we have to render 'ghost'
143 | // version of the children prop.
144 | // Only works when exit animation is performing
145 | const shouldRenderGhost = animationState === st.EXITING
146 | const childrenToRender = shouldRenderGhost
147 | ? ghostChildren
148 | : this.props.children
149 |
150 | // Nothing to render yet
151 | if (!childrenToRender) {
152 | return null
153 | }
154 |
155 | return React.cloneElement(childrenToRender, { ref: this.registerElement })
156 | }
157 | }
158 |
159 | export default Animated
160 |
--------------------------------------------------------------------------------
/src/slides/enter-exit/fake-dialog.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 | import styled from 'styled-components'
3 |
4 | class FakeDialog extends Component {
5 | render() {
6 | return (
7 |
8 |
18 |
19 |
20 |
21 |
22 | )
23 | }
24 | }
25 |
26 | const Buttons = styled.div`
27 | display: flex;
28 | flex-flow: row nowrap;
29 | justify-content: space-between;
30 | width: 240px;
31 | margin-top: 22px;
32 | `
33 |
34 | const Button = styled.div`
35 | opacity: 0.5;
36 | background: linear-gradient(-180deg, #80c3f3 0%, #4a90e2 100%);
37 | border-radius: 100px;
38 |
39 | width: 114px;
40 | height: 30px;
41 |
42 | ${props =>
43 | props.disabled &&
44 | `
45 | opacity: 0.4;
46 | background: #E6E6E6;
47 | border-radius: 100px;
48 | `};
49 | `
50 |
51 | const Avatar = styled.div`
52 | width: 48px;
53 | height: 48px;
54 | border-radius: 48px;
55 | opacity: 0.5;
56 | background-image: linear-gradient(-180deg, #a7f0d1 0%, #6edda4 100%);
57 | margin-top: 26px;
58 | margin-bottom: 24px;
59 | `
60 |
61 | const Line = styled.div`
62 | width: 240px;
63 | height: 10px;
64 | background: #f3f3f3;
65 | margin-bottom: 8px;
66 | `
67 |
68 | const Header = styled.div`
69 | background: #f3f3f3;
70 | width: 128px;
71 | height: 10px;
72 | margin-bottom: 18px;
73 | `
74 |
75 | const DialogBody = styled.div`
76 | width: 350px;
77 | height: 270px;
78 | border-radius: 12px;
79 | background: white;
80 | position: relative;
81 |
82 | display: flex;
83 | flex-flow: column nowrap;
84 | align-items: center;
85 |
86 | box-shadow: 0 0px 1px 0 rgba(0, 0, 0, 0.1), 0 2px 3px 0 rgba(0, 0, 0, 0.05),
87 | 0 2px 32px 0 rgba(0, 0, 0, 0.05);
88 | `
89 |
90 | const CloseButton = styled.div`
91 | width: 24px;
92 | height: 24px;
93 | position: absolute;
94 | top: 14px;
95 | right: 14px;
96 |
97 | background: url(./images/dialog-close.svg);
98 | `
99 |
100 | export default FakeDialog
101 |
--------------------------------------------------------------------------------
/src/slides/enter-exit/index.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 | import styled from 'styled-components'
3 |
4 | import { Slide } from 'presa'
5 | import Button from 'blocks/button'
6 |
7 | import DialogEnter from './01-dialog-enter'
8 | import DialogExit from './02-dialog-exit'
9 | import StateMonitor from './state-monitor'
10 |
11 | class HooksSlide extends Component {
12 | constructor() {
13 | super()
14 | this.state = {
15 | isActive: true,
16 | slow: false,
17 | showMonitor: true,
18 | animationState: null
19 | }
20 | }
21 |
22 | handleAnimationState = stateName => {
23 | this.setState({
24 | animationState: stateName
25 | })
26 | }
27 |
28 | render() {
29 | const { isActive, slow, showMonitor } = this.state
30 |
31 | let DialogComponent = null
32 | let hasMonitor = false
33 |
34 | switch (this.props.example) {
35 | case 'enter':
36 | DialogComponent = DialogEnter
37 | break
38 |
39 | case 'exit':
40 | hasMonitor = true
41 | DialogComponent = DialogExit
42 | break
43 | }
44 |
45 | return (
46 |
47 |
48 |
77 |
78 |
84 |
85 | {hasMonitor &&
86 | this.state.showMonitor && (
87 |
88 |
90 | )}
91 |
92 |
93 |
94 | )
95 | }
96 | }
97 |
98 | const SlideLayout = styled.div`
99 | width: 100%;
100 | height: 100%;
101 | display: flex;
102 | flex-flow: column;
103 | align-items: center;
104 | `
105 |
106 | const DialogPreview = styled.div`
107 | transform: scale(1.1, 1.1);
108 | padding-top: 60px;
109 | padding-bottom: 60px;
110 | pointer-events: none;
111 |
112 | display: flex;
113 | align-items: center;
114 | justify-content: center;
115 |
116 | height: 290px;
117 | width: 400px;
118 | `
119 |
120 | const Showcase = styled.div`
121 | display: flex;
122 | align-items: center;
123 | margin-top: 60px;
124 | `
125 |
126 | const Monitor = styled.div`
127 | width: 300px;
128 | margin-left: 60px;
129 | padding-left: 60px;
130 | border-left: 2px solid rgba(0, 0, 0, 0.02);
131 | `
132 |
133 | export default HooksSlide
134 |
--------------------------------------------------------------------------------
/src/slides/enter-exit/state-monitor.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 | import styled from 'styled-components'
3 | import colors from 'colors'
4 |
5 | const StateEntry = props => (
6 |
7 |
9 |
11 |
12 | )
13 |
14 | class StateMonitor extends Component {
15 | render() {
16 | return (
17 |
7 |
8 |
9 | Ideal Animation
10 |
11 | runs smoothly within
equal periods of time 12 |
13 |
14 |
15 |
16 | 
17 |
18 |
19 |
20 | )
21 |
22 | export const AnimationsRealitySlide = () => (
23 |
24 |
25 |
26 | setTimeout
27 |
28 | not guaranteed to be executed in given time interval
29 |
30 |
31 |
32 |
33 | 
34 |
35 |
36 |
37 |
38 |
39 | requestAnimationFrame
40 |
41 | schedule a call before the next browser repaint
42 |
43 |
44 |
45 |
46 | 
47 |
48 |
49 |
50 | )
51 |
52 | const Column = styled.div`
53 | display: flex;
54 | width: 100%;
55 | align-items: center;
56 | margin: 20px;
57 | `
58 |
59 | const Row = styled.div`
60 | width: 50%;
61 | padding: 20px 35px;
62 | text-align: left;
63 |
64 | &:first-child {
65 | text-align: right;
66 | }
67 | `
68 |
69 | const Header = styled.div`
70 | font-size: 28px;
71 | margin-bottom: 8px;
72 | `
73 |
74 | const Description = styled.div`
75 | font-size: 24px;
76 | color: #656565;
77 | `
78 |
--------------------------------------------------------------------------------
/src/slides/etc/golden-rule.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import styled from 'styled-components'
3 | import { Slide } from 'presa'
4 |
5 | export const GoldenRuleSlide = () => (
6 |
7 |
8 |
9 |
10 | Keep the component's interfrace
as pure as possible and 11 | make sure
its side-effects don't break the contract. 12 |
13 |
14 | )
15 |
16 | export const ReverseRuleSlide = () => (
17 |
18 |
19 |
20 |
21 | You can use only pure state changes
22 |
in order to trigger animations 23 |
24 |
25 | 
26 |
27 | the traditional alternative is to use refs or PubSub
28 |
29 | )
30 |
31 | const Label = styled.div`
32 | text-transform: uppercase;
33 | font-weight: 600;
34 | color: #a08447;
35 | font-size: 18px;
36 | letter-spacing: 0.2px;
37 | margin-bottom: 20px;
38 | `
39 |
40 | const Rule = styled.div`
41 | font-size: 28px;
42 | line-height: 1.4;
43 | margin-bottom: 28px;
44 | `
45 |
46 | const Comment = styled.div`
47 | margin-top: 32px;
48 | font-size: 22px;
49 | color: #808080;
50 | `
51 |
--------------------------------------------------------------------------------
/src/slides/etc/links.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import styled from 'styled-components'
3 | import { Slide, BuiltWithPresa } from 'presa'
4 |
5 | const LinksSlide = () => (
6 |
7 | link to the slides
8 |
9 | 👉
10 |
14 | molefrog.com/stateful-animations
15 |
16 |
17 | source code
18 |
19 | ⭐️
20 |
24 | github.com/molefrog/stateful-animations
25 |
26 |
27 | slides made with
28 |
29 | 🔥
30 |
31 | github.com/molefrog/presa
32 |
33 |
34 |
50 |
51 | )
52 |
53 | export default LinksSlide
54 |
55 | const Footer = styled.div`
56 | display: flex;
57 | align-items: center;
58 | justify-content: space-between;
59 | margin-top: 140px;
60 | margin-bottom: 10px;
61 | `
62 |
63 | const OwnContacts = styled.div`
64 | font-size: 22px;
65 | font-weight: 500;
66 | &,
67 | a {
68 | color: #3f5ffb;
69 | }
70 | `
71 |
72 | const LinkWrap = styled.div`
73 | display: flex;
74 | margin-top: 4px;
75 | margin-bottom: 32px;
76 | `
77 |
78 | const LinkIcon = styled.div`
79 | font-size: 36px;
80 | margin-right: 10px;
81 | `
82 |
83 | const FinalLink = styled.a`
84 | font-size: 32px;
85 | font-weight: 500;
86 | text-decoration: underline;
87 | color: #333;
88 | padding: 0 8px;
89 | transition: all 0.2s ease;
90 |
91 | &:hover {
92 | background: #333;
93 | color: white;
94 | }
95 | `
96 |
--------------------------------------------------------------------------------
/src/slides/etc/resources.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Slide } from 'presa'
3 | import styled from 'styled-components'
4 |
5 | const Video = ({ thumb, url, title, author }) => (
6 |
7 | {title}
9 | {author}
10 |
11 | )
12 |
13 | class ResourcesSlide extends React.Component {
14 | render() {
15 | return (
16 |
17 |
18 |
24 |
30 |
36 |
42 |
48 |
49 |
55 |
56 |
57 | )
58 | }
59 | }
60 |
61 | const VideoGrid = styled.div`
62 | display: flex;
63 | flex-flow: row wrap;
64 | `
65 |
66 | const VideoAuthor = styled.div`
67 | font-size: 17px;
68 | `
69 |
70 | const VideoName = styled.div`
71 | font-size: 18px;
72 | font-weight: 500;
73 | margin-bottom: 2px;
74 | `
75 |
76 | const VideoThumb = styled.div`
77 | width: 260px;
78 | height: 170px;
79 |
80 | margin-bottom: 10px;
81 |
82 | background-size: cover;
83 | background-position: top left;
84 | box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.08),
85 | 0px 0px 8px rgba(0, 0, 0, 0.05);
86 |
87 | border-radius: 4px;
88 | `
89 |
90 | const VideoItem = styled.a`
91 | margin: 0 11px;
92 | margin-bottom: 42px;
93 | text-decoration: none;
94 | color: inherit;
95 |
96 | &:hover {
97 | ${VideoThumb} {
98 | box-shadow: 0px 0px 0px 3px #3f5ffb;
99 | }
100 | }
101 | `
102 |
103 | export default ResourcesSlide
104 |
--------------------------------------------------------------------------------
/src/slides/etc/summary.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Slide } from 'presa'
3 | import styled from 'styled-components'
4 |
5 | class SummarySlide extends React.Component {
6 | render() {
7 | return (
8 |
9 |
10 |
22 |
23 |
24 |
33 |
34 |
35 |
44 |
45 |
46 |
52 |
53 | )
54 | }
55 | }
56 |
57 | const MethodDesc = styled.div`
58 | line-height: 1.35;
59 | `
60 |
61 | const MethodName = styled.div`
62 | font-size: 26px;
63 | margin-bottom: 10px;
64 | font-weight: 500;
65 | `
66 |
67 | const Icon = styled.img`
68 | margin-right: 32px;
69 | flex-shrink: 0;
70 | `
71 |
72 | const Line = styled.div`
73 | display: flex;
74 | margin-bottom: 38px;
75 |
76 | ${props =>
77 | props.extra &&
78 | `
79 | border-top: 2px solid #ddd;
80 | padding-top: 25px;
81 | `};
82 | `
83 |
84 | export default SummarySlide
85 |
--------------------------------------------------------------------------------
/src/slides/flip/animated-route.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 | import styled from 'styled-components'
3 |
4 | class Route extends Component {
5 | getLayerOpacity() {
6 | const { debug, animationState } = this.props
7 |
8 | // for debug purposes
9 | const semiTransparent = 0.3
10 |
11 | switch (animationState) {
12 | case 'entering':
13 | return debug ? semiTransparent : 0.0
14 | case 'entered':
15 | return 1.0
16 |
17 | case 'exiting':
18 | return 1.0
19 |
20 | case 'exited':
21 | return 0.0
22 | }
23 | }
24 | render() {
25 | const { debug, isList, animationState } = this.props
26 |
27 | const isAbsolute =
28 | animationState === 'exiting' || animationState === 'exited'
29 |
30 | // for debug mode
31 | const layerOffset = -30 + -75 * (isList ? -1 : 0)
32 | const debugBackground = isList
33 | ? 'rgba(233, 30, 99, 0.2)'
34 | : 'rgba(33, 150, 243, 0.2)'
35 |
36 | return (
37 |
43 |
44 | position: {isAbsolute ? 'absolute' : 'static'}
45 |
46 |
47 |
52 | {this.props.children}
53 |
54 |
55 | )
56 | }
57 | }
58 |
59 | const Content = styled.div`
60 | width: 100%;
61 | height: 100%;
62 | transition: ${props => (props.debug ? 'opacity 0.3s ease' : 'none')};
63 | border-radius: 5px;
64 | background: rgba(0, 0, 0, 0);
65 | padding: 25px 30px;
66 | opacity: ${props => props.opacity};
67 | `
68 |
69 | const DebugInfo = styled.div`
70 | position: absolute;
71 | left: 60%;
72 | top: 100%;
73 | width: 300px;
74 | color: #333;
75 |
76 | padding: 14px 0;
77 | font-size: 24px;
78 | font-weight: 500;
79 | transition: opacity 0.3s ease;
80 |
81 | opacity: ${props => (props.visible ? 1 : 0)};
82 | font-family: ${props => props.theme.slide.monoFont};
83 | `
84 |
85 | const Container = styled.div`
86 | width: 100%;
87 | height: 100%;
88 |
89 | * {
90 | box-sizing: border-box;
91 | }
92 |
93 | transition: border-color 0.6s ease, transform 0.6s ease;
94 | will-change: transform;
95 | border: 2.5px solid transparent;
96 | border-radius: 6px;
97 | border-color: #efefef;
98 |
99 | // 3d perspective
100 | ${props =>
101 | props.debug &&
102 | `
103 | transform: rotateX(-60deg) rotateZ(-40deg) translateZ(${props.zOffset}px);
104 | border-color: ${props.debugBackground};
105 | `};
106 |
107 | ${props =>
108 | props.isAbsolute &&
109 | `
110 | position: absolute;
111 | top: 0;
112 | left: 0;
113 | `};
114 | `
115 |
116 | export default Route
117 |
--------------------------------------------------------------------------------
/src/slides/flip/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Slide } from 'presa'
3 | import styled from 'styled-components'
4 |
5 | // Animation utils
6 | import Transition from 'react-transition-group/Transition'
7 | import Velocity from 'velocity-animate'
8 |
9 | import Route from './animated-route'
10 | import Button from 'blocks/button'
11 |
12 | // getBoundingClientRect will not work properly with transforms
13 | // (in demo mode only!), so we use this replacement.
14 | //
15 | // Change it to `getBoundingClientRect` when using in your project.
16 | const getBoundingClientRect = el => {
17 | return {
18 | top: el.offsetTop,
19 | left: el.offsetLeft,
20 | width: el.offsetWidth,
21 | height: el.offsetHeight
22 | }
23 | }
24 |
25 | class FlipSlide extends React.Component {
26 | constructor(props) {
27 | super(props)
28 |
29 | this.state = {
30 | isList: true,
31 | debug: false
32 | }
33 | }
34 |
35 | getDuration() {
36 | // make it slower in debug mode
37 | return this.state.debug ? 1500 : 500
38 | }
39 |
40 | switchRoute = () => {
41 | this.setState(state => ({
42 | isList: !state.isList
43 | }))
44 | }
45 |
46 | // Perform FLIP animation of a card
47 | animateFlip = inTransition => {
48 | const source = inTransition ? this._smallCard : this._bigCard
49 | const target = inTransition ? this._bigCard : this._smallCard
50 |
51 | const sR = getBoundingClientRect(source)
52 | const tR = getBoundingClientRect(target)
53 |
54 | Velocity(
55 | source,
56 | {
57 | translateX: tR.left - sR.left,
58 | translateY: tR.top - sR.top,
59 | scale: tR.width / sR.width
60 | },
61 | { duration: this.getDuration(), easing: 'easeInOutQuart' }
62 | )
63 |
64 | // Return the element back the original state.
65 | // Only need this line because both layers stay in DOM
66 | // during the demo. Consider this a hack.
67 | Velocity(
68 | source,
69 | {
70 | translateX: 0,
71 | translateY: 0,
72 | scale: 1
73 | },
74 | { duration: 0, delay: 350 }
75 | )
76 | }
77 |
78 | render() {
79 | const duration = this.getDuration()
80 |
81 | return (
82 |
83 |
84 |
91 |
92 |
93 |
94 | this.animateFlip(true)}
98 | >
99 | {transState => {
100 | const hideRest = transState !== 'entered'
101 |
102 | return (
103 |
108 |
121 | )
122 | }}
123 |
124 |
125 | this.animateFlip(false)}
129 | >
130 | {transState => {
131 | const hideRest = transState !== 'entered'
132 |
133 | return (
134 |
139 |
140 | {
142 | el && (this._bigCard = el)
143 | }}
144 | />
145 |
146 |
153 |
154 |
155 | )
156 | }}
157 |
158 |
159 |
160 | )
161 | }
162 | }
163 |
164 | const SingleView = styled.div`
165 | display: flex;
166 | `
167 |
168 | const BigPreview = styled.div`
169 | transform-origin: top left;
170 | width: 260px;
171 | height: 300px;
172 |
173 | background: #b6e6ff;
174 | border-radius: 12px;
175 | `
176 |
177 | const FakeText = styled.div`
178 | transition: opacity ${props => props.duration * 0.5 / 1000.0}s ease;
179 | opacity: ${props => (props.transparent ? 0 : 1)};
180 | padding-top: 26px;
181 | `
182 |
183 | const FakeTextLine = styled.div`
184 | width: 180px;
185 | height: 26px;
186 | background: rgba(42, 108, 159, 0.05);
187 | border-radius: 3px;
188 |
189 | margin-bottom: 18px;
190 | margin-left: 32px;
191 | `
192 |
193 | const List = styled.div`
194 | display: grid;
195 | padding-top: 20px;
196 |
197 | grid-column-gap: 20px;
198 | grid-row-gap: 24px;
199 | justify-content: center;
200 |
201 | grid-template-columns: repeat(auto-fill, 130px);
202 | grid-auto-flow: dense;
203 | `
204 |
205 | const ListItem = styled.div`
206 | transform-origin: top left;
207 | width: 130px;
208 | height: 150px;
209 |
210 | border-radius: 6px;
211 | will-change: transform;
212 |
213 | transition: opacity ${props => props.duration * 0.5 / 1000.0}s ease;
214 | opacity: ${props => (props.transparent ? 0 : 1)};
215 |
216 | &:nth-child(1) {
217 | background: #e5e9f2;
218 | }
219 |
220 | &:nth-child(2) {
221 | background: #ffe8e6;
222 | }
223 |
224 | &:nth-child(3) {
225 | background: #fff4d6;
226 | }
227 |
228 | &:nth-child(4) {
229 | background: #c3ffc6;
230 | }
231 |
232 | &:nth-child(5) {
233 | background: #b6e6ff;
234 | }
235 |
236 | &:nth-child(6) {
237 | background: #f3e7ff;
238 | }
239 | `
240 |
241 | const Controls = styled.div`
242 | display: flex;
243 | align-items: center;
244 | margin-bottom: 26px;
245 | `
246 |
247 | const WorkArea = styled.div`
248 | width: 540px;
249 | height: 420px;
250 |
251 | position: relative;
252 | cursor: pointer;
253 |
254 | perspective: 0px;
255 | transition: transform 0.5s ease;
256 | `
257 |
258 | export default FlipSlide
259 |
--------------------------------------------------------------------------------
/src/slides/golden-rule/index.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/molefrog/stateful-animations/e237ff128cb9b113ade862c147dcfe2686499576/src/slides/golden-rule/index.js
--------------------------------------------------------------------------------
/src/slides/motion-ghost-slide.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 | import { Motion, TransitionMotion, spring, presets } from 'react-motion'
3 |
4 | import { Slide } from 'presa'
5 | import Button from 'blocks/button'
6 |
7 | // Utils
8 | const makeKey = (t, i) => `${t}-${i}`
9 | const nextTick = fn => setTimeout(fn, 0)
10 |
11 | /*
12 | * UI-related options: colors, sizes etc.
13 | */
14 | const options = {
15 | boxColor: '#F62466',
16 | timelineColor: '#CFCFCF',
17 | pointColor: '#2AD58B',
18 | pointSelectedColor: '#F62466',
19 | edgeColor: '#4094ED',
20 |
21 | width: 800,
22 | height: 400,
23 | timelineWidth: 500
24 | }
25 |
26 | /*
27 | * Box entity component
28 | */
29 | const Entity = ({ t, opacity, width, radius = 50 }) => (
30 |
38 |
48 | )
49 |
50 | class MotionGhost extends Component {
51 | constructor() {
52 | super()
53 | this.state = {
54 | alpha: 0.0,
55 | ghosts: [],
56 | currentTime: null,
57 | isWobble: false
58 | }
59 |
60 | this.handleMouseMove = this.handleMouseMove.bind(this)
61 | this.handleMouseLeave = this.handleMouseLeave.bind(this)
62 | this.switchCorners = this.switchCorners.bind(this)
63 | }
64 |
65 | switchCorners() {
66 | this.setState({
67 | alpha: this.state.alpha ? 0.0 : 1.0,
68 | ghosts: []
69 | })
70 | }
71 |
72 | componentWillUnmount() {
73 | clearTimeout(this._lastTick)
74 | }
75 |
76 | componentDidMount() {
77 | if (!this.state.ghosts.length) {
78 | this.switchCorners()
79 | }
80 | }
81 |
82 | handleMouseMove(event) {
83 | const { left, width } = event.currentTarget.getBoundingClientRect()
84 |
85 | const x = (event.pageX - left) / width
86 |
87 | const padRatio =
88 | 0.5 * (options.width - options.timelineWidth) / options.width
89 | const tx = Math.max(0, x - padRatio) / (1.0 - 2 * padRatio)
90 |
91 | const sorted = [...this.state.ghosts, 1.0, 0.0].sort(
92 | (a, b) => Math.abs(a - tx) - Math.abs(b - tx)
93 | )
94 |
95 | const current = sorted[0]
96 |
97 | if (this.state.currentTime !== current) {
98 | this.setState({ currentTime: current })
99 | }
100 | }
101 |
102 | handleMouseLeave() {
103 | this.setState({ currentTime: null })
104 | }
105 |
106 | render() {
107 | const controlPoints = 30
108 | const { width, height, timelineWidth } = options
109 | const { currentTime, alpha, isWobble } = this.state
110 |
111 | const springParams = isWobble
112 | ? { stiffness: 100, damping: 10 }
113 | : { stiffness: 120, damping: 30 }
114 |
115 | const timelineMargins = 20
116 |
117 | return (
118 |
119 |
252 |
253 |
267 | )
268 | }
269 | }
270 |
271 | export default MotionGhost
272 |
--------------------------------------------------------------------------------
/src/slides/own-render/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Slide } from 'presa'
3 | import styled from 'styled-components'
4 |
5 | import Rotator from './rotator'
6 | import DynamicCode from 'blocks/dynamic-code'
7 | import Button from 'blocks/button'
8 | import { Code } from 'presa/blocks'
9 |
10 | const demoBg = '#dfe5f3'
11 |
12 | const RotatorCode = ({ mouseX, mouseY, rotX, rotY }) => (
13 |
14 | {'
20 | )
21 |
22 | const InnerCode = ({ mouseX, mouseY, rotX, rotY }) => (
23 |
24 | {"// Rotator's internal state:\nthis.x = "}
25 |
30 | )
31 |
32 | class WebglSlide extends React.Component {
33 | constructor(props) {
34 | super(props)
35 |
36 | this.state = {
37 | isControlled: false,
38 | mouseX: 0.0,
39 | mouseY: 0.0,
40 | rotX: 0.0,
41 | rotY: 0.0
42 | }
43 | }
44 |
45 | handleMouseMove = event => {
46 | const rect = event.currentTarget.getBoundingClientRect()
47 |
48 | this.setState({
49 | mouseX: (event.clientX - rect.left) / rect.width,
50 | mouseY: (event.clientY - rect.top) / rect.height
51 | })
52 | }
53 |
54 | handleTick = (x, y) => {
55 | this.setState({
56 | rotX: x,
57 | rotY: y
58 | })
59 | }
60 |
61 | render() {
62 | return (
63 |
64 |
65 |
66 |
67 |
78 |
79 |
80 |
84 | {!this.state.isControlled && (
85 |
98 |
99 |
100 |
101 |
109 |
110 |
111 | )
112 | }
113 | }
114 |
115 | const Extra = styled.div`
116 | border-top: 2px solid #eee;
117 | margin-top: 34px;
118 | padding-top: 34px;
119 | `
120 |
121 | const Buttons = styled.div`
122 | display: flex;
123 | justify-content: flex-start;
124 | margin-bottom: 28px;
125 | `
126 |
127 | const Layout = styled.div`
128 | width: 100%;
129 | height: 100%;
130 | display: flex;
131 | `
132 |
133 | const Demo = styled.div`
134 | flex: 3 0;
135 | background: ${demoBg};
136 | display: flex;
137 | align-items: center;
138 | justify-content: center;
139 | `
140 |
141 | const Side = styled.div`
142 | flex: 2 0;
143 | padding: 2em 2.5em;
144 | `
145 |
146 | export default WebglSlide
147 |
--------------------------------------------------------------------------------
/src/slides/own-render/rotator.js:
--------------------------------------------------------------------------------
1 | import requestAnimationFrame from 'raf'
2 | import React from 'react'
3 |
4 | import {
5 | Scene,
6 | PerspectiveCamera,
7 | WebGLRenderer,
8 | MeshNormalMaterial,
9 | IcosahedronGeometry,
10 | Mesh
11 | } from 'three'
12 |
13 | class Rotator extends React.Component {
14 | static defaultProps = {
15 | size: 500,
16 | background: '#ffffff'
17 | }
18 |
19 | doRender = ts => {
20 | if (this.destroy) {
21 | return
22 | }
23 |
24 | // Schedule next frame
25 | requestAnimationFrame(this.doRender)
26 |
27 | // Calculate frame delta
28 | const prevTs = this.prevTs || ts
29 | this.prevTs = ts
30 | const delta = Math.min(100.0, ts - prevTs)
31 |
32 | const targetX = 4 * Math.PI * (this.mouseX || 0.0)
33 | const targetY = 3 * Math.PI * (this.mouseY || 0.0)
34 |
35 | if (this.props.controlled) {
36 | // P-controller parameter (depends on delta!)
37 | const p = 0.001 * delta
38 |
39 | this.cube.rotation.z += p * (targetX - this.cube.rotation.z)
40 | this.cube.rotation.x += p * (targetY - this.cube.rotation.x)
41 | } else {
42 | this.cube.rotation.z = targetX
43 | this.cube.rotation.x = targetY
44 | }
45 |
46 | this.props.onTick(this.cube.rotation.z, this.cube.rotation.x)
47 |
48 | this.renderer.setClearColor(this.props.background, 1)
49 | this.renderer.render(this.scene, this.camera)
50 | }
51 |
52 | componentDidMount() {
53 | const { size } = this.props
54 | this.scene = new Scene()
55 | this.camera = new PerspectiveCamera(75, size / size, 0.1, 1000)
56 |
57 | // Init WebGL renderer
58 | this.renderer = new WebGLRenderer()
59 | this.renderer.setSize(size, size)
60 | this.renderer.setClearColor(this.props.background, 1)
61 | this._root.appendChild(this.renderer.domElement)
62 |
63 | var geometry = new IcosahedronGeometry(1, 1)
64 | var material = new MeshNormalMaterial({ flatShading: true })
65 | this.cube = new Mesh(geometry, material)
66 | this.scene.add(this.cube)
67 | this.camera.position.z = 2
68 |
69 | requestAnimationFrame(this.doRender)
70 | }
71 |
72 | componentWillUnmount() {
73 | // Three.js doesn't provide good methods for disposal
74 | this.destroy = true
75 | }
76 |
77 | componentWillReceiveProps(nextProps) {
78 | this.mouseX = nextProps.rotX
79 | this.mouseY = nextProps.rotY
80 | }
81 |
82 | // Do not rerender
83 | shouldComponentUpdate() {
84 | return false
85 | }
86 |
87 | render() {
88 | return (
89 |
39 |
51 | )
52 | }
53 |
54 | // ---
55 | // Считает, кто на сколько поменялся
56 | // [
57 | // { name: 'Obama', id: 1, count: 3 },
58 | // { name: 'Hillary', id: 2, count: -2 }
59 | // ]
60 | // ---
61 | votersDiff (prevProps) {
62 | if (!prevProps || !prevProps.poll) {
63 | return []
64 | }
65 |
66 | const poll = this.props.poll
67 | const pollWas = prevProps.poll
68 |
69 | let diff = []
70 |
71 | for (const choiceId in poll.results) {
72 | const d = (poll.results[choiceId].votes - pollWas.results[choiceId].votes) || 0
73 |
74 | if (d !== 0) {
75 | diff.push({
76 | id: choiceId,
77 | count: d
78 | })
79 | }
80 | }
81 |
82 | return diff
83 | }
84 |
85 | // ---
86 | // Высчитывает верхнюю границу для значений голосовалки
87 | // ---
88 | calcBoundary (max) {
89 | return 10 * Math.ceil(max / 10)
90 | }
91 |
92 | componentDidMount () {
93 | this.updateVotes()
94 | }
95 |
96 | componentDidUpdate (prevProps) {
97 | this.updateVotes(prevProps)
98 | }
99 |
100 | // Позволяет вычислить offset относительно контейнера опроса
101 | // Работает, если график был трансформирован через transform
102 | relativeOffset (el) {
103 | let x = 0
104 | let y = 0
105 |
106 | const detectClass = this.props.offsetContainerClass
107 |
108 | while (el && el.className.indexOf(detectClass) === -1) {
109 | x += el.offsetLeft
110 | y += el.offsetTop
111 | el = el.offsetParent
112 | }
113 |
114 | return [ x, y ]
115 | }
116 |
117 | updateVotes (prevProps) {
118 | const { poll, alphaTime } = this.props
119 | const prevPoll = prevProps ? prevProps.poll : null
120 |
121 | const newVotes = this.votersDiff(prevProps)
122 |
123 | const contendersHeight = this.$contenders.offsetHeight
124 | const contendersWidth = this.$contenders.offsetWidth
125 |
126 | const barMaxWidth = contendersWidth - NAME_WIDTH - 20
127 |
128 | const entries = _.sortBy(
129 | poll.choices.map(c => ({ ...c, count: poll.results[c.id].votes })),
130 | d => -d.votes)
131 |
132 | let root = d3select(this.$contenders)
133 |
134 | let ballsEnter = d3select(this.$ballsContainer)
135 | .selectAll('.cloud-poll__ball')
136 | .data(newVotes, d => `${d.id} ${d.count}`)
137 | .enter()
138 | .append('div')
139 | .attr('class', 'cloud-poll__ball')
140 |
141 | ballsEnter
142 | .transition()
143 | .duration(alphaTime * BALLS_ANIM_DURATION)
144 | .delay((d, i) => alphaTime * 100 * i)
145 | .attrTween('style', (d, i) => {
146 | return (t) => {
147 | let aEl = this.$alreadyVotedNumber
148 | let bEl = this.$el.querySelector(`[data-id="${d.id}"] .cloud-poll__entry-count`)
149 |
150 | if (!aEl || !bEl) {
151 | return
152 | }
153 |
154 | const aOffset = this.relativeOffset(aEl)
155 | const bOffset = this.relativeOffset(bEl)
156 |
157 | const aX = aOffset[0] + 0.5 * aEl.offsetWidth
158 | const aY = aOffset[1] + 0.5 * aEl.offsetHeight
159 |
160 | const bX = bOffset[0] + 0.5 * bEl.offsetWidth
161 | const bY = bOffset[1] + 0.5 * bEl.offsetHeight
162 |
163 | let tx = easeCubic(t)
164 | let ty = t
165 |
166 | if (d.count < 0) {
167 | tx = 1 - tx
168 | ty = 1 - ty
169 | }
170 |
171 | const x = aX + (bX - aX) * tx
172 | const y = aY + (bY - aY) * ty
173 |
174 | const CP_1 = 0.2
175 | const CP_2 = 0.01
176 |
177 | let scale = 1.0
178 | let opacity = 1.0
179 |
180 | if (t >= 0 && t <= CP_1) {
181 | opacity = (t / CP_1)
182 | scale = opacity
183 | }
184 |
185 | if (t >= (1.0 - CP_2) && t <= 1.0) {
186 | opacity = 1 - ((t - (1.0 - CP_2)) / CP_2)
187 | scale = opacity
188 | }
189 |
190 | let transform = `translate3d(${x}px, ${y}px, 0px) scale(${scale}, ${scale})`
191 |
192 | return `
193 | opacity: ${opacity};
194 | transform: ${transform};
195 | -webkit-transform: ${transform};
196 | `
197 | }
198 | })
199 | .remove()
200 |
201 | // Анимируем взрывающиеся шарики с количество проголосовавших
202 | const scaleTween = (a, b) => {
203 | return (t) => {
204 | let x = a + (b - a) * t
205 | return `transform: scale(${x}, ${x})`
206 | }
207 | }
208 |
209 | ballsEnter.each((data, i) => {
210 | let optionId = data.id
211 |
212 | let entrySelect = root.select(`.cloud-poll__entry[data-id="${optionId}"]`)
213 |
214 | const scaleRatio = 1.3
215 |
216 | entrySelect.select('.cloud-poll__entry-count')
217 | .transition()
218 | .delay(data.count > 0
219 | ? alphaTime * 600 + alphaTime * 100 * i : 0)
220 | .duration(alphaTime * 300)
221 | .ease(easeBack)
222 | .attrTween('style', (d, i) => { return scaleTween(1.0, scaleRatio) })
223 | .on('end', function () {
224 | d3select(this)
225 | .transition()
226 | .duration(alphaTime * 600)
227 | .ease(easeElastic)
228 | .attrTween('style', () => scaleTween(scaleRatio, 1.0))
229 | })
230 | })
231 |
232 | const allVotes = entries.map(e => e.count)
233 | let max = this.calcBoundary(Math.max(...allVotes))
234 |
235 | // Flash counter animation
236 | if (prevPoll && prevPoll.votersCount && prevPoll.votersCount !== poll.votersCount) {
237 | this.$alreadyVotedNumber.classList.remove('cloud-poll__flash-animation')
238 | setTimeout(() => { this.$alreadyVotedNumber.classList.add('cloud-poll__flash-animation') }, 0)
239 | }
240 |
241 | let entry = root
242 | .selectAll('.cloud-poll__entry')
243 | .data(entries, e => e.id)
244 |
245 | let barWidthFunc = (d, i) => {
246 | let x = safeFraction(d.count, max)
247 |
248 | let bmin = BAR_MIN_VALUE * barMaxWidth
249 | let w = bmin + (barMaxWidth - bmin) * x
250 | let r = `${w.toFixed(0)}px`
251 |
252 | return r
253 | }
254 |
255 | let entryEnter = entry.enter()
256 | .append('div')
257 | .attr('class', 'cloud-poll__entry')
258 | .attr('data-id', (d) => d.id)
259 | .html(d => (
260 | `
261 | { this.$contenders = n }} />
40 |
50 |
41 |
49 |
42 |
48 | { this.$alreadyVotedNumber = n }}>
43 | {poll.votersCount}
44 |
45 | {votesText}
46 | {poll.url}
47 | ${d.text}
262 |
263 | ${d.count}
264 | `
265 | ))
266 |
267 | entry.exit().remove()
268 |
269 | let elemHeights = []
270 | root.selectAll('.cloud-poll__entry').each(function () {
271 | elemHeights.push(this.offsetHeight)
272 | })
273 |
274 | let positionFunc = (d, i) => {
275 | let fullHeight = d3sum(elemHeights, (h) => h + BARS_MARGIN)
276 | let elemOffset = d3sum(elemHeights.slice(0, i), (h) => h + BARS_MARGIN)
277 |
278 | let y = 0.5 * contendersHeight - 0.5 * fullHeight + elemOffset
279 | return `${y}px`
280 | }
281 |
282 | entryEnter
283 | .style('top', positionFunc)
284 |
285 | entry.select('.cloud-poll__entry-votes')
286 | .transition()
287 | .delay(alphaTime * BALLS_ANIM_DURATION)
288 | .duration(alphaTime * BAR_GROW_ANIM_DURATION)
289 | .style('width', barWidthFunc)
290 |
291 | entry
292 | .transition()
293 | .duration(alphaTime * REORDER_ANIM_DURATION)
294 | .delay(alphaTime * (BALLS_ANIM_DURATION + BAR_GROW_ANIM_DURATION))
295 | .style('top', positionFunc)
296 |
297 | entry.select('.cloud-poll__entry-count')
298 | .transition('text-trans')
299 | .delay(alphaTime * BALLS_ANIM_DURATION)
300 | .text((d) => d.count)
301 | }
302 | }
303 |
304 | CloudPoll.defaultProps = {
305 | alphaTime: 1.4,
306 | width: 1024,
307 | height: 768,
308 | offsetContainerClass: 'playground__poll'
309 | }
310 |
311 | export default CloudPoll
312 |
--------------------------------------------------------------------------------
/src/ficus/ficus-poll-adapter.js:
--------------------------------------------------------------------------------
1 | // This adapter helps to use next-gen poll components
2 | // inside Ficus presenter. It basically transforms
3 | // props to the appropriate format.
4 | const FicusPollAdapter = (Component) =>
5 | (props) => {
6 | const results = props.results || {}
7 | const config = props.config || {}
8 | const votesByChoice = results.results || {}
9 | const votersCount = results.votersCount || 0
10 | const extResults = {}
11 |
12 | const configPoll = config.poll || []
13 |
14 | configPoll.forEach(p => {
15 | extResults[p.id] = {
16 | votes: votesByChoice[p.id],
17 | percent: (votersCount ? votesByChoice[p.id] / votersCount : 0.0)
18 | }
19 | })
20 |
21 | // Ficus presenter doesn't let use see the vote
22 | // of a specific user, but instead gives you a whole
23 | // poll summary
24 | const voters = []
25 |
26 | const poll = {
27 | title: config.title,
28 | url: props.url,
29 |
30 | choices: configPoll.map(p => ({
31 | id: p.id,
32 | color: p.color,
33 | text: p.text
34 | })),
35 |
36 | voters: voters,
37 |
38 | votersCount: votersCount,
39 | results: extResults
40 | }
41 |
42 | return
8 |
12 | )
13 |
14 | const Bar = ({ width, height, bar }) => {
15 | return (
16 |
9 | {votes || 0} · {(percent || 0).toFixed(1)}%
10 |
11 |
17 |
27 | )
28 | }
29 |
30 | class SimplePoll extends Component {
31 | getBarHeight(value, max) {
32 | const step = 10
33 |
34 | const currentLimit = step * Math.ceil(max / step)
35 | return Math.max(1, 100.0 * safeFraction(value, currentLimit))
36 | }
37 |
38 | render() {
39 | const subHeader = `${this.getVotersCount()} votes on`
40 |
41 | const { poll } = this.props
42 |
43 | const bars = this.getChartData()
44 |
45 | const maxVotes = _.max(bars.map(b => b.votes))
46 | const barWidth = 100.0 / bars.length
47 |
48 | return (
49 |
50 |
86 | )
87 | }
88 |
89 | getVotersCount() {
90 | return this.props.poll.votersCount
91 | }
92 |
93 | getChartData() {
94 | const { poll } = this.props
95 | if (!poll) return []
96 |
97 | return poll.choices.map(choice => {
98 | let result = poll.results[choice.id]
99 |
100 | return {
101 | ...choice,
102 | label: choice.text,
103 | weight: result.percent,
104 | votes: result.votes
105 | }
106 | })
107 | }
108 | }
109 |
110 | export default SimplePoll
111 |
--------------------------------------------------------------------------------
/src/ficus/simple-poll/simple-poll.scss:
--------------------------------------------------------------------------------
1 | .simple-poll__bar-tooltip-inner {
2 | background-color: #222;
3 | color: white;
4 |
5 | font-size: 22px;
6 | font-weight: bold;
7 | padding: 6px 10px;
8 |
9 | border-radius: 4px;
10 | }
11 |
12 | .simple-poll__total {
13 | display: inline-block;
14 |
15 | border: 2px solid black;
16 | border-radius: 4px;
17 |
18 | color: black;
19 | font-weight: bold;
20 | font-size: 32px;
21 | line-height: 36px;
22 |
23 | border-bottom-left-radius: 0;
24 | border-top-left-radius: 0;
25 |
26 | height: 36px;
27 | padding: 8px 16px;
28 | }
29 |
30 | .simple-poll__subheader-inner {
31 | display: inline-flex;
32 | align-items: center;
33 |
34 | background-color: black;
35 | padding: 6px 14px;
36 | border-radius: 4px;
37 |
38 |
39 | border-bottom-right-radius: 0;
40 | border-top-right-radius: 0;
41 | }
42 |
43 | .simple-poll__bar-tooltip {
44 | padding-bottom: 8px;
45 | }
46 |
47 |
48 | .simple-poll {
49 | width: 1024px;
50 | height: 768px;
51 | box-sizing: border-box;
52 | display: flex;
53 | flex-flow: column nowrap;
54 | align-items: stretch;
55 | font-family: Helvetica;
56 |
57 | padding: 15px;
58 | }
59 |
60 | .simple-poll__header {
61 | padding-top: 20px;
62 | padding-bottom: 15px;
63 | font-size: 42px;
64 | text-align: center;
65 | flex: 0 0 auto;
66 | }
67 |
68 | .simple-poll__subheader {
69 | font-size: 24px;
70 | text-align: center;
71 | padding-top: 4px;
72 | font-weight: 300;
73 | flex: 0 0 auto;
74 | color: #eee;
75 | text-align: center;
76 |
77 | display: flex;
78 | align-items: center;
79 | justify-content: center;
80 | }
81 |
82 | .simple-poll__subheader-link {
83 | color: white;
84 | font-size: 38px;
85 | text-decoration: underline;
86 | font-weight: bold;
87 | margin-left: 12px;
88 | }
89 |
90 | .simple-poll__poll-chart {
91 | flex: 1 0;
92 | width: 100%;
93 | }
94 |
95 | .simple-poll__votes {
96 | height: 100%;
97 | display: flex;
98 | flex-direction: column;
99 | justify-content: stretch;
100 | align-items: stretch;
101 | padding: 20px 0;
102 | }
103 |
104 | .simple-poll__bars {
105 | flex-grow: 1;
106 | flex-shrink: 1;
107 | display: flex;
108 | flex-direction: row;
109 | justify-content: center;
110 | }
111 |
112 | .simple-poll__labels {
113 | flex-shrink: 0;
114 | display: flex;
115 | flex-direction: row;
116 | justify-content: center;
117 | }
118 |
119 | .simple-poll__label-col,
120 | .simple-poll__bar {
121 | max-width: 180px;
122 | box-sizing: border-box;
123 | }
124 |
125 | .simple-poll__bar {
126 | display: flex;
127 | flex-direction: column;
128 | justify-content: flex-end;
129 | align-items: center;
130 | padding: 0 5px;
131 | }
132 |
133 | .simple-poll__bar-progress {
134 | border-radius: 5px;
135 | transition: height 0.3s ease;
136 | width: 100%;
137 | }
138 |
139 | .simple-poll__label {
140 | color: '#444';
141 | font-size: 18px;
142 | text-align: center;
143 | padding: 5px;
144 | font-weight: bold;
145 | }
146 |
147 | .simple-poll__label-col {
148 | flex-shrink: 0;
149 | padding: 0 5px;
150 | padding-bottom: 20px;
151 | }
152 |
153 |
--------------------------------------------------------------------------------
/src/presentation.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import styled from 'styled-components'
3 |
4 | // Presentation pieces
5 | import { Presentation, Slide } from 'presa'
6 | import { Title, Caption, Code, H2, H3, H4 } from 'presa/blocks'
7 | import FigureCaption from 'blocks/figure-caption'
8 |
9 | // Interactive slides
10 | import TransistorSlide from 'slides/transistor'
11 | import { CloudPollSlide, PollsSlide, BubblePollSlide } from 'slides/poll-slides'
12 | import MotionGhostSlide from 'slides/motion-ghost-slide'
13 | import { TalkingHeads } from 'slides/actuation/talking-heads'
14 | import ControlledRenderSlide from 'slides/own-render'
15 | import {
16 | TimelineComparisonSlide,
17 | RafScheduleSlide,
18 | RafTimestampSlide,
19 | RafDeltaSlide
20 | } from 'slides/raf-vs-timeout'
21 | import {
22 | CssTransitionCodeSlide,
23 | ReactMotionCodeSlide
24 | } from 'slides/transitions'
25 | import DialogSlide from 'slides/enter-exit'
26 | import FlipSlide from 'slides/flip'
27 | import GameSlide from 'slides/boids'
28 | import ResourcesSlide from 'slides/etc/resources'
29 | import SummarySlide from 'slides/etc/summary'
30 | import LinksSlide from 'slides/etc/links'
31 | import {
32 | AnimationsExpectationsSlide,
33 | AnimationsRealitySlide
34 | } from 'slides/etc/animation-expectations'
35 |
36 | import { GoldenRuleSlide, ReverseRuleSlide } from 'slides/etc/golden-rule'
37 |
38 | const DirtyAnimations = props => (
39 |
51 |
58 |
59 |
52 | {subHeader}
53 | {poll.url}
54 |
55 |
56 | {this.getVotersCount()}
57 | {poll.title}
60 |
61 |
62 |
85 |
63 | {bars.map(bar => (
64 |
72 |
73 |
74 | {bars.map(bar => (
75 |
84 |
80 |
82 | ))}
83 | {bar.label}
81 | in a stateful world 54 |
React Kyiv March 59 |
Alexey Taktarov
67 |68 | Co-founder and team lead at resume.io 69 |
70 |
71 | (before) product designer/dev at Shogun{' '}
72 | YC'17
73 |
74 | 89 | 90 |
91 | talk's topic
95 |Animation Patterns in React apps
96 |97 | 98 |
99 | {`const redraw = _ => {
121 | points.forEach(point => {
122 |
123 | // make sure \`will-change: transform\` is set
124 | point.element.style.transform = \`
125 | translate3d($\{point.x}px, $\{point.y}px, 0.0px)
126 | rotate($\{point.angle}rad)\`
127 | })
128 | }
129 |
130 | const tick = ts => {
131 | _lastRaf = requestAnimationFrame(tick)
132 |
133 | physicsStep(delta)
134 | redraw(delta)
135 | }`}
136 | requestAnimationFrame-based game skeleton.
138 |
144 | 146 | Application state maps to DOM. 147 |
152 |
161 | Immutable UIs are predictable, maintainable
and better to test.
162 |
163 |
164 | The downsides of using React Motion
191 |{`
210 | class Dialog extends Component {
211 | componentDidMount() {
212 | const node = findDOMNode(this)
213 |
214 | // Or $.animate, anime.js, GSAP, D3 ...
215 | Velocity(node, { scale: 1.5 },
216 | { duration: 1000 })
217 | }
218 |
219 | render() { ... }
220 | }`}
221 | componentDidMount lifecycle hook.
224 | {`class Dialog extends Component {
229 | componentDidMount() {
230 | const node = findDOMNode(this)
231 |
232 | // animate returns a cancellable
233 | // Promise-like object
234 | this._anim = animate(node, { ... })
235 | }
236 |
237 | componentWillUnmount() {
238 | this._anim && this._anim.cancel()
239 | }
240 | }`}
241 | {`
250 |
251 | {this.state.showDialog && }
252 |
253 | `}
254 | {`
262 |
263 | {this.state.showDialog && }
264 |
265 | `}
266 | Animated — a helper component that supports
268 | exit animation
269 |
274 | Animated component
276 | {`const element =
281 |
282 | // => { type: Dialog, props: { size: 'medium' }, ... }
283 | const element = React.createElement(Dialog, { size: 'medium' })`}
284 |
285 | {`
297 | componentWillReceiveProps(nextProps) {
298 | // Exit transition
299 | if (this.props.children && !nextProps.children) {
300 | return this.transitionState(st.EXITING,
301 | { children: this.props.children })
302 | }
303 | }
304 |
305 | transitionState(transitionTo, opt = {}) {
306 | // .. FSM logic ..
307 | // Wait for \`this._content.animateExit()\`
308 | }
309 | `}
310 | Animated component implementation: 312 | Finite State Machine. 313 |
{`import Transition
323 | from 'react-transition-group/Transition'
324 |
325 | // \`state\` is 'entered', 'entering', 'exited' etc.
326 |
327 | {state =>
328 |
330 | `}
331 |
332 | react-transition-group@2.0 provides a declarative way 334 | for enter/exit animations 335 |
{`render() {
342 | return
343 | }
344 |
345 | // Render only once!
346 | shouldComponentUpdate() { return false }
347 |
348 | componentWillReceiveProps(nextProps) {
349 | if (this.props.color != nextProps.color) {
350 | // Animate on canvas...
351 | }
352 | }`}
353 | Canvas, WebGL, WebAudio etc.
357 |
365 | but it can only be used to devide state from props,
366 | so use componentDidUpdate instead.
367 |
{`// Limit delta to avoid divergence
374 | const delta = Math.min(100.0, ts - prevTs)
375 | const P = 0.001 * delta
376 |
377 | this.x += P * (this.target - x)`}
378 |
379 |
394 | {`import { Actuator, actuate } from 'redux-actuator'
395 |
396 | // Inside the component
397 |
403 | React Native
417 |
418 | Building high-performance animations
using Animated API
419 |
420 | 421 | 422 |
423 |
427 | {`import { Animated } from 'react-native'
428 |
429 | // inside a constructor
430 | const animValue = new Animated.Value(0)
431 | this.state = { animValue }`}
432 |
433 |
440 | {`const { animValue } = this.state
441 |
442 | `}
454 |
455 |
462 | {`
463 | // or \`spring\`, \`decay\` etc.
464 | Animated.timing(animValue, {
465 | toValue: 0,
466 | duration: 500
467 | }).start()
468 | `}
469 |
470 |
49 |
56 |
57 |
64 |
65 | {hasMonitor && (
66 |
73 | )}
74 |
75 |
76 | {props.name}
10 |
18 |
39 | )
40 | }
41 | }
42 |
43 | const StateName = styled.div`
44 | margin-left: 18px;
45 | font-size: 26px;
46 | `
47 |
48 | const StateEntryContainer = styled.div`
49 | margin-bottom: 18px;
50 | display: flex;
51 | align-items: center;
52 |
53 | transition: opacity 0.2s ease;
54 | opacity: ${props => (props.active ? 1.0 : 0.2)};
55 | `
56 |
57 | const StateDot = styled.div`
58 | width: 28px;
59 | height: 28px;
60 |
61 | background-color: ${props => props.color};
62 | border-radius: 28px;
63 | `
64 |
65 | export default StateMonitor
66 |
--------------------------------------------------------------------------------
/src/slides/etc/animation-expectations.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import styled from 'styled-components'
3 | import { Slide } from 'presa'
4 |
5 | export const AnimationsExpectationsSlide = () => (
6 | equal periods of time 12 |
17 |
34 |
47 | as pure as possible and 11 | make sure
its side-effects don't break the contract. 12 |
in order to trigger animations 23 |
26 |
27 |
12 | Pure animations
13 |
14 | Only state changes allowed!{' '}
15 |
20 |
21 |
16 | CSS transitions, react-motion,
react-transition-group,
17 | React Move, ...
18 |
19 |
26 | Dirty animations
27 |
28 | They use lifecycle hooks and might manipulate DOM directly
29 |
31 |
32 | 29 |
Web Animations, Velocity, GSAP, D3, anime.js, ...
30 |
37 | Own render
38 |
39 | Use this when you need to work with external APIs like WebGL,
40 | Canvas.
41 |
42 |
43 |
48 | Complex cases
49 | Inter-component communication, FLIP method.
50 |
51 | -
109 |
254 |
257 |
258 |
265 |
266 |
86 |
89 | )}
90 |
91 | {this.state.isControlled && (
92 | Update internal state immediately on props change:
87 | {`this.x = props.rotX`}
88 |
93 |
96 | )}
97 | Using P-controller filter to animate smoothly:
94 | {`this.x += P * (props.rotX - this.x)`}
95 | (this._root = el)}
94 | />
95 | )
96 | }
97 | }
98 |
99 | export default Rotator
100 |
--------------------------------------------------------------------------------
/src/slides/poll-slides.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 |
3 | import SimplePoll from 'ficus/simple-poll'
4 | import CloudPoll from 'ficus/cloud-poll'
5 | import BubblePoll from 'ficus/bubble-poll'
6 | import ClassicPoll from 'ficus/classic-poll'
7 |
8 | import { Slide } from 'presa'
9 | import Button from 'blocks/button'
10 |
11 | import './poll-slides.scss'
12 |
13 | const makeUid = () => (Math.random() * 0xffffff) | 0
14 |
15 | const initialPoll = {
16 | title: 'What is the best album of 2016?',
17 | url: 'ficus.io',
18 | choices: [
19 | {
20 | id: 'a1',
21 | color: 'rgba(61, 118, 230, 1.00)',
22 | text: 'Chance The Rapper – Coloring Book'
23 | },
24 | { id: 'a2', color: 'rgba(241, 196, 15, 1.00)', text: 'Beyoncé – Lemonade' },
25 | {
26 | id: 'a3',
27 | color: 'rgba(230, 126, 34, 1.00)',
28 | text: 'Frank Ocean – Blonde '
29 | },
30 | { id: 'a4', color: 'rgba(231, 76, 60, 1.00)', text: 'David Bowie – Star' },
31 | {
32 | id: 'a5',
33 | color: 'rgba(142, 68, 173, 1.00)',
34 | text: 'Kanye West – The Life Of Pablo'
35 | }
36 | ],
37 | voters: []
38 | }
39 |
40 | const makePollPayload = poll => {
41 | const votersCount = poll.voters.length
42 | const results = {}
43 | poll.choices.forEach(ch => {
44 | results[ch.id] = { votes: 0 }
45 | })
46 | poll.voters.forEach(v => {
47 | results[v.choice].votes++
48 | })
49 |
50 | poll.choices.forEach(ch => {
51 | results[ch.id].percent = votersCount
52 | ? results[ch.id].votes / votersCount
53 | : 0
54 | })
55 |
56 | return {
57 | ...poll,
58 | votersCount,
59 | results
60 | }
61 | }
62 |
63 | const sample = array => array[Math.floor(Math.random() * array.length)]
64 |
65 | const generateVoter = (poll, choices) => {
66 | const ch = choices || poll.choices
67 |
68 | return {
69 | id: makeUid(),
70 | choice: sample(ch).id
71 | }
72 | }
73 |
74 | const addVotes = (poll, amount) => {
75 | const newVoters = Array(amount)
76 | .fill()
77 | .map(() => generateVoter(poll))
78 |
79 | return {
80 | ...poll,
81 | voters: [...poll.voters, ...newVoters]
82 | }
83 | }
84 |
85 | const changeVotes = (poll, percent) => {
86 | let choices = []
87 |
88 | for (var i = 0; i < 3; ++i) {
89 | choices.push(sample(poll.choices))
90 | }
91 |
92 | return {
93 | ...poll,
94 | voters: poll.voters.map(v => ({
95 | ...v,
96 | choice: Math.random() <= percent ? sample(choices).id : v.choice
97 | }))
98 | }
99 | }
100 |
101 | class PollControls extends Component {
102 | constructor() {
103 | super()
104 | this.state = {
105 | poll: addVotes(initialPoll, 80)
106 | }
107 | }
108 |
109 | changeVotes(percent) {
110 | this.setState({
111 | poll: changeVotes(this.state.poll, percent)
112 | })
113 | }
114 |
115 | addVotes(amount = 1) {
116 | this.setState({
117 | poll: addVotes(this.state.poll, amount)
118 | })
119 | }
120 |
121 | render() {
122 | return (
123 |
179 |
180 | {poll => (
181 |
182 |
190 | )}
191 |
192 |
193 |
203 | )
204 | }
205 | }
206 |
207 | export class BubblePollSlide extends Component {
208 | render() {
209 | const width = 1024
210 | const height = 768
211 |
212 | return (
213 |
214 |
215 | {poll => (
216 |
217 |
224 | )}
225 |
226 |
227 | )
228 | }
229 | }
230 |
231 | export const PollsSlide = props => {
232 | const width = 1024
233 | const height = 768
234 |
235 | return (
236 |
237 |
238 | {poll => (
239 |
278 |
279 | )
280 | }
281 |
--------------------------------------------------------------------------------
/src/slides/poll-slides.scss:
--------------------------------------------------------------------------------
1 | .poll-slide,
2 | .poll-slide__wrap {
3 | display: flex;
4 | flex-flow: column nowrap;
5 | justify-content: center;
6 | }
7 |
8 | .poll-slide__controls {
9 | max-width: 75%;
10 | margin: 0 auto;
11 | text-align: center;
12 |
13 | padding: 20px;
14 | padding-bottom: 10px;
15 |
16 | .button {
17 | margin-right: 4px;
18 | margin-bottom: 4px;
19 | }
20 | }
21 |
22 | .poll-slide__speed {
23 | text-align: center;
24 | }
25 |
26 | .poll-slide__content {
27 | display: flex;
28 | flex-flow: row wrap;
29 | justify-content: center;
30 | }
31 |
32 | .poll-slide__polls {
33 | max-width: 80%;
34 | text-align: center;
35 | .poll-zoom__poll {
36 | margin: 4px;
37 | }
38 | }
39 |
40 | .poll-zoom__poll {
41 | overflow: hidden;
42 | border: 1px solid #e1e1e1;
43 | border-radius: 3px;
44 | display: inline-block;
45 | position: relative;
46 | }
47 |
48 | .poll-zoom__poll-wrap {
49 | transform-origin: left top;
50 | }
51 |
--------------------------------------------------------------------------------
/src/slides/raf-vs-timeout/comparison-slide.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 | import styled from 'styled-components'
3 |
4 | import { Slide } from 'presa'
5 | import colors from 'colors'
6 | import TimelineWithMeter from './timeline-with-meter'
7 |
8 | // default discrete step
9 | const step = 0.025
10 |
11 | // sin func but gets from 0 to 1
12 | const timingFunc = t => 0.5 + 0.3 * Math.sin(8 * t)
13 |
14 | class ComparisonSlide extends Component {
15 | constructor() {
16 | super()
17 | this.state = { currentTime: 0.0 }
18 | }
19 |
20 | static defaultProps = {
21 | comparedMethod: 'naive'
22 | }
23 |
24 | handleCursorChange = cursor => {
25 | this.setState({ currentTime: cursor })
26 | }
27 |
28 | render() {
29 | const numberOfIterations = Math.ceil(1 / step)
30 |
31 | const normalScale = Array(numberOfIterations)
32 | .fill(0)
33 | .map((_, index) => {
34 | return [index * step, 0.0]
35 | })
36 |
37 | const rafScale = (() => {
38 | let buffer = []
39 | let x = 0.0
40 | let delay = 0.0
41 |
42 | while (x <= 1.0) {
43 | // carefuly crafted params
44 | const maxDeviation = 0.09
45 | const startFrom = 0.05
46 |
47 | buffer.push([x, delay / maxDeviation])
48 |
49 | // Add some arificial delay,
50 | // but only after `startFrom`.
51 | const shift = Math.abs(maxDeviation * Math.sin(6 * (x - startFrom)))
52 | delay = x > startFrom ? shift : 0.0
53 |
54 | x += step + delay
55 | }
56 |
57 | return buffer
58 | })()
59 |
60 | const idealGraph = normalScale.map(t => [t[0], timingFunc(t[0])])
61 | const rafGraph = rafScale
62 | .filter(t => t[0] <= 1)
63 | .map(t => [t[0], timingFunc(t[0]), t[1]])
64 |
65 | const timeoutGraph = (scale => {
66 | let points = []
67 | let lastValue = 0.0
68 |
69 | scale.forEach(tt => {
70 | const [t, delay] = tt
71 | points.push([t, timingFunc(lastValue), delay])
72 | lastValue += step
73 | })
74 |
75 | return points
76 | })(rafScale)
77 |
78 | // Common props for all timelines
79 | const timelineProps = {
80 | size: 360,
81 | onCursorMove: this.handleCursorChange,
82 | time: this.state.currentTime
83 | }
84 |
85 | const comparedMethod = this.props.comparedMethod
86 |
87 | return (
88 |
89 |
90 |
91 |
98 | Ideal Animation
99 | The time between frames is constant
100 |
101 |
102 |
103 | {comparedMethod === 'raf' && (
104 |
105 |
112 | rAF + delta
113 |
114 | The animation adapts to delta. Could drop frames, but
115 | completes in time!
116 |
117 |
118 |
119 | )}
120 | {comparedMethod === 'naive' && (
121 |
122 |
129 | Naive Implementation
130 |
131 | The step is variable. Animation isn't feasible.
132 |
133 |
134 |
135 | )}
136 |
137 |
138 | )
139 | }
140 | }
141 |
142 | /*
143 | * Styling and stuff
144 | */
145 |
146 | const SlideLayout = styled(Slide)`
147 | display: flex;
148 | align-items: center;
149 | `
150 |
151 | const SlideContent = styled.div`
152 | display: flex;
153 | align-items: flex-start;
154 | justify-content: center;
155 | width: 100%;
156 | `
157 |
158 | const AnimationMethod = styled.div`
159 | margin: 0 30px;
160 | text-align: center;
161 | `
162 |
163 | const AnimationDetails = styled.div`
164 | padding: 0 40px;
165 | `
166 |
167 | const AnimationText = styled.div`
168 | font-size: 20px;
169 | color: ${colors.textGray};
170 | max-width: 340px;
171 | margin: 0 auto;
172 | line-height: 1.4;
173 | `
174 |
175 | const AnimationHeader = styled.div`
176 | font-size: 24px;
177 | margin-top: 18px;
178 | margin-bottom: 12px;
179 | `
180 |
181 | export default ComparisonSlide
182 |
--------------------------------------------------------------------------------
/src/slides/raf-vs-timeout/index.js:
--------------------------------------------------------------------------------
1 | import TimelineComparisonSlide from './comparison-slide'
2 | export * from './raf-slides'
3 |
4 | export { TimelineComparisonSlide }
5 |
--------------------------------------------------------------------------------
/src/slides/raf-vs-timeout/raf-slides.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 |
3 | import { Slide } from 'presa'
4 | import { Code } from 'presa/blocks'
5 |
6 | import FigureCaption from 'blocks/figure-caption'
7 |
8 | // Shows how to use rAF in your code.
9 | export class RafScheduleSlide extends Component {
10 | render() {
11 | return (
12 |
13 |
27 | )
28 | }
29 | }
30 |
31 | export class RafTimestampSlide extends Component {
32 | render() {
33 | return (
34 |
35 |
40 | rAF passes a high-precision timestamp up to 5 µs{' '}
41 | (microseconds).
42 |
43 |
44 | )
45 | }
46 | }
47 |
48 | export class RafDeltaSlide extends Component {
49 | render() {
50 | return (
51 |
52 |
61 | It is important to calculate delta between calls and use it in order
62 | to adapt the animation.
63 |
64 |
65 | )
66 | }
67 | }
68 |
--------------------------------------------------------------------------------
/src/slides/raf-vs-timeout/rolling-meter.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | import styled from 'styled-components'
4 |
5 | const SKINS = {
6 | moon: './images/moon-emoji.png',
7 | sun: './images/sun-emoji.png',
8 | sunglasses: './images/sunglasses-emoji.png'
9 | }
10 |
11 | const Meter = styled.div`
12 | border-radius: 50px;
13 | height: ${props => props.size}px;
14 | `
15 |
16 | const Ball = styled.div`
17 | height: 52px;
18 | width: 52px;
19 | border-radius: 52px;
20 |
21 | background-image: url(${props => SKINS[props.skin]});
22 | background-size: contain;
23 | background-position: center;
24 | background-repeat: no-repeat;
25 |
26 | transform: ${props => {
27 | return `
28 | translateY(${props.size * props.x - 23.0}px)
29 | rotate(${540 * props.t}deg)`
30 | }};
31 | `
32 |
33 | class RollingMeter extends React.Component {
34 | static defaultProps = {
35 | skin: 'moon'
36 | }
37 |
38 | render() {
39 | return (
40 |
41 |
43 | )
44 | }
45 | }
46 |
47 | export default RollingMeter
48 |
--------------------------------------------------------------------------------
/src/slides/raf-vs-timeout/timeline-with-meter.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import styled from 'styled-components'
3 |
4 | import Timeline from './timeline'
5 | import RollingMeter from './rolling-meter'
6 |
7 | const TMLayout = styled.div`
8 | display: flex;
9 | flex-flow: row nowrap;
10 | align-items: center;
11 | justify-content: center;
12 |
13 | > div {
14 | margin-left: 12px;
15 | }
16 | `
17 |
18 | const TimelineWithMeter = props => {
19 | const { size, ...rest } = props
20 | const { points, time } = rest
21 |
22 | const filtered = points.filter(p => p[0] <= time)
23 |
24 | // find the current value
25 | const currentPoint = filtered.length
26 | ? filtered[filtered.length - 1]
27 | : [0.0, 0.0]
28 |
29 | return (
30 |
31 |
39 | )
40 | }
41 |
42 | export default TimelineWithMeter
43 |
--------------------------------------------------------------------------------
/src/slides/raf-vs-timeout/timeline.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { interpolateRgb } from 'd3-interpolate'
3 |
4 | import colors from 'colors'
5 |
6 | const interpolateDot = interpolateRgb(colors.green, colors.yellow)
7 |
8 | const Timeline = ({ time, points, onCursorMove, width, height, ...props }) => {
9 | const barsCount = 10
10 |
11 | return (
12 |
81 | )
82 | }
83 |
84 | export default Timeline
85 |
--------------------------------------------------------------------------------
/src/slides/transistor.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 | import { Motion, spring, presets } from 'react-motion'
3 |
4 | import { Slide } from 'presa'
5 | import DynamicCode from 'blocks/dynamic-code'
6 | import Button from 'blocks/button'
7 |
8 | import './transistor.scss'
9 |
10 | const cycleRot = (collection, el) =>
11 | collection[(collection.indexOf(el) + 1) % collection.length]
12 |
13 | const TransistorCode = ({ points }) => (
14 |
15 | {'
24 | )
25 |
26 | const TransistorCodeMotion = ({ points }) => {
27 | const p = points[0]
28 |
29 | return (
30 |
31 | {'
124 |
143 | )
144 | }
145 | }
146 |
147 | const PollZoom = ({ zoom, children, width, height }) => (
148 |
125 | {this.props.children(makePollPayload(this.state.poll))}
126 |
127 |
128 |
129 |
132 |
135 |
138 |
141 |
142 |
152 |
159 | )
160 |
161 | export class CloudPollSlide extends Component {
162 | constructor() {
163 | super()
164 | this.state = { alphaTime: 1.4 }
165 | }
166 |
167 | toggleSpeed() {
168 | this.setState({ alphaTime: this.state.alphaTime === 1.4 ? 4.0 : 1.4 })
169 | }
170 |
171 | render() {
172 | const width = 1100
173 | const height = 660
174 |
175 | const alphaTime = this.state.alphaTime
176 |
177 | return (
178 |
156 | {children}
157 |
158 |
194 |
201 |
202 |
240 |
241 |
248 |
249 |
250 |
257 |
258 |
259 |
266 |
267 |
268 |
275 |
276 | )}
277 | {`// Or use a polyfill:
14 | // import requestAnimationFrame from 'raf'
15 | const { requestAnimationFrame } = window
16 |
17 | const animate = () => {
18 | requestAnimationFrame(animate)
19 |
20 | // Perform an animation step
21 | x += velocity
22 | }
23 |
24 | // Fire it up 🔥
25 | requestAnimationFrame(animate)`}
26 | {`requestAnimationFrame(timestamp => {
36 | // DOMHighResTimeStamp
37 | // timestamp ~> 30485.84100000153
38 | })`}
39 | {`const animate = timestamp => {
53 | requestAnimationFrame(animate)
54 |
55 | const delta = timestamp - prevTimestamp
56 |
57 | // Note, it's a function now!
58 | x += velocity(delta)
59 | }`}
60 | \n'}
16 | {' \n'}
21 | {' ...\n'}
22 | {'
'}
23 | \n'}
32 |
33 | {'
46 | {v => (
47 |
48 | {` \n`}
53 |
54 | )}
55 |
56 | {' \n'}
57 | {' ...\n'}
58 | {'
'}
59 |
60 | )
61 | }
62 |
63 | const TransistorPoints = ({ points, withMotion, width, height }) => {
64 | const pointsList = points.map((p, i) => {
65 | if (withMotion) {
66 | return (
67 |
75 | {value => (
76 |
81 | )}
82 |
83 | )
84 | }
85 |
86 | const pointTransform = `translate(${p.x}px, ${p.y}px)`
87 | return (
88 |
96 | )
97 | })
98 |
99 | return (
100 |
183 |
215 | )
216 | }
217 | }
218 |
219 | Transistor.defaultProps = {
220 | numberOfPoints: 28
221 | }
222 |
223 | export default Transistor
224 |
--------------------------------------------------------------------------------
/src/slides/transistor.scss:
--------------------------------------------------------------------------------
1 |
2 | .transistor-slide {
3 | display: flex;
4 | flex-flow: column nowrap;
5 | align-items: center;
6 | }
7 |
8 | .transistor-slide__code {
9 | background-color: rgba(yellow, 0.1);
10 | align-self: stretch;
11 | box-sizing: border-box;
12 | padding: 20px;
13 | }
14 |
15 | .transistor-slide__controls {
16 | .button {
17 | margin-right: 6px;
18 | }
19 | }
20 |
21 | .transistor__area {
22 | position: relative;
23 | }
24 |
25 | .transistor__point {
26 | width: 16px;
27 | height: 16px;
28 | left: -8px;
29 | top: -8px;
30 |
31 | background-color: black;
32 | border-radius: 26px;
33 | display: inline-block;
34 | position: absolute;
35 |
36 | transition: all 0.25s ease;
37 | }
38 |
39 | .transistor__point--no-transition {
40 | transition: none;
41 | }
42 |
--------------------------------------------------------------------------------
/src/slides/transitions/index.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 |
3 | import { Slide } from 'presa'
4 | import { Code } from 'presa/blocks'
5 |
6 | import FigureCaption from 'blocks/figure-caption'
7 |
8 | export class ReactMotionCodeSlide extends Component {
9 | render() {
10 | return (
11 |
12 |
18 | React Motion uses
19 |
21 |
22 | )
23 | }
24 | }
25 |
26 | export class CssTransitionCodeSlide extends Component {
27 | render() {
28 | return (
29 |
30 |
40 | CSS transitions work out of box in React.
41 |
43 |
44 | )
45 | }
46 | }
47 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path')
2 | const webpack = require('webpack')
3 | const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
4 |
5 | const isProduction = process.env.NODE_ENV === 'production'
6 |
7 | module.exports = {
8 | entry: './src/application.js',
9 |
10 | output: {
11 | path: path.resolve(__dirname, 'public'),
12 | filename: 'application.js'
13 | },
14 |
15 | resolve: {
16 | symlinks: false,
17 | modules: [path.resolve(__dirname, 'src'), 'node_modules']
18 | },
19 |
20 | module: {
21 | rules: [
22 | {
23 | test: /\.jsx?$/,
24 | exclude: /node_modules/,
25 | use: ['babel-loader']
26 | },
27 | {
28 | test: /\.scss$/,
29 | use: ['style-loader', 'css-loader', 'sass-loader']
30 | }
31 | ]
32 | },
33 |
34 | plugins: isProduction
35 | ? [
36 | new webpack.DefinePlugin({
37 | 'process.env': {
38 | NODE_ENV: JSON.stringify('production')
39 | }
40 | }),
41 | new UglifyJsPlugin()
42 | ]
43 | : [],
44 |
45 | devtool: isProduction ? false : 'cheap-module-eval-source-map',
46 |
47 | devServer: {
48 | contentBase: path.join(__dirname, 'public')
49 | }
50 | }
51 |
--------------------------------------------------------------------------------
101 | {pointsList}
102 |
103 | )
104 | }
105 |
106 | class Transistor extends Component {
107 | constructor() {
108 | super()
109 | this.state = {
110 | mode: 'line',
111 | motionEnabled: true
112 | }
113 | }
114 |
115 | changeMode() {
116 | const modes = ['line', 'circle', 'eight']
117 | this.setState({ mode: cycleRot(modes, this.state.mode) })
118 | }
119 |
120 | toggleMotion() {
121 | this.setState({ motionEnabled: !this.state.motionEnabled })
122 | }
123 |
124 | render() {
125 | const mode = this.state.mode
126 | const width = 700
127 | const height = 330
128 |
129 | const N = this.props.numberOfPoints
130 |
131 | const radius = 120.0
132 | const step = 22.0
133 |
134 | const motionEnabled = this.props.motionEnabled
135 | ? this.state.motionEnabled
136 | : false
137 |
138 | const points = Array(N)
139 | .fill()
140 | .map((_, idx) => {
141 | const t = (idx + 1) * Math.PI * 2 / N
142 |
143 | switch (mode) {
144 | case 'line':
145 | return {
146 | x: width * 0.5 + idx * step - N * step * 0.5,
147 | y: height * 0.5
148 | }
149 |
150 | case 'circle':
151 | return {
152 | x: width * 0.5 + radius * Math.cos(t),
153 | y: height * 0.5 + radius * Math.sin(t)
154 | }
155 |
156 | case 'eight':
157 | return {
158 | x:
159 | width * 0.5 +
160 | radius *
161 | Math.sqrt(2) *
162 | Math.cos(t) /
163 | (Math.pow(Math.sin(t), 2) + 1),
164 | y:
165 | height * 0.5 +
166 | radius *
167 | Math.sqrt(2) *
168 | Math.cos(t) *
169 | Math.sin(t) /
170 | (Math.pow(Math.sin(t), 2) + 1)
171 | }
172 | }
173 | })
174 |
175 | const translations = {
176 | line: 'Line',
177 | circle: 'Circle',
178 | eight: 'Infinity'
179 | }
180 |
181 | return (
182 |
184 | {motionEnabled ? (
185 |
190 |
191 |
199 | {this.props.motionEnabled && (
200 |
207 | )}
208 |
209 |
213 |
214 | {`
13 |
14 | {interpolated =>
15 | }
16 | `}
17 | 19 |
function-as-a-prop pattern.
20 | {`
31 | // CSS property
32 | // transition: transform 1s ease;
33 |
34 | // Conditional state change
35 |
36 |
37 | // Direct style manipulation
38 | `}
39 | 41 |
transition property + state change → animation.
42 |