a fluid interface for playing short audio samples, with custom audio player controls from AmplitudeJS which handles the play/pause functionality and the progress bar for each song.  The 3d transforms are done with webflow interactions, and the background animation is an embedded scene built with Spline tool.  The audio files are hosted on google drive for now becuase im cheap so some browsers occasionally will not load them, chrome works best for now.  Hosting the files on my own server would solve this issue.  I need to finalize a few more things like turning the play icon into a pause icon on click but making this cloneable for now it case it helps someone else

Custom Audio Player

same principle as my last experiment, only this time encoding video frames into the Lottie file instead of vector paths! the resolution and layout is optimized for mobile right now (check it out on a mobile device!) but i still tried to make it work for desktop

3D transitions on scroll (pre-rendered)

Testing out the aftereffects/lottie pipeline for webflow! The entire animation is one aftereffects sequence rendered as JSON using the bodymovin plugin.  Im using a scroll-driven interaction timeline in webflow to scrub through the svg animation and toggle the text on/off for each section as the user scrolls through the page

simple SVG sequence on scroll

This was my first project with webflow. i took an old print advertisement for the pinto and made a one-page marketing site focusing on the transitions i could achieve with webflow.  check out the mobile version for a different hero!

Ford Pinto Marketing Site

testing out some subtle interactions for a project case study on my portfolio site

Parallax case study layout template

playing around with a project menu driven by the cursor position, with some lottie animations for fun!

Chris Withers