These are some of the user interface elements I designed and developed for my current job at Cornerstone. In most cases, I was given a static visual design with no direction and left to create the animations and interactions using my best judgement.
I designed and coded this button, but it was inspired by this @keyframers codepen/episode. I decided to deviate from the approach used in the @keyframers codepen, and instead, animate CSS clip-path to create the aperture effect.
I coded this navigation, and designed and coded the product sub-navigation animation. Additionally, I used a redux-like pattern for managing the state of the menu in javascript. (note: you'll have to view the below Codepen at 0.5x to see the navigation)
I designed the animations for this banner and figured out a way to make the background layers out of a single repeating image. This allowed me more flexibility in animating the background.
Conference speaker bios tend to vary widely in length, and almost always exceed the area provided for them in any design. On Cornerstone's conference website, we needed to to crop the text, while still allowing users to easily access speaker's full bios.
Two obvious options were:
In each approach, the user's eye would be distracted by a lot of movement on the screen, and, in the second case, the user wouldn't be able to continue reading where he or she left off.
I devised the solution below, which reveals the hidden text using overflow:hidden.
For the reboot of one of our products, I was tasked with creating a multi-pane form for account creation. The idea was to make the form engaging and user-friendly, and to try to encourage form completion by breaking the 10+ field form into bite-size chunks.
The original design called for putting the form labels in the text field. I initiated a conversation with the designer and convinced him to move the form labels above the input boxes to improve usability. I also included a fun shake effect, borrowed from Mac OS's login field, to play the user enters invalid information.
I created this slider to display some of Cornerstone's featured clients and to play a video of each client's story. I used an SVG filter to achieve the grayed-out logos, which ensured broad browser compatibility, and also made it so our content admins would only need to upload a single image. Here I've replaced the client quotes and videos with more fun material.
I've coded a few video play buttons in my time, and one night I had a dream about a play button that morphed into the video. I created a couple versions of my concept below.
Pure CSS proof-of-concept, animating the border property (unfortunately, it's a little buggy on Safari).
SVG version, which uses Greensock web animation library to morph the play button triangle into a rectangle where the video will play.