Primary

Primary SVG animations

There were so many SVG illustrations on the Primary website just begging to be animated, so I taught myself CSS animation to bring the illustrations to life.

Here are some examples of illustrations that I’ve animated with CSS for the Primary website. I was responsible for concepting and animating these illustrations, which were done by the Primary brand team.

I love using CodePen to prototype CSS animation for two main reasons: it’s super easy to see changes on the fly and I can easily send the work-in-progress animation to others for feedback. In most cases, the animation and CSS I wrote for the CodePen prototype ended up being close to what we shipped.

404 error page animation

Screenshot of the Primary 404 page, showing a haiku and a floating tooth fairy

A still of the Primary 404 page.

See the Pen 404 hovering tooth fairy by Jessica Harllee (@harllee) on CodePen.

A prototype of the tooth fairy hovering.

500 error page animation

Screenshot of the Primary 500 page, showing a haiku and a slowly swinging sloth.

A still of the Primary 500 page.

See the Pen 500 hanging sloth by Jessica Harllee (@harllee) on CodePen.

A prototype of the sloth swinging.

Earth week homepage hero

Screenshot of the Primary homepage hero, showing a spinning illustration of Earth.

A still of Primary's homepage during Earth Week.

See the Pen primary earth day by Jessica Harllee (@harllee) on CodePen.

A prototype of the Earth rotating and other animations. The hero had a fixed height so you could only see the top half of the animation, with the rest of the animation cropped.


Project details

Role

CSS animation concepting and development

View live

Primary

Jessica Harllee is a Principal Product Designer at Primary in Brooklyn, an avid crafter, and an amateur writer.