This project is built using Vimeo's API so we can create a nice video playlist that allows you to set a custom start point in the video when a user clicks on the play button. Even better, the videos are being pulled in via the Webflow CMS. 

This is great if you want a clean and fully custom video player for tutorials or anything like that. It does use custom Javascript, so you may want to poke around until you have a solid understanding of how everything works. This is probably not the simplest project for new Webflow users, but if you're feeling confident, then definitely go for it (it's not really that intense 😁).

CMS Vimeo Playlist

With this crumb we can simply create what is commonly known as floating form labels. A UI effect that allows you to display form labels as placeholders initially and animate them to typical labels.

Simple Floating Form Labels | CodeCrumbs

*UPDATE: 02-16-2021 
Accordion now features a Scroll to Top animation when each Accordion is toggled. When the accordion is clicked/tapped it will scroll to the top of the page for easier reading. You can change the offset margin from the top of the page, the speed of the scroll and the delay speed for when it starts to scroll based on the length of the content. Happy designing! :wink:

Easy to implement JQuery accordion with nested accordions capability. Works with multiple accordions in different sections.

simple-jquery-accordion

Another cool Code Snippet from https://Codecrumbs.co (Code Snippets for your Webflow!)

This awesome snippet will allow you to create your own cool and custom buttons to increase or decrease the quantity amount for products before adding them to the cart.

Try it out and visit CodeCrumbs for more easy to use snippets!

Custom Product Quantity Buttons

Full site redesign for Balanced Healthcare. The old site design was poorly designed and not well thought out. It lacked character and presentation for the clients visitors especially given the field that the client is in. The old site structure as well was horrible and not built to scale and grow. 

You can see the before and after here: 
https://balanced-health-site.webflow.io/before-after

This new design is much more organized and vibrant to make its visitors feel welcomed along with establishing a sense of compassion and dedication on behalf of the provider. It was important to keep the UX light and simple which we feel is translated well through the UI. 

Hope you like it! 😉

balanced-health-site

The public Webflow profile where others view our work and a bit about us within Webflow has been neglected it seems for some time now. 

I feel our profiles are missing some really helpful features, like project tabs so we can organize and control what our visitors see ourselves. By control I mean have the opportunity to put our best foot forward and not just projects by date. 

I thought it would also be neat if we had a new way to present our best work like the "Featured Tab" within this project.

This was just my first take on something I have been thinking about for quite a while. You can change some things here like the profile theme color by selecting "Edit Profile" and then the droplet icon next to it. You can also click the blue "+" icon to open the modal to add projects to a new tab. 

Anyway, I hope you enjoy. I will continue to update this project over time. Thanks for checking it out! :) 

(Note: Not yet responsive. Coming soon!)

Webflow Profile Redesign

Fully built customizable page and form using Webflows powerful CMS in tandem with Zapier and Uploadcare to provide automated real-time reviews published right to your site from your customers. 

👍🏼Visit the link on the page to view and purchase the full version.

Star Rating Review Form

Website done for Dreamlife Beats music producer/beat maker. He is one of the top online selling producers out there today. 

We decided to go with a nice dark theme with vibrant accent colors to make elements pop. This project uses quite a few interactions including lottie files for extra movement and state interaction. 

The site also uses quite a few CMS collections including the blog so the client can easily edit their content and add new items when needed. A few great Jquery plugins contribute to the final outcome of the functionality of the site in whole for an even better user experience.

Dreamlife Music Producer Website

Simple clean project that enables Copy-to-Clipboard functionality with simple JQuery code. Project also has a tutorial to show you how easy it is to use and change values yourself with ease. 

A simple use case would be as you see here with a nice Coupon Card (maybe as a popup) to engage your visitors as they shop with a little incentive to convert sales.

Up to you to be creative :)

Copy to Clipboard (Simple w/ Tutorial)

New Accordion (Dark Version)!

Just like the previous "Perfect Accordion" clone project this one is just in a dark version with the new updates. A video tutorial is now included within the project below the Accordion section.  

Happy designing! 😉
-Noah

Perfect Accordion (Dark)

Here is a simple tutorial and demo showing you how to install, setup and use Tippy.js. A really awesome and simple vanilla javascript library for tooltips. 

Demo: Hover over the blue highlighted list items to see the tooltips!

You don't have to know code at all to implement this extremely easy option for tooltips. This option makes it really easy to have reliable tooltips that work great in any project!

The cool thing about this is Tippy.js's only dependency is Popper.js for the tooltip positioning! Which works great by the way. What this means is, if you have a tooltip on an element and that element is let's say sticking out of the page then the tooltip will recalculate it's position (using Popper) to be shown on another side or position! 

Anyhow, I hope you dig it and find it helpful! If you have any questions, feel free to leave a compliment BUT please read the tutorial first because I may have answered it!

Easy Tooltips - Tutorial (EASY!!!)

Website for Kew Dental Sleepcare. Specializing in Sleep Apnea treatment.

Kew Dental Website

Update 02-12-2020:
-Added color variable for list option (in dropdown) text color on hover
-Added color variable for selected option text color that displays in the field after it's selected

A cloneable project using the Nice-Select JQuery plugin to style and customize a <select> field in your Webflow project.

I made the customization process really easy. In the Navigator you will see a custom code element called "style-settings". Open that up and you will see the different options for Color and Spacing. Comments are used as well so you know which does what. Simply copy and paste in your own color and spacing values. 

Last, we need to initiate the the plugin by copying the simple script code that is located in the Page Settings > Custom Code > </body>. You can also add that code and the <style> code to your Sites Settings Custom Code (global) so it translates across your entire site for all forms that have a <select> input field.

Hope you dig it and of course I hope it helps!

Custom Select Fields

A cloneable project using the Nice-Select JQuery plugin to style and customize a <select> field in your Webflow project.

I made the customization process really easy. In the Navigator you will see a custom code element called "style-settings". Open that up and you will see the different options for Color and Spacing. Comments are used as well so you know which does what. Simply copy and paste in your own color and spacing values. 

Last, we need to initiate the the plugin by copying the simple script code that is located in the Page Settings > Custom Code > </body>. You can also add that code and the <style> code to your Sites Settings Custom Code (global) so it translates across your entire site for all forms that have a <select> input field.

Hope you dig it and of course I hope it helps!

Custom Select Field

A site I built for Springwoods Music Fest. This was a fun project for an event director hosting a really cool Music fest in the heart of Atlanta!

Springwoods Music Fest

Another unique button for you to clone for your project. Enjoy!

unique-button-3

This project is using the ScrollMagic API to pin elements while toggling animation classes for children elements or anything else. Scroll Magic is cable of much more but this is a small project I did to try it out. 

You can see the Info Card Section gets pinned to the top while the javascript adds a class (that I built with Webflow) for the scaling and drop shadow of the card that allows me to add that class based of triggers I made in the project using just div blocks with specific ID's as well as trigger hooks and the duration for which the class is applied for. 

Here are the links to read more info about ScrollMagic:
http://scrollmagic.io/
https://github.com/janpaepke/ScrollMagic

Scroll Magic

The workaround for using CMS collections with the native lightbox in Webflow can be extremely daunting for users who don't know code. Plus the setup is really long for something that can essentially be done very easily with the right tools.

Well in this project we are looking at Magnific Popup. A JQuery plugin to make using lightbox extremely easy. It requires hardly any custom code to get what you want. And the best part about it is you don't have to sacrifice any design features in Webflow. 

AWESOME! Check out the walk-through at the bottom if the page to get started using Magnific Popup with Dynamic Collections in your Webflow Project.

Noah Raskin