CSS Animation

More of a work-in-progress than anything else, but have been experimenting with taking illustrations and creating hero banners out them using the SVG assets and CSS. I had previously done something relatively similar by importing the illustrations into After Effects and animating them (Like Here! and here!), however I thought it might be even more effective (reduce load times) to manually create simple animations with CSS.

I think the initial result has been pretty successful and I wanted to share.

It might work nicely as the illustration banner and am thinking about adding it into the main site once get a new template file produced for it. I’m also still working through how it should look on light theme, but since the majority of the work is already done it’s mostly adjusting colors, converting them to variables. I have run into some issues on tablet/mobile devices and may have to consider disabling it on those.

For anyone that wants to take a look at what’s there so far:

You can also view the project standalone here in a white palette.

2/21 Update: I ended up adding this to the illustrations page as well!