A Webflow cloneable project that both demonstrates and provides instructions for some JavaScript code and CSS that allows editors of Webflow Richt Text elements to put their images into rows specified by the marker text [row] in the images caption.

Image Rows in Rich Text Elements

This is very much a work in progress "in-Webflow-app" to leverage Webflow background videos to host videos and then uses JavaScript on the live page to copy the video's source URL to be used however you choose. This is especially handy for projects where you may need to use many background videos in embeds while linking to them via text fields in the CMS.

Currently, this project lacks 1/2 of the instructions and only copies the .mp4 video (Webflow also creates a .webm.)

5/24/23 - I may update this... I may not.

Video Storage (WIP)

A recreation + modification of a very shiny button originally shared by @alexwidua on Twitter. The javascript for this demo features some rudimentary error handling (blocked, allowed, no camera) and a success state for the request button it also stops the video stream when the tab is not active. ✨

Shiny Buttan

WebflowPNW AI Presentation

A quick proof of concept for styling images and captions within Rich Text Elements and a bonus proof of concept for toggling those stylings via component visibility properties + CMS field toggles.

Styling RTE Images and Captions + CMS Code/Component Toggles

When the native Webflow tab component switches between tab content (often images) it's rough on the eyes as it uses display:none to hide content not associated with the current tab. This cloneable uses a small bit of custom CSS to override the default tab transition making it silky smooooooth.

Smooth Tab Content Crossfade

Put this together once. It's not 100% polished from an animation standpoint but is accessible and functional. Have fun!

Tab Link-ception

Count the items in a CMS list and append their current position/order to a child element inside of them.

This demo uses a collection named Alphabet to list the ABC's and sorts them alphabetically. The JavaScript adds the position to their container.

This is handy for showing the number of items in a collection list. CMS sliders, case studies, etc.

Rolling CMS Item Count

Flow Maestro is a Webflow exclusive development service that delivers expertly crafted, full-function, pixel-perfect Webflow websites. 🤙

Flow Maestro

A fun demonstration where Javascript is used to add a class to an element when an element is "stuck" using position sticky.

Sticky is Stuck

Custom CSS to target only the "Current" link with Webflow's .w--current class. This changes the color on hover from the original (green) to an alternate color (purple) while leaving the other links unaffected.

This also uses Webflow IX to show an underline element on the hover of the links. Without the custom code the "Current" page link, on hover, would stay green.

Current Link Hover

A quick demonstration of how to "clip" a background video to text using the "screen" blending mode.

I've also attached a basic demonstration using an image with transparency to cover part of a background video.

*This isn't without limitations.