Got inspired to recreate how water molecules behave in a wave. Science + Webflow = Fun!

Use the buttons to change the look of the particles. The order you click the buttons will also affect the look.

Inspiration Source:
"Water waves are an example of waves that involve a combination of both longitudinal and transverse motions. As a wave travels through the waver, the particles travel in clockwise circles. The radius of the circles decreases as the depth into the water increases. The animation at right shows a water wave travelling from left to right in a region where the depth of the water is greater than the wavelength of the waves. I have identified two particles in orange to show that each particle indeed travels in a clockwise circle as the wave passes." Daniel A. Russell, Graduate Program in Acoustics, The Pennsylvania State University

https://www.acs.psu.edu/drussell/Demos/waves/wavemotion.html

Water Waves Simulation

My portfolio website. I have two goals with it: 1) to showcase my work (of course!) and 2) to combine code + art in ways that bring the latter to life. Experimenting with a lot of parallaxing and subtle animations / interactions!

Illustration by Alice Lee

Digital product experiment for desktop and mobile using tabs as an inventory sorting system. Thanks for looking!

Disys

I like to take challenges aka "can I build it in Webflow?", I like to push boundaries of "possible".

SPHERE shaped 3D object build in Webflow. You are welcome to open the project and see how it made. 🌐

Also, check pages http://sphere-with-circules.webflow.io/circles and http://sphere-with-circules.webflow.io/circles-2 to see some advanced animations (the best experience in the Firefox browser).

Animated Sphere with Circles

Animated Triangle 😅 made of triangles, based on grid. To see the animation hover over the big triangle

Animated Triangle based on grid

smiley-grid

Experimental fan art using divs and svgs with mouse movement and scroll interactions. Great on desktop but too heavy for mobile... Thanks for looking!

Sky Box

In this episode of What In Webflow 014, we walk-through how to create a reactive text effect in Webflow: https://youtu.be/8-9rX4PjnXM

To walk-through this tutorial with me, make sure you use the cloneable project at https://webflow.com/website/Reactive-Type-Effect

Also, you can find a more comprehensive tutorial at https://www.superhi.com/video/how-to-make-reactive-type-as-seen-on-the-airbnb-cereal-site

Hopefully, this was helpful. Feel free to let me know if this is helpful, or if you have any additional questions.

I'm happy to help further!

Reactive Type Effect

Inspired by Nasa's amazing Visions of the Future poster series... Made with Interactions 2 and 3D Transforms. Thanks for looking! :-)

Cloud 9 Observatory

The start of a collection of looping movie opening credits re-created with Interactions 2 and text blocks. Each re-creation is built in a single animation timeline. Some fonts are approximate! :-)

Movie Opening Credits

Happy new year! This project was created to demo some 3D isometric interactions using transforms and IX2. Made simply from div blocks... Thanks for looking! :-)

Isometric 3D Office

A collection of useful animations made on wedflow.

Check out Webflow Samples 2: http://wfs2.webflow.io/

webflow-samples

Perhaps this could be a series but I am lazy.

Language Selectors

Declaration of Principles Concerning Activities Following the Detection of Extraterrestrial Intelligence.

Post Detection Protocol

Heco is the Chicago-based studio of JT Helms and Matt Cowen. We make better user experiences and more interesting brands, and try to find inner peace.

Alex Dram

About

About

About