Skip to content

Commit 69734b8

Browse files
author
Ives van Hoorne
committed
Performance improvements
1 parent 6e65d4a commit 69734b8

File tree

11 files changed

+90
-65
lines changed

11 files changed

+90
-65
lines changed

‎src/homepage/src/components/RollingText.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
22

3-
import { TimelineLite, TweenMax } from 'gsap';
3+
import { TimelineMax, TweenMax } from 'gsap';
44

55
export default class RollingText extends React.Component {
66
state = {
@@ -15,15 +15,15 @@ export default class RollingText extends React.Component {
1515
}
1616

1717
componentDidMount() {
18-
this.fadeInTL = new TimelineLite({ paused: true });
18+
this.fadeInTL = new TimelineMax({ paused: true });
1919
this.fadeInTL.fromTo(
2020
this.fadein,
2121
0.8,
2222
{ opacity: 0, y: 20 },
2323
{ opacity: 1, y: 0 }
2424
);
2525

26-
this.fadeOutTL = new TimelineLite({ paused: true });
26+
this.fadeOutTL = new TimelineMax({ paused: true });
2727
this.fadeOutTL.fromTo(
2828
this.fadeout,
2929
0.8,

‎src/homepage/src/html.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ class Html extends Component {
3131
}
3232

3333
return (
34-
<html op="news" lang="en">
34+
<html lang="en">
3535
<head>
3636
{this.props.headComponents}
3737

@@ -75,11 +75,11 @@ class Html extends Component {
7575
/>
7676
<meta property="twitter:image:width" content="1200" />
7777
<meta property="twitter:image:height" content="630" />
78-
<TypographyStyle typography={typography} />
7978
<link
8079
href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700"
8180
rel="stylesheet"
8281
/>
82+
<TypographyStyle typography={typography} />
8383
{css}
8484
</head>
8585
<body>

‎src/homepage/src/layouts/index.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ const TemplateWrapper = ({ children }) => (
4242
/>
4343

4444
<Header />
45-
<div>{children()}</div>
45+
<div style={{ maxWidth: '100vw', overflow: 'hidden' }}>{children()}</div>
4646
</div>
4747
</ThemeProvider>
4848
);

‎src/homepage/src/screens/home/Animation/Background.js

+5-1
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,11 @@ export default class Background extends React.PureComponent {
4444
}}
4545
>
4646
<canvas
47-
style={{ position: 'absolute', top: 0, left: 0 }}
47+
style={{
48+
position: 'absolute',
49+
top: 0,
50+
left: 0,
51+
}}
4852
ref={this.startCanvas}
4953
/>
5054
</Container>

‎src/homepage/src/screens/home/Animation/Cubes.js

-5
Original file line numberDiff line numberDiff line change
@@ -142,11 +142,6 @@ export default class Cubes extends React.PureComponent {
142142

143143
if (nextTemplate !== currentTemplate.template) {
144144
this.shrinkCube(currentTemplate);
145-
this.setState({ lastTemplate: currentTemplate });
146-
setTimeout(() => {
147-
this.setState({ lastTemplate: null });
148-
}, 800);
149-
150145
this.growCube(nextTemplate, nextProps.canvas);
151146
}
152147
}

‎src/homepage/src/screens/home/Animation/canvas/Dot.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,9 @@ export default class Dot extends PositionedElement {
2323

2424
draw(ctx: CanvasRenderingContext2D) {
2525
ctx.beginPath();
26-
ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI, false);
2726
ctx.fillStyle = `rgba(${this.color.join(',')}, ${this.alpha})`;
27+
ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI, false);
28+
ctx.closePath();
2829
ctx.fill();
2930
}
3031

‎src/homepage/src/screens/home/Animation/canvas/index.js

+54-45
Original file line numberDiff line numberDiff line change
@@ -42,22 +42,22 @@ class Canvas {
4242
}
4343

4444
lowPerf = false;
45+
toggle = false;
4546

4647
loop = () => {
4748
const now = Date.now();
48-
const delta = now - this.lastDelta;
49-
if (getScrollPos(now).y > this.stage.height || delta < 33) {
49+
const delta = 33;
50+
const renderDelta = (now - this.lastDelta) * 2;
51+
if (window.scrolling || getScrollPos(now).y > this.stage.height) {
52+
this.lastDelta = now;
5053
requestAnimationFrame(this.loop);
5154
return;
5255
}
5356

54-
if (delta > 2000) {
57+
if (renderDelta > 4000) {
5558
this.lowPerf = true;
56-
this.dots = this.dots.filter(x => Math.random() > 0.5);
5759
}
5860

59-
this.ctx.clearRect(0, 0, this.stage.width, this.stage.height);
60-
6161
let distX;
6262
let distY;
6363
let power = 0.2;
@@ -67,53 +67,62 @@ class Canvas {
6767
let middle;
6868
let top;
6969

70-
if (this.wave) {
71-
const radius = this.wave.waveWidth;
70+
this.toggle = !this.toggle;
71+
if (this.toggle) {
72+
if (this.wave) {
73+
const radius = this.wave.waveWidth;
7274

73-
this.wave.update(delta);
75+
this.wave.update(delta);
7476

75-
startRadius = this.wave.waveRadius - radius / 2 - radius;
76-
endRadius = this.wave.waveRadius + radius / 2 - radius;
77-
middle = startRadius + (endRadius - startRadius) / 2;
78-
top = -(middle - startRadius) * (middle - endRadius);
77+
startRadius = this.wave.waveRadius - radius / 2 - radius;
78+
endRadius = this.wave.waveRadius + radius / 2 - radius;
79+
middle = startRadius + (endRadius - startRadius) / 2;
80+
top = -(middle - startRadius) * (middle - endRadius);
7981

80-
if (startRadius > this.stage.width + 200) {
81-
this.wave = null;
82+
if (startRadius > this.stage.width + 200) {
83+
this.wave = null;
84+
}
8285
}
83-
}
84-
85-
for (let i = 0; i < this.dots.length; i++) {
86-
distX = Math.abs(this.dots[i].x - this.cubeX);
87-
distY = Math.abs(this.dots[i].y - this.cubeY);
88-
const distance = Math.sqrt(distX * distX + distY * distY);
89-
90-
this.dots[i].setAlpha(Math.max(0.2, (1 - distance / 300) * 2));
91-
this.dots[i].setSize(Math.max(1.5, (1 - distance / 300) * 4));
92-
this.dots[i].update(delta);
9386

94-
if (this.wave) {
95-
const dirX = this.dots[i].x - this.wave.x;
96-
const dirY = this.dots[i].y - this.wave.y;
97-
const waveDistance = Math.sqrt(dirX * dirX + dirY * dirY);
87+
for (let i = 0; i < this.dots.length; i++) {
88+
distX = Math.abs(this.dots[i].x - this.cubeX);
89+
distY = Math.abs(this.dots[i].y - this.cubeY);
90+
const distance = Math.sqrt(distX * distX + distY * distY);
9891

99-
if (waveDistance < middle) {
100-
this.dots[i].setColor(this.wave.color);
92+
this.dots[i].setAlpha(Math.max(0.2, (1 - distance / 300) * 2));
93+
this.dots[i].setSize(Math.max(1.5, (1 - distance / 300) * 4));
94+
this.dots[i].update(delta);
95+
96+
if (this.wave) {
97+
const dirX = this.dots[i].x - this.wave.x;
98+
const dirY = this.dots[i].y - this.wave.y;
99+
const waveDistance = Math.sqrt(dirX * dirX + dirY * dirY);
100+
101+
if (waveDistance < middle) {
102+
this.dots[i].setColor(this.wave.color);
103+
}
104+
if (waveDistance > startRadius && waveDistance < endRadius) {
105+
power = Math.max(
106+
0,
107+
-((waveDistance - startRadius) * (waveDistance - endRadius)) / top
108+
);
109+
110+
this.dots[i].x += (power - 0.5) * (dirX / waveDistance) * 5;
111+
this.dots[i].y += (power - 0.5) * (dirY / waveDistance) * 5;
112+
113+
this.dots[i].alpha *= (power + 1) ** 4;
114+
this.dots[i].size *= power * 0.5 + 1;
115+
}
101116
}
102-
if (waveDistance > startRadius && waveDistance < endRadius) {
103-
power = Math.max(
104-
0,
105-
-((waveDistance - startRadius) * (waveDistance - endRadius)) / top
106-
);
107-
108-
this.dots[i].x += (power - 0.5) * (dirX / waveDistance) * 5;
109-
this.dots[i].y += (power - 0.5) * (dirY / waveDistance) * 5;
117+
}
118+
} else {
119+
if (!this.lowPerf) {
120+
this.ctx.clearRect(0, 0, this.stage.width, this.stage.height);
110121

111-
this.dots[i].alpha *= (power + 1) ** 4;
112-
this.dots[i].size *= power * 0.5 + 1;
122+
for (let i = 0; i < this.dots.length; i++) {
123+
this.dots[i].draw(this.ctx);
113124
}
114125
}
115-
116-
this.dots[i].draw(this.ctx);
117126
}
118127

119128
this.lastDelta = now;
@@ -145,8 +154,8 @@ class Canvas {
145154
const distance = Math.sqrt(distX * distX + distY * distY);
146155

147156
this.dots[i].setSpeed(
148-
distX / distance / 40 * ((Math.random() + 0.1) * 0.2),
149-
distY / distance / 40 * ((Math.random() + 0.1) * 0.2)
157+
distX / distance / 20 * ((Math.random() + 0.1) * 0.15),
158+
distY / distance / 20 * ((Math.random() + 0.1) * 0.15)
150159
);
151160
}
152161
this.calibrated = true;

‎src/homepage/src/screens/home/Animation/index.js

+9-5
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,11 @@ import HomeTitle from './Title';
1313
import Cubes from './Cubes';
1414
import Frameworks from '../Frameworks';
1515

16+
import getScrollPos from '../../../utils/scroll';
17+
1618
import media from '../../../utils/media';
1719

18-
const Container = styled(Centered)`
20+
const Container = Centered.extend`
1921
position: relative;
2022
width: 100%;
2123
height: 100vh;
@@ -76,10 +78,12 @@ export default class Animation extends React.PureComponent {
7678
startTimer = () => {
7779
this.timeout = setTimeout(() => {
7880
if (!this.state.templateSelected) {
79-
this.setState({
80-
templateIndex:
81-
(this.state.templateIndex + 1) % this.state.templates.length,
82-
});
81+
if (!window.scrolling && getScrollPos().y < window.innerHeight) {
82+
this.setState({
83+
templateIndex:
84+
(this.state.templateIndex + 1) % this.state.templates.length,
85+
});
86+
}
8387

8488
this.startTimer();
8589
}

‎src/homepage/src/screens/home/Footer.js

+10-1
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,25 @@ import styled from 'styled-components';
33

44
import MaxWidth from 'app/components/flex/MaxWidth';
55

6+
import media from '../../utils/media';
7+
68
const Container = styled.div`
79
display: flex;
810
justify-content: space-around;
911
width: 100%;
1012
padding-top: 5rem;
1113
padding-bottom: 3rem;
14+
flex-wrap: wrap;
1215
`;
1316

1417
const Column = styled.div`
15-
flex: 1;
18+
width: calc(33% - 2rem);
19+
margin: 0 1rem;
20+
21+
${media.phone`
22+
width: 100%;
23+
margin-bottom: 1rem;
24+
`};
1625
`;
1726

1827
const Title = styled.h5`

‎src/homepage/src/screens/home/Frameworks/index.js

+3
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ import Column from 'app/components/flex/Column';
66
import Centered from 'app/components/flex/Centered';
77
import Padding from 'app/components/spacing/Padding';
88

9+
import theme from 'common/theme';
10+
911
import LoadInView from '../../../components/LoadInView';
1012
import RollingText from '../../../components/RollingText';
1113

@@ -285,6 +287,7 @@ export default class Frameworks extends React.Component {
285287
boxShadow: '0 4px 8px rgba(0, 0, 0, 0.3)',
286288
border: 'none',
287289
marginTop: '5rem',
290+
backgroundColor: theme.background2(),
288291
}}
289292
height={650}
290293
title="sandbox"

‎src/homepage/src/utils/scroll.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
let cache = null;
22

33
export default function getScrollPos(now = Date.now()) {
4-
if (cache && now - cache.now < 1000) {
4+
if (cache && now - cache.now < 100) {
55
return cache.result;
66
}
77

0 commit comments

Comments
 (0)