Projects/ Jolie & Co. Animated Logo

I was contracted to animate the logo of Jolie & Co, a Denver based wedding stationery company and integrate it into their existing website cover page on Squarespace.

Technical Summary

An SVG approach was attempted, but I made the decision to move to an animated GIF because consistency across platforms, scaling, and screen sizes was guaranteed.
The draw on effect was achieved by animating the stroke offset of the paths within Adobe After Effects.
Any color from the stroke was a mask that would make the underlining logo calligraphy visible.
Once finished, the composition was exported as a GIF that would not loop.

Pictured: The draw on effect consisting of multiple paths with their strokes and offsets animated within the Adobe After Effects workspace.

Squarespace Integration

Adding the animated logo to their cover page was as simple as including the final GIF in the flow as a vertically and horizontally centered image. The client wanted the logo to be bigger, however Squarespace's editor uses a slider to control the size of the image and it was already set to the maximum size. I got around this by using Chrome Developer Tools on the Squarespace editor and manually changing the value and maximum value of the size slider to an integer beyond what was originally intended. To my surprise this was effective and the unorthodox changes were reflected on the public site. There were no issues with styling or fixes on Squarespace's end for as long as this cover page was in service.

Demo

UPDATE: As of July 10, 2020 the cover page with the animated logo is no longer in use by the company.