Client
The Sawdust Art Festival, or simply The Sawdust is an iconic art festival in Laguna Beach that runs since 1965 and features the work of hundreds of local artists. The festival displays paintings, sculpture, printmaking, photography, glass, ceramics, jewelry, woodwork, furniture, textiles, clothing, and mixed media.
Project
In 2019 the team at Rareview was tasked to increase awareness and revenue for the festival. This included building a set of landing pages for ad campaigns.
My Role
I was brought to the project to help choose the right tools and build those landing pages. Two main constraints were a tight deadline (3-4 weeks), and the fact that data for landing pages was not structured well.
Approach
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 data. 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 almost no time on setting up the project. 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.
Animation
For reveal animations, I used Intersection Observer API in combination with the Pose animation library. I didn't want to overdo the animations, so I only animated items once they appear on the screen.
In the 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.
Result
We were able to launch the pages after a few weeks of work. In 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.
Festival landing pages also won several awards, including Special Kudos, Innovation, UI, and UX awards by CSS Desing Awards and was featured on CSSWinner and One Page Love Websites.
