Holiday Map

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.

Like butter

Smooooooth Animations

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

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