Skip to content

Commit e9e5be3

Browse files
Update confetti animation (#8083)
Co-authored-by: Daniel Mallory <[email protected]>
1 parent 2f2fa96 commit e9e5be3

File tree

2 files changed

+44
-26
lines changed

2 files changed

+44
-26
lines changed

changelog/update-confetti-animation

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
Significance: patch
2+
Type: update
3+
Comment: Confetti animation update.
4+
5+

client/components/confetti-animation/index.tsx

Lines changed: 39 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -6,38 +6,51 @@ import confetti from 'canvas-confetti';
66

77
const defaultColors = [ '#889BF2', '#C3CDF9', '#6079ED' ];
88

9+
const randomInRange = ( min: number, max: number ): number =>
10+
Math.floor( Math.random() * ( max - min ) + min );
11+
12+
// Use a rectangle instead of an square on supported browsers.
13+
const rectangle =
14+
typeof Path2D === 'function' && typeof DOMMatrix === 'function'
15+
? confetti.shapeFromPath( {
16+
path: 'M0,0 L2,0 L2,1 L0,1 Z',
17+
} )
18+
: 'square';
19+
20+
// Adjust particle amount based on screen size.
21+
const particleLength = ( window.innerWidth + window.innerHeight ) / 50;
22+
923
const fireConfetti = ( colors: string[] ) => {
1024
const defaults = {
11-
origin: { y: 0.3 },
1225
spread: 360,
26+
particleCount: 1,
27+
startVelocity: 0,
1328
zIndex: 1000000,
14-
colors,
1529
};
1630

17-
const rectangle = confetti.shapeFromPath( {
18-
path: 'M0,0 L2,0 L2,1 L0,1 Z',
19-
} );
20-
21-
confetti( {
22-
...defaults,
23-
particleCount: 20,
24-
shapes: [ rectangle ],
25-
scalar: 4,
26-
startVelocity: 60,
27-
} );
28-
confetti( {
29-
...defaults,
30-
particleCount: 20,
31-
shapes: [ rectangle ],
32-
scalar: 2,
33-
startVelocity: 40,
34-
} );
35-
confetti( {
36-
...defaults,
37-
particleCount: 40,
38-
shapes: [ 'circle' ],
39-
startVelocity: 20,
40-
} );
31+
for ( let i = 0; i < particleLength; i++ ) {
32+
confetti( {
33+
...defaults,
34+
colors: [ colors[ randomInRange( 0, colors.length ) ] ],
35+
origin: {
36+
x: Math.random(),
37+
y: Math.random() * 0.999 - 0.2,
38+
},
39+
drift: randomInRange( -2, 2 ),
40+
shapes: [ 'circle' ],
41+
} );
42+
confetti( {
43+
...defaults,
44+
colors: [ colors[ randomInRange( 0, colors.length ) ] ],
45+
origin: {
46+
x: Math.random(),
47+
y: Math.random() * 0.999 - 0.2,
48+
},
49+
shapes: [ rectangle ],
50+
drift: randomInRange( -2, 2 ),
51+
scalar: randomInRange( 2, 4 ),
52+
} );
53+
}
4154
};
4255

4356
interface Props {

0 commit comments

Comments
 (0)