Web Animation

Miscellaneous experiments from past projects.

1. Scroll-Driven Coffee Animations

A side project I created, Ultra Basic Coffee, includes several different scroll-driven animations that were built with Framer Motion, the Intersection Observer API, and a whole bunch of whimsical coffee illustrations.

You can check out some selected animations from the website below, or read the case study.

I thought it might be a bit silly and fun to have the plunger of this Aeropress move up and down based off of scroll direction.

For the Kalita Wave section, I applied a skew transform to the header (which remains selectable / screen-reader accessible text).

The French Press features a scroll-driven animation that affects both the French Press plunger and the text itself.

2. Randomized Air Bubbles

For a marketing website for A Modern Eden, I created a CSS-only animation using a SCSS @for loop and the SCSS Random() function.

You can read the full case study for more information or experiment with this animation on Codepen

3. Skyline Animation with Cellular Automata

For a personal website for a Chicago-based software engineer (my brother), I created a Greensock animation that uses a pre-seeded series of rules from Conway's Game of Life to light up a Chicago skyscraper.

I am somewhat embarassed by this illustration by now, but I'll always be fascinated by how cellular automata such as Game of Life and similar mathematical concepts can be incorporated into art and design.

See the Pen Chicago/Game of Life Experiment 1c by Dakota Sexton (@tinykite) on CodePen.