Custom WordPress theme built with React to showcase Create Advertising's amazing catalog of work using an expandable grid and custom Vimeo video player carousel.

03

Highlights

Automated server provisioning and deployment

Uses the Trellis framework combine with a custom WordPress theme build process. See the Sisu Wordpress Roots starter repo for more info.

Optimized, expandable masonry grid

The grid is made to load the image first, then when the user scrolls down and a grid item comes into view it will load the video behind the scenes; when the video is ready the image will fade out and the video will play. All of this is done so the page will load fast and the user doesn’t see any blank spaces while the videos load.

The grid uses React combined with the Isotope library for the masonry effect and allow elements to expand in-between the rows similar to Google Image search.

Custom video player and touch-friendly carousel

Created custom React component that uses Vimeo’s player.js library to add custom skinned controls to the embedded video complete with buffering, seeking, play/pause, and sound.

The user can navigate multiple videos through a touch-friendly, swipeable carousel with unique dot pagination for each category.

Flexible page builder

Using the WordPress Advanced Custom Fields Plugin the client can build unique page layouts by adding and re-arranging horizontal page components including video marquees, grids, columns, slideshows, WYSIWYG, and more.