-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
354 lines (316 loc) · 14.7 KB
/
index.html
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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Breaking Goes Global</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.9.6/lottie.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/ScrollTrigger.min.js"></script>
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
.section {
display: flex;
justify-content: center;
align-items: center;
}
.text-section {
padding: 2rem;
max-width: 800px;
margin: 0 auto;
font-size: 1.2em;
line-height: 1.6;
}
.banner-section {
width: 100%;
max-width: 1000px; /* Maximum width of the image */
margin: 0 auto; /* Center the image section if it's narrower than its container */
}
.banner {
width: 100%;
}
.banner img {
width: 100%;
height: auto;
display: block;
max-width: 100%;
}
/* Media query for smaller screens */
@media screen and (max-width: 768px) {
.banner-section {
padding: 0 15px; /* Add some padding on smaller screens */
}
}
.image-section {
width: 100%;
max-width: 1500px;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
box-sizing: border-box;
}
.image-section img {
max-width: 100%;
height: auto;
display: block;
}
@media (max-width: 768px) {
.image-section {
padding: 10px;
}
.image-section img {
width: 100%; /* Ensure the image takes full width on mobile */
}
}
.animation-section
/* ,
.animation3a-section,
.animation3b-section */
{
display: flex;
flex-direction: column;
align-items: center;
overflow-x: hidden;
width: 100%;
padding: 2rem 0; /* Add some vertical padding */
}
.animation-section {
min-height: 100vh; /* Use min-height instead of fixed height */
}
/* .animation3a-section {
height: 30vh;
padding: 1rem 0 0.5rem;
}
.animation3b-section {
min-height: 110vh;
padding: 0.5rem 0 1rem;
} */
.animation-container {
width: 100%;
max-width: 1500px;
max-height: 750px;
height: auto; /* Allow height to adjust based on content */
}
@media (max-width: 768px) {
.text-section {
font-size: 1em;
padding: 1rem;
}
.animation-section
/* ,
.animation3a-section,
.animation3b-section */
{
padding: 1rem 0; /* Reduce padding on mobile */
}
.animation-section {
min-height: auto; /* Remove fixed height */
}
/* .animation3a-section {
min-height: auto;
}
.animation3b-section {
min-height: auto;
} */
.animation-container {
height: auto; /* Allow height to adjust based on content */
max-height: 80vh; /* Limit maximum height on mobile */
}
}
a {
color: #2D2570;
}
.footnote{
font-size: 14px;
text-align: center;
}
#animation1a {max-width: 1200px; margin: 0 auto; scale: 0.9}
#animation1 {max-width: 1200px; margin: 0 auto;}
#animation2 {max-width: 1200px; margin: 0 auto;}
#animation3a {max-width: 1600px; margin: 0 auto;}
#animation3b {max-width: 1300px; margin: 0 auto; scale: 1.2;}
#animation4a {max-width: 1500px; margin: 0 auto; scale: 0.7;}
</style>
</head>
<body style="background-color:#F4D2BC">
<br>
<br>
<br>
<div class="banner-section">
<div class="banner">
<img src="img/collage-banner.png" width="1000 px" height="auto" alt="alt=Breakdancing collage banner">
</div>
</div>
<br>
<br>
<div class="section text-section">
<p>Breakdancing, or "breaking" as it's known among dancers, began as one pillar of a growing hip hop movement that also included DJing, MCing, and graffiti.
Hip hop was born out of a time of urban decay and neglect in the Bronx, New York City in the 1970s.
It quickly became a source of community and expression for Black and Latino youths.
With its combination of athleticism and creative flair, it wasn't long before breaking exploded in popularity in the rest of the United States.
Eventually, it made its way to Europe and Asia and other parts of the world through American movies and TV shows.
<br>
<br>
By the 1990s, breaking went from a party dance in the streets to a competitive art on international stages.
Some of the oldest and most prestigious international competitions featuring crew battles are
<a href="https://en.wikipedia.org/wiki/Battle_of_the_Year">Battle of the Year</a> in Germany,
<a href="https://en.wikipedia.org/wiki/UK_B-Boy_Championships">UK B-Boy Championships</a> in the UK,
<a href="https://en.wikipedia.org/wiki/Freestyle_Session">Freestyle Session</a> in the U.S.,
<a href="https://www.thenotoriousibe.com/">The Notorious IBE</a> in the Netherlands, and
<a href="https://en.wikipedia.org/wiki/Chelles_Battle_Pro">Chelles Battle Pro</a> in France.
<br>
<br>
Over the past two decades, an unlikely contender has emerged: South Korea. Despite never having competed until 2001 and not hosting their own annual international breaking
competition until 2007, South Korea has proven itself as a worthy competitor.
<br>
<br>
For the purpose of this analysis, data was collected on the winning dance crews for four of the aforementioned championships (in Germany, UK, U.S., and France)*.
The analysis is intended to observe trends in winning countries over the past three decades to understand where breaking culture has taken root, away from its beginnings in the Bronx.
</p>
</div>
<div class="section animation-section">
<div id="animation1a" class="animation-container"></div>
<div id="animation1" class="animation-container"></div>
<br>
<div id="animation2" class="animation-container"></div>
</div>
<div class="section text-section">
<p>At first glance, South Korea seems to be an unexpectedly strong contender, stepping onto the scene later than its peers.
All other countries represented in the above chart have had dance crews competing internationally since the 1990s.
Once South Korea joined in the 2000s, they swiftly racked up wins.
Eventually, South Korean crews started outperforming the countries with a longer history with street dance culture.
<br>
<br>
What happens when we break it down further and look at the top winners of each championship?
</p>
</div>
<div class="section animation-section">
<div id="animation3a" class="animation-container"></div>
<br>
<br>
<br>
<br>
<div id="animation3b" class="animation-container"></div>
</div>
<div class="section text-section">
<p>Breaking down the top winners according to championships, South Korea is the only country that appears in the top two in each.
Though the U.S. has accumulated the most number of wins across the four competitions, most of their wins occurred in its own U.S.-based competition.
South Korea is the only non-Western country performing at such a high level at competitions in the West, something that could otherwise be difficult to achieve given barriers to access, resources, and travel.
<br>
<br>
It begs the question: How did South Korea emerge as a breaking powerhouse?
</p>
</div>
<div class="section animation-section">
<div id="animation4a" class="animation-container"></div>
<div id="animation4b" class="animation-container"></div>
</div>
<!-- <div class="image-section">
<img src="img/sk timeline.png" width="1500 px" height="auto" alt="alt=Timeline of breaking in South Korea">
</div> -->
<div class="section text-section">
<p>Looking at a timeline of breaking in South Korea, U.S.-South Korea relations played a pivotal role in exposing young Koreans to American culture.
In the 1980s, American soldiers stationed in South Korea brought breaking to clubs in Itaewon in Seoul and other areas with military bases.
In 1997, Korean American <a href="https://laist.com/news/arts-and-entertainment/how-a-legendary-la-dance-crew-helped-spark-koreas-b-boy-scene">John Jay Chon</a>, widely regarded as the pioneer of South Korea's breaking scene, brought over VHS tapes of Los Angeles breaking crews.
Enthusiasts made copies of the tapes and distributed them even wider.
By the early 2000s, South Korea began making its mark on an international level.
<br>
<br>
Though the Paris 2024 organizers approved breaking as an Olympic sport for the first time in its history, citing the mission of making the Olympics
<a href="https://www.npr.org/2019/02/22/697009844/breakdancing-in-the-olympics-paris-2024-organizers-say-oui-garcon">"more youth-focused,"</a>
Los Angeles 2028 organizers have already omitted breaking from their program.
The decision has <a href="https://firstandpen.com/la28-olympic-organizers-are-dead-wrong-for-excluding-breaking/">confounded fans and dancers alike</a>,
given the West Coast's rich history and contributions to street dance culture.
<br>
<br>
Meanwhile, in 2023, the Seoul Metropolitan Office of Education (SMOE) and Korea Breaking Federation
<a href="https://m.koreaherald.com/view.php?ud=20221228000502&utm">signed an agreement</a> to introduce breaking into the public education system.
After-school breaking classes will be offered in elementary and middle schools in response to its growing popularity among youth.
SMOE Superintendent Cho Hee-Yeon has <a href="https://liftedasia.com/article/seoul">stated</a>
that the agreement will support South Korea's efforts competing in future Olympics and Asian Games events.
<br>
<br>
As breaking moves further away from the communities that created and made it into the global phenomenon it now is, there is a worry that the subculture will lose its original meaning as a space for marginalized youth.
An American pioneer of breaking and a member of the famous Rock Steady Crew, Norman "Normanski" Scott, was
<a href="https://www.latimes.com/delos/story/2023-08-21/de-los-break-dancing-story">quoted in the Los Angeles Times</a>
asking, "Will the youth of the communities where breaking started be represented in the upcoming Games?"
</p>
</div>
<div class="footnote">
<br>
*The Notorious IBE was left out of the data collection and analysis as the data spanning from its inception in 1998 to present day is not publicly available.
<br>
A request was sent to the organization for access to their data. No response was received at the time of this writing.
<br>
<br>
Code for this data story can be found <a href="https://github.com/christinamyli/breakdance">here</a>.
<br>
<br>
<br>
<br>
</div>
<script>
gsap.registerPlugin(ScrollTrigger);
const animations = [
{ id: 'animation1a', path: 'animation1a/boombox-title.json'},
{ id: 'animation1', path: 'animation1/boombox-1.json'},
{ id: 'animation2', path: 'animation2/boombox-2.json'},
{ id: 'animation3a', path: 'animation3a/barChartTitle.json'},
{ id: 'animation3b', path: 'animation3b/barChart.json'},
{ id: 'animation4a', path: 'animation4a/timelineTitle.json'},
{ id: 'animation4b', path: 'animation4b/timeline.json'},
];
let animationInstances = [];
function initAnimations() {
animations.forEach((anim, index) => {
const container = document.getElementById(anim.id);
const animation = lottie.loadAnimation({
container: container,
renderer: 'svg',
loop: false,
autoplay: false,
path: anim.path,
rendererSettings: {
preserveAspectRatio: 'xMidYMid meet'
}
});
animationInstances.push(animation);
ScrollTrigger.create({
trigger: container,
start: "top 80%",
end: "bottom 20%",
onEnter: () => {
animation.goToAndPlay(0);
},
onEnterBack: () => {
animation.goToAndPlay(0);
},
onLeave: () => {
animation.pause();
},
onLeaveBack: () => {
animation.pause();
}
});
});
}
function handleResize() {
// Refresh animations and ScrollTrigger on resize
animationInstances.forEach(animation => animation.destroy());
animationInstances = [];
ScrollTrigger.getAll().forEach(trigger => trigger.kill());
initAnimations();
}
// Initial setup
initAnimations();
// Handle resize events
window.addEventListener('resize', handleResize);
</script>
</body>
</html>