A blog about my web experiments
December 23, 2017
A masonry layout created with pure css.
Artwork Credits: Nina Geometrieva, Mohamed Chahin, Creative Mints, Wiktor Półtorak, Steve Wolf, Alucard, Vic Bell, Sergey Pikin, Cameron Mark Art, Winnie, Julien, Pablo Vargas, Mantas, Thunder Rockets, Michael Flarup, Creature Box.
December 17, 2017
November 6, 2017
This is a recreation of Twitter’s Like Button animation. The entire animation lives on a single sprite sheet. The animation consists of 29 different images with only 1 image shown to the user at a time. When the user clicks on the heart, the background image quickly steps through the sprite sheet to reveal the animation. I also created a custom button using CSS. The button animates when the user clicks on it.See Full Project
November 3, 2017
Learned a neat trick from Tobias Ahlin for animating box-shadows. The technique allows us to animate shadows while maintaining optimal performance. Instead of animating the box-shadowing expanding, we animate a pre-scaled shadow's opacity. This creates the illustion that the shadow is scaling larger while keeping our animation frame rate high.See Full Project
October 24, 2017
This is a recreation of an element on Sketch's website. A toggle switch that controls advanced CSS transitions. Many elements animate with their own timing and animation curve. Continuous floating animation. When the toggle is turned off, elements intelligently reverse animate to their starting point.See Full Project
October 18, 2017
October 15, 2017
Using CSS transitions to animate the background and logo. The colors are sourced from Google's logo and transition to each color on an infinite loop.See Full Project
September 15, 2017
A language selector created using a checkbox, label and css. The aesthetics heavily borrows from Stripe. The checkbox is hidden and when the label is clicked, more languages animate into view. Clicking the label again reverses the animation and hides the languages.See Full Project
August 16, 2017
I recreated the Google homepage and added the ability for it to be responsive. This means the site intelligently adapts to different screen sizes. The user interface rearranges itself for optimal desktop and mobile experience. For example, when viewing on a small screen, the search bar reveals a search button but hides itself on a large display.
Best viewed in landscape