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.


Scroll Flower [beta]

I took a scrolling animation technique developed by Apple and used it to create a daffodil that blossoms as you scroll. [beta: the loading experience is rough and takes 20s on my connection, and it's only marginally responsive]


Cornerstone AI Banner

I created a particle wave animation using Three.js and implemented a new way of creating a Cornerstone-branded gradient across the particles. Additionally, I created a floating animation for the people bubbles that fit well with the motion of the particle wave.


Cornerstone Alchemy Concept

I was impressed with a CoDrops article titled "Ambient Canvas Backgrounds" and I thought I'd tweak it to see what it'd be like for the company I work for, Cornerstone Ondemand. Basically, I just figured out how to draw a trapezoid that is similar in shape to Cornerstone's logo, and then changed the colors of the "particles/trapezoids" to match Cornerstone's brand colors.


Shy Hedgehog

My friends have an online pen shop, and I created an animation for their hedgehog mascot.

hover the hedgehog!

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