ESPN
Kick Game Evolution
Being an NBA sneakerhead has become more than having the biggest closet.
Meet three players who have embraced the sneaker culture evolution.
BACKGROUND
Working with ESPN
ESPN contacted me through a recommendation from a colleague– looking for help creating one-page featured articles. The handoff would consist of Sketch files with redlining notation, and an HTML wrapper.
My contribution is building out the markup, javascript, styles, and provide input on interactions as well as polish up animations.
THE HANDOFF
How things can run so smoothly
The design team at ESPN is exceptional! They provide me a lot of detailed information, and in this case a video on how they would like the flow of the site to animate. With all that work completed before I even touch the keyboard, they ask me to please take all liberties to go ’off-script‘ and experiment with animations that I think would improve the experience.
The tech
Loading up the toolbox
I am a huge fan of GSAP all the way back from the days of Flash. The rest of the technologies used are the 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.
Discovery & Pride
The intro animation presented itself as the largest challenge. Two separate images, a foreground and background, are matched up, a Ken Burns effect is applied, followed by masks to reveal and hide the previous and current slide.
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. So in order to get the copy deck into markup, I have the content folks at ESPN edit a google sheet. I then export it to JSON, and use that to compile the markup (via Nunjucks). If and 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.