Sawdust Art Festival

Landing pages for the 53rd annual arts and crafts festival in Laguna Beach, California.

Project

Sawdust is an iconic art festival in Laguna Beach that runs since 1965 and features the work of hundreds of local artists. The team at Rareview was tasked to increase awareness and revenue for the festival.

My Role

I was brought to the project to help choose right tools and build landing pages for ad campaigns. Two main constraints were a tight deadline (3-4 weeks), and the fact that data for landing pages was not structured well.

Placeholder

Stack

After considering different options like WordPress, Hugo, and a few others, I chose to use Gatsby for several reasons:

Easy to use with multiple sources of content. We used a combination of JSON, Markdown, CSV files, and Instagram feed to structure everything. This was ideal because the client already had the info about all artists in a Spreadsheet. All we had to do is clean it up a bit and feed to Gatsby using a source plugin.

Fast to get up and running. Gatsby has a solid starter theme that comes with build tools. I spent minimum to no time on setting the project up. With the tight deadline that was critical.

Worry-free hosting. Gatsby generates static assets. This means it's very unlikely that the site will crash under heavy traffic. It's also secure, because there is no backend to hack.

Placeholder

Animation

For reveal animations I used Intersection Observer API in combination with Pose animation library. I didn't want to overdo the animations so I only animate items once they appear on the screen. In case of this project, animations bring the site to live and add an unexpected 'wow' effect that aligns with the overall creative campaign.

Challenges

I struggled the most with the blades animation at the top of the page. It uses two images with clipping masks laid on top of each other.

The problem I faced was that no matter what I did clipping masks refused to scale proportionally depending on the size of the viewport.

As it turned out, you can't just grab an SVG and use it as a clipping mask (obviously, it's never that easy). The solution was in using clipPathUnits attribute of a clipPath tag and making sure all path points use relative coordinates.

The Result

We were able to launch the pages after a few weeks of work. At the end we had a semantic, fast (I'm talking all-100%-lighthouse-fast) set of pages that performed very well and helped bring new faces to the festival.

View live website
Read Rareview case study

Up Next

There's more, check out th rest of the projects.

Let's talk

I'm always looking for interesting and challenging projects. Get in touch.