Web Animations

I've got a knack for visualizing how a static design can be animated. Below are static designs that I've brought to life with my animation vision and coding skills.

SVG Icon Animations

At Cornerstone, our marketing website needed to feel more alive, personable, and less stock-photo-y. To address this, the designers wanted custom SVG icons to be animated as the user scrolled over them. I was given the static design and I designed the animation and coded it.

scroll to animate
scroll to animate
scroll to animate

Cornerstone Conference Logo

I love Cornerstone's 2016 conference logo. Its vibrant rainbow colors inspired me to see if I could animate it in an eye-catching way. We added the animation as a hover effect for the logo on the conference website.

Here is the animation in action on the website:

Cornerstone Product Wheel

Our design team created a "product wheel" to illustrate how our products fit together and cover the employee lifecycle (hiring, learning, performance review, etc). I was given a static design and I crafted this animation for the Cornerstone home page.

Founder's Timeline

Cornerstone's CEO wanted a fun and lively webpage describing the company's journey from startup to IPO. Our creative director handed me a static Photoshop file and I ran with it. I designed and coded the animations using ScrollMagic and GreenSock.

Here's a quick screencast of a user scrolling through the page (for this demo, I refactored the page to remove company-specific information and added some fun fake companies).

click to play