ESPN
Experience MLS like a die-hard fan
Raucous fans make the MLS matchday atmosphere among the best in American pro sports.
Background
ESPN
This featured article was created to demonstrate the energized fans that fill up stadiums all over the county. ESPN chose to pick 5 teams and highlight their traditions that make going to a game a unique experience.
Content
The Chosen 5 Teams
ESPN went on the road to gather editorial from the Atlanta United FC, Minnesota United FC, Portland Timbers, Seattle Sounders FC, and the Sporting Kansas City. They came back with 360º videos, HD video, and imagery that captures the fans excitement
Capturing the excitement
Using 360º Video
My initial thought to display 360º video, was to create a custom player with three.js. From my discovery I found that videojs has a plugin for vr. After a prototype, I decided to go with the plugin which ultimately saved a few hours.
The Tech
Loading up the toolbox
I am a huge fan of GSAP all the way back from the days of Flash. With the exception of GSAP and Videojs-vr the rest of the technologies I used were standard: HTML5, SCSS, Webpack, and JSON for data-modeling.
Considerations and Recommendations
As project manager, I chose tools that help the team organize tasks and assets. For ESPN, I recommended Trello and created a board that borrows features from agile planning. This provides visibility to the client for the work that is outstanding, in development and completed.
Google Sheets
JSON
Nunjucks
HTML5
FEED ME!
Content Management
ESPN has their own CMS to handle article content, however developers do not have access to it. In order to get the copy deck into HTML markup, the content team at ESPN edits a google sheet, then I export it to JSON, and use that to compile the markup (via Nunjucks). When updates are required, the team makes the changes in google sheets, and I export a fresh JSON file, compile it and then they can copy & paste the markup into their CMS.