Holiday Map

four32c

Holiday Map

This holiday season, we wanted to share some of our favorite West Chelsea places with our friends and clients, so we put together a handy-dandy interactive guide as well as created a limited-edition FOUR32C holiday shopping tote to hold your holiday haul!

– FOUR32C
Background

Holiday Cheer from FOUR32C

The folks from FOUR32C reached out to me to help create an experience that could be shared to friends & clients.

logo-light
// this.blocks is an array of THREE.CSS3DObject's
const flipBlocks = (blocks = []) => {
    blocks.forEach((block, index) => {
        const { rotation } = block;
        const isX = Math.round(Math.random()) === 1;
        const tweenObj = {
            x: isX ? MathPI * 2 : rotation.x,
            y: isX ? rotation.y : MathPI * 2,
            ease: Back.easeOut,
            delay: index * 0.015
        }
        TweenMax.to(rotation, 1.4, tweenObj);
    });
}
Like butter

Smooooooth Animations

By using the Three.js CSS3DRenderer, performance for the “blocks” were easily at 60 fps.

K.I.S.S.

Page.js

Making routing super straightforward in ~1200 bytes by the folks from VisionMedia.

const handleViewChangeStart = (context, next) => {
    const {
        name
    } = currentView;
    if (currentView) {
        if (context.path.search(/\/question\//g) === -1
            || context.path.search(/\/map\//g) === -1) {
                currentView.playOut();
            }
        if (currentView.name !== undefined) {
            document.body.classList.remove(currentView.name);
        };
    }
    next();
}
const handleViewChangeComplete = () => {
    const {
        name
    } = currentView;
    if (name !== undefined) {
        document.body.classList.add(name);
    };
}
const quiz = (context, next) => {
    // create & || provide view with any updated data
    const { id } = context.params;
}
const map = (context, next) => {
    // create & || provide view with any updated data
    const { id } = context.params;
}
const intro = (context, next) => {
    // create & || provide view with any updated data
}
page('/quiz/question/:id', handleViewChangeStart, quiz, handleViewChangeComplete);
page('/map', handleViewChangeStart, map, handleViewChangeComplete);
page('/map/:id', handleViewChangeStart, map, handleViewChangeComplete);
page('*', handleViewChangeStart, intro, handleViewChangeComplete);

The Result

Holiday Map

Launch Project
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 three.js the rest of the technologies I used were standard: HTML5, SCSS, Webpack, and JSON for data-modeling.

uegworldwide.com

United Entertainment Group

uegworldwide.com

UEG was built with Hollywood powerhouse United Talent Agency and the world’s largest communications firm Edelman. Our insights, ideas, intel and access give brands the leading edge and inspire multi-channel activations.

https://www.linkedin.com/company/uegworldwide/
Background

Meet and Greet with UEG

I acquired this project after responding to a colleague’s post on Linkedin looking for a web developer to build their agency’s new site. I was hired immediately. The team at UEG is great to work with and supplied beautiful designs via Zepplin.

ueg_logo

WordPress Plugins

ACF FTW!

Using the Advanced Custom Fields plugin for WordPress makes it fun and efficient to make custom blocks. 22 custom blocks were created, allowing content publishers to simply add into the site, resulting in a styled up block ready to be published.

Sample

Office Location Block

An example of how I used ACF to create the office locations block.

<?php
/**
 * Office Location Block Template.
 *
 * @param   array $block The block settings and attributes.
 * @param   string $content The block inner HTML (empty).
 * @param   bool $is_preview True during AJAX preview.
 * @param   (int|string) $post_id The post ID this block is saved to.
 */
$name = 'office-locations';
// Create id attribute allowing for custom "anchor" value.
$id = $name . '-' . $block['id'];
if( !empty($block['anchor']) ) {
    $id = $block['anchor'];
}
// Create class attribute allowing for custom "className" and "align" values.
$className = $name;
if( !empty($block['className']) ) {
    $className .= ' ' . $block['className'];
}
if( !empty($block['align']) ) {
    $className .= ' align' . $block['align'];
}
?>
<div id="<?= $id ?>" class="<?= $name ?>">
    <?php 
        if( have_rows('regions') ):
            while ( have_rows('regions') ) : the_row();
                $region = get_sub_field('region_name');
                $locations = get_sub_field('locations');
            ?>
            <div class="<?= $className; ?>__region">
                <h5 class="<?= $className; ?>__region-name"><?= $region; ?></h5>
            <?php 
                foreach($locations as $location):
                $name = $location['name'];
                $email = $location['email'];
                $address_line_1 = $location['address_line_1'];
                $address_line_2 = $location['address_line_2'];
                $city_provice_state_zip = $location['city_province_state_zip'];
                $telephone_number = $location['telephone_number'];
            ?>
                <div class="<?= $className; ?>__location">
                    <h4 class="<?= $className; ?>__location-name"><?= $name ?></h4>                    
                    <a 
                        href="mailto:<?= $email ?>" 
                        class="<?= $className; ?>__location-email" 
                        target="_blank">
                    <?= $email ?>
                    </a>
                    <?php if($address_line_1): ?>
                        <span><?= $address_line_1; ?></span>
                    <?php endif; ?>
                    <?php if($address_line_2): ?>
                        <span><?= $address_line_2; ?></span>
                    <?php endif; ?>
                    <?php if($city_provice_state_zip): ?>
                        <span><?= $city_provice_state_zip; ?></span>
                    <?php endif; ?>
                    <?php if($telephone_number): ?>
                        <span><?= $telephone_number; ?></span>
                    <?php endif; ?>
                </div>
            <?php 
                endforeach;
            ?>
            </div>
            <?php
            endwhile;
        endif;
    ?>
</div>

services:       
    wordpress:
        image: wordpress
        container_name: ueg-local-wp
        hostname: wordpress
        restart: always
        ports:
            - 4000:80
        env_file: 
            - .env/wp.env  
        volumes:
            - wordpress:/var/www/html
            - ./dist/wp-content:/var/www/html/wp-content
            - ./uploads.ini:/usr/local/etc/php/conf.d/uploads.ini 
# local
$ wp export --dir=/backup/ --with_attachments
$ tar -C uploads -czf uploads.tar.gz
# server 
$ tar -xvf uploads.tar.gz
$ wp import ueg.export.2020-07-20.xml
$ wp search-replace localhost:4000 uegworldwide.com --dry-run
$ wp search-replace localhost:4000 uegworldwide.com
Like peas and carrots

Docker, WordPress, & WP-CLI

Dockerizing wordpress and linking up the correct volumes made this environment a breeze to work through. Using WP-CLI made migrating between local, stage, and production effortless.

The Result

uegworldwide.com

Launch Project
The Tech

Loading up the toolbox

As mentioned above, there’s a bit of tech sprinkled into the development of this site. Docker allows the configuration of WordPress within seconds. The WP-CLI allows deployments using only a few lines of code. The ACF plugin made customizing the wordpress theme simple. Nothing better than using the right tools for the job.

Drew Brees breaking the NFL all-time career passing yardage record

EPSN

Unexpected Heights

The Saints QB is now the all-time passing yards leader in NFL history. ESPN tracked his path to 71,968 yards.

Background

ESPN

As Drew Brees approached the record, EPSN wanted to feature a timeline of this achievement, starting as far back in his career as November 4th, 2001 up to the 62-yard touchdown pass to rookie receiver Tre’Quan Smith on December 19th, 2019

Content

The Creative

The team at ESPN handed off a sketch file with mobile & desktop designs, fantastic illustrations and animations by Iveta Karpathyova, and an HTML wrapper file for me to use.

The Distance

Yardage Counter

As the user scrolls down the the site, the counter updates Drew’s total yards to date and how many quarterbacks are ahead of his current yardage.

_instance = {n : 0};

scrollUpdate = (scrollPos, skipAnimation) => {
    const els = [...document.querySelectorAll('['+attr+']')];
    let count = 0;
    els.forEach(el => {
        const top = el.getBoundingClientRect().top;
        if(top < scrollPos) {
            count = Number(el.getAttribute(attr));
        }
    });
    if(skipAnimation){
      el.innerHTML = getCounterString(count);
      n = count;
      return;
    }
    TweenLite.to(_instance, .6, {
      n: count,
      ease: Quad.easeOut,
      onUpdate: function() {
        el.innerHTML = getCounterString(_instance.n);
      },
      onUpdateScope:this
    });
  };
// plot data
    var plot = function(data, color) {
      var px,py;
      data.forEach(function(value, index){
        x = (index+1) * inc + origin.x;
        y = origin.y - value/80 * graph.height;
        _svg.paper.circle(x, y, 3).attr({
          fill: color
        });
        if(px && py) {
          _svg.paper.line(px,py,x,y).attr({
            'font-family':"BentonSans-Medium, BentonSans",
            'font-size':"13",
            'font-weight':"400",
            'letter-spacing':"0.6",
            fill:"#9B9B9B",
            stroke: color,
            'stroke-width': 2
          });
        }
        px = x;
        py = y;
      })
    };
Data Visualizations

Snap.svg

A challenge while in development was that the data was always changing as Drew played each game. Therefore, we couldn’t create static data visualizations, and after each game ESPN would supply me with new numbers. As a result, I used the javascript library, snap.svg, to dynamically create the graphs.

The Result

Unexpected Heights

Launch Project
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 using GSAP and Snap.svg the rest of the technologies used were standard: HTML5, SCSS, Webpack, and JSON for data-modeling.

Considerations and Recommendations

As a freelancer, you wear many hats. 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.

The Team

Associate Art Director –– Sarah Pezzullo
Reporting –– Mike Triplett
Sr. Designer –– Titus Smith
Developer –– Chad Drobish

The Defiant Ones

HBO

The Defiant Ones

The official website for HBO’s The Defiant Ones. A docu-series about Dr. Dre and Jimmy Iovine’s unlikely music partnership and their impact on contemporary culture.

Background

The Resistance

I was contracted by Deep Focus to generate a one page site promoting the HBO Documentary series– The Defiant Ones. The agency had presented four primary sections: a snapchat snapcode promoting the documentary, hidden bonus content, user generated gifs, and influencer experiences.

Bells & Whistles

The Features

Snapcode

Once landing on the site, the user is presented with snapping the Defiant Ones snapcode- which unlocks the official Defiant Ones lens.

Disruption

Unlock bonus content, by continuing to watch a few jarring animations.

User-generated content

Users could record their own 10 second video, fill in the black for the phrase “You will never _______.” and receive sharable animated gif that contains the same type of effect as the above.

Listen to some influencers.

HBO had 6 influencers record some of their defiant experiences to share.

The Tech

Loading up the toolbox

This one page site was packed with different technologies. React was used for the video capture process, nodejs was used to make the ugc content, and intense CSS3 animations for the glitchy-ness effects.

Considerations

The UGC content was the challenge that stood out the most. Making a video capture tool that will only be X amount of secs of recording, that will not only work cross-browser, but cross devices.

Related Work

Night of too many stars

HBO

Night of too many stars

Night of Too Many Stars is a fundraising telethon for autism. It has been held every two or three years since 2003. The event was founded by Robert Smigel after learning that his son was diagnosed with autism.

Background

Deep Focus

The folks at Deep Focus were tasked to put up a one page site promoting the upcoming event ‘The Night of Too Many Stars’ being held at Madison Square Garden. The site was to promote upcoming talent, stream live the night of, and highlight the event once it was over.

The Result

Night of too many stars

The Main Event

At Madison Square Garden

It was requested that I be present during the live production to help assist if something went awry. Everything went perfectly as planned. My task the for the night was to switch between three different versions of the site; a countdown to the show, integrating the YouTube Live stream, and reverting back to the original . Afterwards, HBO provided highlight videos which were added to complete the project.

Year in Review 2014

Spotify

Year in Review

View Spotify’s Year in Music. See what everyone was listening to in 2014 and get your own personalized Year in Music to share. In 2014 we couldn’t stop playing. From the bangers that made the world dance, to ballads that captured a moment — let’s look back, celebrate, and then play it forward.

BACKGROUND

Spotify

In 2014, Spotify compiled data from over 50 million users to reveal the most popular musical artists of the year. Additionally, the music streaming service captured listeners’ connections between songs from their playlist history and moments experienced throughout the same year.

The result

Spotify Year in Music

Video supplied from award submission
https://www.oneclub.org/awards/theoneshow/-award/23062/spotify-year-in-music

Top Female Artist

Katy Perry

View the Top 5
Say Congrats

Top Female Artist

Top 5

Close
  • 1

    Katy Perry

  • 2

    Ariana Grande

  • 3

    Lana Del Ray

  • 4

    Beyoncé

  • 5

    Lorde

CSS3

Tiles

The data and design supplied many types of information for the year in music. Tiles like this were used to show the featured category and flipped to reveal more information.

Prototype

Scroll Jacking

During the R&D stage of the project, the team wanted to see how the site could behave as single slides. After building out this prototype we discovered it would be best to allow the user control of scrolling.

Launch prototype

The Tech

Loading up the toolbox

There was a wide variety of technology used for this project. Angular was used for the framework, Node.js to compile the user’s sharable content, Handlebars for templating sections.

The Team

Group Creative Director — Alex Bodman
Creative Director — Diego Aguilar
Art Direction, Design & UX — Thomas Dudon
Copywriter — Hunter Simms
Dev — Chad Drobish
UX — Talia Fisher

Recognitions

The One Show
Gold Pencil

The Webby Awards
People’s Voice Winner
Best Visual Design – Aesthetic – Nominee, Honoree

The Clio Awards
Music, Digital/Social – Silver
Music, Innovative – Bronze

Mashies
Best Global Campaign – Winner

OMMA Awards
Online Advertising Creativity: Viral Campaign
Web Site Excellence: Entertainment

FWA
Site of the Day

aWWWards
Site of the Day

CSS Awards
Site of the Day

Creative Review Annual 2015

The Year of BO

ESPN

The Year of BO

Thirty years ago a run of events happened that would turn Bo Jackson from a brilliant enigma into an international icon. Jackson was known before 1989, but in 12 months, everything changed.

BACKGROUND

Working with ESPN

I was contracted to develop a featured article that highlights 12 months of Bo Jackson’s achievements. ESPN provided me with well documented Sketch file, a wrapper HTML, and some base styles. The rest was history.

Assets

Great Content

ESPN provided me with animated gifs in the classic 8-bit NES style. These animations were not just crafted beautifully, but file size averaged around 100kb.

Illustrations by Jude Buffum

NES Shout-out

Tecmo Bowl

It is always a pleasure when working on a project where you enjoy developing the work as much as the content itself.

Parallax

Scrolling Extras

While exploring each month, there are two reveal animations. Using GSAP, I can queue up animations that can tween through its progress while the user scrolls.

...
const isInView = () => {
            const {
                y,
                top,
                height
            } = el.getBoundingClientRect()            
            const yPos = y || top;
            return (height + yPos > 0 && yPos < window.innerHeight);
        }
...
...
const onScroll = () => {
            container.style.visibility = isInView() ? 'visible' : 'hidden';
            const vh = window.innerHeight;
            const {
                y,
                top,
                height
            } = el.getBoundingClientRect();
            const yPos = y || top;
            const progress = ((yPos + height) / (vh + height));
            // tl : TimelineLite that has the animation of the image and text
            TweenLite.to(tl, 0.4, {
                progress
            });
        }
...
window.addEventListener('scroll', throttle(onScroll, 10), false);
The result

The Year of Bo

Launch Project
The Tech

Loading up the toolbox.

When getting a local development set up quickly, I like to use Viget Labs – Blendid:

Blendid is a delicious stand-alone blend of tasks and build tools that form a full-featured modern asset pipeline. It can be used as-is as a static site builder, or can be configured and integrated into your own development environment and site or app structure

https://github.com/vigetlabs/blendid/tree/blendid5

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.

Conclusion

This featured article took a little over a month to develop. The team was lean and efficient resulting in a quick production.

Dunk Dynasty: Zion’s astonishing slam index

ESPN

Dunk Dynasty: Zion’s astonishing slam index

Duke freshman Zion Williamson is among the most explosive dunkers the game of basketball has ever seen. We cataloged the best and most impactful of his 52 dunks during a scintillating season in Durham.

BACKGROUND

Working with ESPN

It’s always a real treat to get involved with anything ESPN hands me. This time, ESPN reached out to build a featured article that demonstrates the amazing talent of Zion Willamson. They delivered all the assets, and a very organized Sketch file, and I handed back the developed feature.

Fun Tech

SwiperJS

The article consisted of 5 sections, and each section had a range videos. SwiperJS was utilized to create the carousel resulting in a smooth cross platform transition from article to article.

For the lazy viewer

Video on demand

ESPN requested to have the videos autoplay as the user scrolls the video into view. The code below demonstrates how this was executed.

window.addEventListener('scroll', throttle(() => {
    // get current section
    const columnIndex = Navigation.swiper.realIndex;
    const column = columns[columnIndex]
    // get dunks from current section
    const columnDunks = [].slice.call(column.querySelectorAll('.dunk'));
    // check position of dunk 
    columnDunks.forEach((dunk, index) => {
        const {
            top,
            bottom,
            height
        } = dunk.getBoundingClientRect();
        const centerY = (bottom - top)/2 + top;
        // if its within range, play it
        if (centerY < 0.75 * window.innerHeight 
            && centerY > 0.25 * window.innerHeight) {
            const dunkIndex = columnIndex * 5 + index;
            activateDunk(dunks[dunkIndex]);
        }
    }); 
}, 200));
The Result

Dunk Dynasty: Zion’s astonishing slam index

Launch Project
The Tech

Loading up the toolbox

Considerations and Reccommendations

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.

Experience MLS like a die-hard fan

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 Result

Experience MLS like a die-hard fan

Launch Project
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.

Kick Game Evolution

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 RESULT

ESPN – Kick Game Revolution

Launch Project
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.