Skip to content

Commit

Permalink
Replaced react-motion with CSS transition for better perf (#10751)
Browse files Browse the repository at this point in the history
  • Loading branch information
@bvaughn
bvaughn authored Sep 19, 2017
1 parent a451761 commit 7f254de
Show file tree
Hide file tree
Showing 3 changed files with 135 additions and 150 deletions.
1 change: 0 additions & 1 deletion www/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,6 @@
"glamor": "^2.20.40",
"hex2rgba": "^0.0.1",
"react-live": "^1.7.1",
"react-motion": "^0.5.1",
"react-sticky": "^6.0.1",
"remarkable": "^1.7.1",
"slugify": "^1.2.1"
Expand Down
274 changes: 134 additions & 140 deletions www/src/components/StickyResponsiveSidebar/StickyResponsiveSidebar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,6 @@ import {Component, React} from 'react';
import isItemActive from 'utils/isItemActive';
import Sidebar from 'templates/components/Sidebar';
import {colors, media} from 'theme';
import {Motion, spring} from 'react-motion';
import ChevronSvg from './ChevronSvg';

function findActiveItemTitle(location, defaultActiveSection) {
Expand Down Expand Up @@ -59,6 +58,7 @@ class StickyResponsiveSidebar extends Component {

render() {
const {defaultActiveSection, location} = this.props;
const {open} = this.state;
const smallScreenSidebarStyles = {
top: 0,
left: 0,
Expand All @@ -70,7 +70,7 @@ class StickyResponsiveSidebar extends Component {
height: '100vh',
overflowY: 'auto',
WebkitOverflowScrolling: 'touch',
pointerEvents: this.state.open ? 'auto' : 'none',
pointerEvents: open ? 'auto' : 'none',
};

const smallScreenBottomBarStyles = {
Expand All @@ -81,167 +81,161 @@ class StickyResponsiveSidebar extends Component {
? findActiveItemTitle(location, defaultActiveSection)
: null;

const iconOffset = open ? 7 : 0;
const labelOffset = open ? -40 : 0;
const menuOpacity = open ? 1 : 0;
const menuOffset = open ? 0 : 40;

return (
<Motion
defaultStyle={{
iconOffset: 0,
labelOffset: 0,
menuOpacity: 0,
menuOffset: 40,
}}
style={{
iconOffset: spring(this.state.open ? 7 : 0),
labelOffset: spring(this.state.open ? -40 : 0),
menuOpacity: spring(this.state.open ? 1 : 0),
menuOffset: spring(this.state.open ? 0 : 40),
}}>
{value => (
<div>
<div>
<div
style={{
opacity: menuOpacity,
transition: 'opacity 0.5s ease',
}}
css={{
[media.lessThan('small')]: smallScreenSidebarStyles,

[media.greaterThan('medium')]: {
marginRight: -999,
paddingRight: 999,
backgroundColor: '#f7f7f7',
},

[media.between('medium', 'sidebarFixed', true)]: {
position: 'fixed',
zIndex: 2,
height: '100%',
},

[media.greaterThan('small')]: {
position: 'fixed',
zIndex: 2,
height: 'calc(100vh - 60px)',
overflowY: 'auto',
WebkitOverflowScrolling: 'touch',
marginRight: -999,
paddingRight: 999,
backgroundColor: '#f7f7f7',
opacity: '1 !important',
},

[media.size('small')]: {
height: 'calc(100vh - 40px)',
},

[media.between('medium', 'large')]: {
height: 'calc(100vh - 50px)',
},

[media.greaterThan('sidebarFixed')]: {
borderLeft: '1px solid #ececec',
},
}}>
<div
style={{
transform: `translate(0px, ${menuOffset}px)`,
transition: 'transform 0.5s ease',
}}
css={{
marginTop: 60,

[media.lessThan('small')]: {
marginTop: 40,
},

[media.between('medium', 'large')]: {
marginTop: 50,
},

[media.greaterThan('small')]: {
tranform: 'none !important',
},
}}>
<Sidebar {...this.props} />
</div>
</div>
<div
css={{
backgroundColor: colors.darker,
bottom: 0,
color: colors.brand,
display: 'none', // gets overriden at small screen sizes
left: 0,
cursor: 'pointer',
position: 'fixed',
right: 0,
width: '100%',
zIndex: 3,
[media.lessThan('small')]: smallScreenBottomBarStyles,
}}
onClick={this.toggleOpen}>
<Container>
<div
style={{
opacity: value.menuOpacity,
}}
css={{
[media.lessThan('small')]: smallScreenSidebarStyles,

[media.greaterThan('medium')]: {
marginRight: -999,
paddingRight: 999,
backgroundColor: '#f7f7f7',
},

[media.between('medium', 'sidebarFixed', true)]: {
position: 'fixed',
zIndex: 2,
height: '100%',
},

[media.greaterThan('small')]: {
position: 'fixed',
zIndex: 2,
height: 'calc(100vh - 60px)',
overflowY: 'auto',
WebkitOverflowScrolling: 'touch',
marginRight: -999,
paddingRight: 999,
backgroundColor: '#f7f7f7',
opacity: '1 !important',
},

[media.size('small')]: {
height: 'calc(100vh - 40px)',
},

display: 'flex',
flexDirection: 'row',
alignItems: 'center',
height: 60,
[media.between('medium', 'large')]: {
height: 'calc(100vh - 50px)',
height: 50,
},

[media.greaterThan('sidebarFixed')]: {
borderLeft: '1px solid #ececec',
[media.lessThan('small')]: {
height: 40,
overflow: 'hidden',
alignItems: 'flex-start',
},
}}>
<div
style={{
transform: `translate(0px, ${value.menuOffset}px)`,
}}
css={{
marginTop: 60,

[media.lessThan('small')]: {
marginTop: 40,
},

[media.between('medium', 'large')]: {
marginTop: 50,
},

[media.greaterThan('small')]: {
tranform: 'none !important',
},
width: 20,
marginRight: 10,
alignSelf: 'center',
display: 'flex',
flexDirection: 'column',
}}>
<Sidebar {...this.props} />
<ChevronSvg
cssProps={{
transform: `translate(0, ${iconOffset}px) rotate(180deg)`,
transition: 'transform 0.5s ease',
}}
/>
<ChevronSvg
cssProps={{
transform: `translate(0, ${0 - iconOffset}px)`,
transition: 'transform 0.5s ease',
}}
/>
</div>
</div>
<div
css={{
backgroundColor: colors.darker,
bottom: 0,
color: colors.brand,
display: 'none', // gets overriden at small screen sizes
left: 0,
cursor: 'pointer',
position: 'fixed',
right: 0,
width: '100%',
zIndex: 3,
[media.lessThan('small')]: smallScreenBottomBarStyles,
}}
onClick={this.toggleOpen}>
<Container>
<div
css={{
flexGrow: 1,
}}>
<div
css={{
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
height: 60,
[media.between('medium', 'large')]: {
height: 50,
},
[media.lessThan('small')]: {
height: 40,
overflow: 'hidden',
alignItems: 'flex-start',
},
style={{
transform: `translate(0, ${labelOffset}px)`,
transition: 'transform 0.5s ease',
}}>
<div
css={{
width: 20,
marginRight: 10,
alignSelf: 'center',
display: 'flex',
flexDirection: 'column',
height: 40,
lineHeight: '40px',
}}>
<ChevronSvg
cssProps={{
transform: `translate(0, ${value.iconOffset}px) rotate(180deg)`,
}}
/>
<ChevronSvg
cssProps={{
transform: `translate(0, ${0 - value.iconOffset}px)`,
}}
/>
{title}
</div>
<div
css={{
flexGrow: 1,
height: 40,
lineHeight: '40px',
}}>
<div
style={{
transform: `translate(0, ${value.labelOffset}px)`,
}}>
<div
css={{
height: 40,
lineHeight: '40px',
}}>
{title}
</div>
<div
css={{
height: 40,
lineHeight: '40px',
}}>
Close
</div>
</div>
Close
</div>
</div>
</Container>
</div>
</div>
</div>
)}
</Motion>
</Container>
</div>
</div>
);
}
}
Expand Down
10 changes: 1 addition & 9 deletions www/yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6963,7 +6963,7 @@ querystringify@~1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-1.0.0.tgz#6286242112c5b712fa654e526652bf6a13ff05cb"

raf@^3.1.0, raf@^3.3.0:
raf@^3.3.0:
version "3.3.2"
resolved "https://registry.yarnpkg.com/raf/-/raf-3.3.2.tgz#0c13be0b5b49b46f76d6669248d527cf2b02fe27"
dependencies:
Expand Down Expand Up @@ -7051,14 +7051,6 @@ react-live@^1.7.1:
prop-types "^15.5.8"
unescape "^0.2.0"

react-motion@^0.5.1:
version "0.5.1"
resolved "https://registry.yarnpkg.com/react-motion/-/react-motion-0.5.1.tgz#b90631408175ab1668e173caccd66d41a44f4592"
dependencies:
performance-now "^0.2.0"
prop-types "^15.5.8"
raf "^3.1.0"

react-proxy@^3.0.0-alpha.0:
version "3.0.0-alpha.1"
resolved "https://registry.yarnpkg.com/react-proxy/-/react-proxy-3.0.0-alpha.1.tgz#4400426bcfa80caa6724c7755695315209fa4b07"
Expand Down

0 comments on commit 7f254de

Please sign in to comment.