-
Notifications
You must be signed in to change notification settings - Fork 3
/
circle.js
84 lines (71 loc) · 1.77 KB
/
circle.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
import React, { Component } from 'react';
import Radium from 'radium';
import TweenLite from 'gsap';
import * as R from 'ramda';
import tl, { t1, t2 } from '../styles/loading-timeline';
const circleStyles = {
backfaceVisibility: 'hidden',
perspective: 1000
};
/**
* The Circle
*/
class Circle extends Component {
componentDidMount() {
const { y, r } = this.props;
tl.fromTo(this._circle, t1, {
transformOrigin: '50% 50%',
transform: `translate3d(${-2.5*r}px, ${-y-2*r}px, 0px)`,
}, {
transform: `translate3d(${-2.5*r}px, 0px, 0px)`,
ease: Elastic.easeOut.config(1, 0.75),
}, 'phase-1')
.to(this._circle, t1, {
transform: `translate3d(0px, 0px, 0px)`,
ease: Expo.easeInOut,
}, 'phase-2');
}
shouldComponentUpdate(nextProps) {
return !R.equals(this.props, nextProps);
}
jelly = () => {
TweenLite.fromTo(this._circle, 1.5, {
attr:{ r: 0 }
}, {
attr:{ r: this.props.r },
ease: Elastic.easeOut.config(1, 0.3)
});
}
swooshReverse = () => {
TweenLite.fromTo(this._circle, 0.2, {
attr:{ r: this.props.r }
}, {
attr:{ r: 0 },
ease: Power4.easeOut,
});
}
componentDidUpdate(prevProps) {
const { visible } = this.props;
if (prevProps.visible === visible) { return; }
if (visible) {
this.jelly();
} else {
this.swooshReverse();
}
}
render() {
const { fill, x, y, r, visible } = this.props;
return (
<g style={{ transform: 'translate3d(' + x + 'px, ' + y + 'px, 0)' }}>
<circle ref={ (c) => this._circle = c }
style={ circleStyles }
fill={ fill }
opacity={ 0.5 }
cx={ 0 }
cy={ 0 }
r={ r } />
</g>
);
}
}
export default Radium(Circle);