Let's recreate the oscillating dot grid effect as seen on the landing page for OpenAI ChatGPT iOS App. We'll use nested while loops and take you back to ninth grade geometry class with the cosine function for this build!

Tutorial: https://youtu.be/F9__TdmElf4

OpenAI Rebuild: Oscillating Dot Wave

This magical wand wiping interaction as seen on diagram.com offers some great learning opportunities in building a beautiful "mouse move over element" interaction in Webflow. The whole Website is a master class in Webflow interactions I'm hoping to do a few lessons on!

Tutorial: https://youtu.be/JmjpDpxbYWc

Diagram.com Wand Wipe Interaction

Let's explore the mouse interaction seen in the footer of magnetism.fr! It's a fun and simple physics simulation involving the forces of gravity and gravitational attraction between the red circle and the user's mouse position anytime the mouse is moved. I think adding physics to your web pages can bring a lot of fun and joy to a website and p5.js combined with Webflow makes that pretty easy!

Tutorial: https://youtu.be/FoQTelOo4nA

Gravity Mouse

In this p5 sketch + tutorial we will look at how to iterate over pixels of a png image, extract color data, and apply it to a grid of pixels. Once we've mapped out and rendered our image as a particle system, we can apply some really create effects like a mouse repulsion force!

Picture to Particles

Let's learn how to create a simple particle network in p5.js. To add visual interest, we will include code that attracts (accelerates) particles to the user's mouse position if it is within a specified range.

Tutorial: https://youtu.be/vrSoUUWjgRQ

Interactive Particles

Let's explore a trippy visual by having a ring of rings (Lokai Bracelet ?) respond to our mouse position. P5.js makes it easy to create unique and eye-catching interactions quickly!

Tutorial: https://youtu.be/tUY5MV3awM4

Kaleidoscope Rings

In this lesson we will have a look at the coding concept of recursion - a function that calls itself, to generate images that look like famous artwork by Piet Mondrian using p5.js. Recursion is notorious for being a difficult concept for new coders to master, and I think that having a visual representation can go a long way in helping wrap your head around how it works. Mondrian's beautiful art is a perfect example to explore the concept!

-- Refresh the page to see a new design!

Generative Mondrain Masterpiece

Wandering dots is my recreation of a neat hero effect seen on https://finiam.com/ by Onda Studio. It's a great intro to introducing randomness to animations, linear interpolation function (lerp), and dealing with speed in p5.js. It's also a simple implementation of scroll and mouse click behavior in p5!

Wandering Dots

Let's rebuild the trailing grid mouse follow effect as seen on https://thisisdash.com/ with p5.js. Learning how to make this delightful animation can teach you a lot about Javascript and inspire other effects to help you build eye catching websites!

Tutorial: https://youtu.be/bI6v2DgpZwM

Award Winning Grid Trail Mouse Follow Effect

p5.js is a cool javascript library for creative coding - so many possibilities. This cloneable serves as a basic setup to drop in your p5 sketch canvas element and make it responsive in Webflow. Check the youtube for tutorials!

Responsive p5.js Canvas

In this lesson we'll take a look at the new features announce for CMS Collections (nesting in folders, duplicate collections, and unpublish template pages) and show how to build out a breadcrumbs features with it all.

collection-pages-folders-breadcrumbs

In this video we'll explore a cool vertical marquee text effect as seen on the website of PeakSpan Capital. We'll look at how a beginner might go about building this at first go and then have a look to see if we can make some improvements. By utilizing EM and % units, we'll find that we can make the design more responsive across breakpoints and flexible to design changes. We'll also explore an accessibility concern with multiple h1 elements on the page.

vertical-marquee-text

The running animation code for this one works better and is cleaner in my opinion

Marginally Better Animated Mario Run

Had fun animating Mario from Nelson's stream using ChatGPT. Here's the live stream: https://www.youtube.com/live/-L8-GsTRW18?feature=share

Animated Mario Run from Livestream

Here's how I implement custom cursors in Webflow - a little custom CSS here goes a long way in making the cursor feel more integrated.

Tutorial: https://youtu.be/lRKdb5yDh-k

Custom Cursors Explained!

Quick video to try and help some students make their lives a little bit easier! I commonly see beginners use the rotation transform instead of skew - I think because we forget that SKEW exists and also we get scared of position: absolute. Anyways, here's an easy way to do simple diagonal sections in Webflow.

Tutorial: https://youtu.be/Pp6IhW0tXeQ

diagonals

In this video we will take a quick look at how you can use Finsweet's CMS Filter Show Query Option to link to active filter states.

Tutorial: https://youtu.be/Lhsd0TNJPZk

Link to Active Filter State using CMS Filter Show Query Option

Award winning interaction as seen on https://www.torebentsen.com/
Tutorial: https://youtu.be/vjpHYteOaMw

Web Bae

About

Skills

About

About