ui animations

When visiting a new website, the first things that catch my eye are the small details. These days, websites come at a dime a dozen, so seeing those tiny details, whether it be a loading icon or menu animation, can be a breath of fresh air. I've become fascinated with all of these UI elements that often go under appreciated. The graphics below showcase some of my favorite UI creations. I'm constantly learning new things, so check back often to see what I've been working on!

"Liquid Ball" is a UI Loading animation created with Adobe After Effects. By giving the non-moving circles a "blur" and "choke" effect, I can simulate the look of plasma passing through solids.

"Liquid Ball" is a UI Loading animation created with Adobe After Effects. By giving the non-moving circles a "blur" and "choke" effect, I can simulate the look of plasma passing through solids.

"Liquid Social Menu" is a sharable UI menu for social media that utilizes the liquid effect described in the previous animation. I used Adobe After Effects and Adobe Illustrator to achieve this "pressable" button effect.

"Liquid Social Menu" is a sharable UI menu for social media that utilizes the liquid effect described in the previous animation. I used Adobe After Effects and Adobe Illustrator to achieve this "pressable" button effect.

"Paint Bucket" This was an animation created from a friend's paint bucket graphic. Using Adobe Illustrator, I created several keyframes that were imported into Adobe After Effects to then create the illusion of a moving paint droplet. 

"Paint Bucket" This was an animation created from a friend's paint bucket graphic. Using Adobe Illustrator, I created several keyframes that were imported into Adobe After Effects to then create the illusion of a moving paint droplet. 

"Ball Rotate" is a UI loading animation, also created with Adobe After Effects. The balls rotate counter-clockwise, giving the illusion that they are getting closer and then far apart from each other. This animation would be used for a slowly, loading website to keep the user entranced.

"Ball Rotate" is a UI loading animation, also created with Adobe After Effects. The balls rotate counter-clockwise, giving the illusion that they are getting closer and then far apart from each other. This animation would be used for a slowly, loading website to keep the user entranced.

"Bubble Loader" is a CMYK-based UI Loader created with Adobe Illustrator and Adobe After Effects. The animation loops endlessly as it turns from Cyan to Magenta, Yellow, and Black.

"Bubble Loader" is a CMYK-based UI Loader created with Adobe Illustrator and Adobe After Effects. The animation loops endlessly as it turns from Cyan to Magenta, Yellow, and Black.

"Cell Divide" is another fluid animation created with After Effects. By giving the two spheres a choke effect, I can create the appearance of two body cells splitting apart and joining back together. This could be used as a UI Loader or a stand-alone animation.

"Cell Divide" is another fluid animation created with After Effects. By giving the two spheres a choke effect, I can create the appearance of two body cells splitting apart and joining back together. This could be used as a UI Loader or a stand-alone animation.

"Paper Fold" is a CMYK-inspired animation generated from many keyframes created in Adobe Illustrator, and imported into Adobe After Effects. The animation shows the illusion of Cyan, Magenta, Yellow and Black folding over each other in an endless loop.

"Paper Fold" is a CMYK-inspired animation generated from many keyframes created in Adobe Illustrator, and imported into Adobe After Effects. The animation shows the illusion of Cyan, Magenta, Yellow and Black folding over each other in an endless loop.