Noah Raskin

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

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

Smooth and perfect accordion using Javascript (jQuery) plus a thorough video tutorial (new one coming soon!) on how to customize it and copy it into your own existing project!

---------------------

*UPDATED: 03-15-2022
The entire code was redone and now made much simpler for you.  New settings object that allows you to change all the classes, set functional options like anchoring & scroll-to-top for active items, animation speed and more within one place. You don't have to touch any of the "codey" stuff.

You can also use your own icon for the accordion now as well instead of controlling that with CSS like before. Hope you enjoy it!

---------------------

Happy designing! 😉
-Noah

Perfect Accordion

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

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

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!!!)

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

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)

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

*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

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

102976941

1038319252

gpt-4.1-nano

1070795817

1122423150

112746687

Get direct access to benefits like unlimited staging sites and more control over roles & permissions

Unlock more for your business with the

1186914386

1274323923

1316201488

1316201489

140432223

1462086697

1506258256

1567550242

1592612642

1631162196

1726628865

1733785607

173927913

1771795565

1863160016

1905118106

1975670756

2025032126

2030598753

Outliant

Hireclix

Refokus

Kinetic

Heco

2032141491

2144870841

2213518682

2216482092

2339906037

2351366352

2355632600

https://s3.amazonaws.com/webflow-dev-assets/66fd83b6cc0c8c6ed0e398e6%2Fcontent.json

2401116685

2486364096

gpt-4o

gpt-4.1

gpt-4o-mini

2546957535

2789269995

285302288

2857348505

2903381045

User Accounts will no longer be available on January 29, 2026.

Visit Webflow’s Help Center for migration guidance and more info.

3022611874

3023147062

3026881092

3070246498

307653616

3106924665

3108168977

3112069432

3120801339

3125710258

3151661775

3201643127

3243842104

3258716925

3266482432

3289310561

3313039722

3315729993

3387258362

3410497685

3452464914

3458155273

gpt-4.1-mini

3590523401

3591394191

3669004489

3672367630

3737116140

3801251705

3844506029

3879263312

Learn best practices for collaborating with clients in Webflow.

Sell your apps on the Webflow Marketplace.

Learn about structuring seats, roles, and permissions in your Workspace

Partner with Webflow to build your business alongside 2M+ creators and developers

Request access for your team to collaborate in a client’s Workspace.

Charge your client for a Site plan directly in Webflow.

Earn more by selling templates on the Marketplace.

Start building your site with AI, a prebuilt template, or from scratch.

Add your team members to start collaborating on sites.

Watch a quick intro to what you can build in Webflow.

3913199261

3934148661

3941255684

3951600357

3956476210

3960693283

3972857978

4063605209

4092855684

4103643638

4144203485

4178901499

4195171643

4206156914

451433404

489463363

504462606

536101258

540515386

612788821

622649767

622649768

657188092

660615456

665836192

737109165

772001133

817414265

846847440

879597835

882147072

911514507

938734410

968427424

1013057706

1045828939

104959118

1049811722

1087856901

1088396327

1093574045

1106275794

1108325183

1120744071

1131151533

1140906369

1147278396

1157311889

1157563538

1178238107

1178621510

1193740135

1197475705

1216878544

1227154495

1229056119

1234765101

1236803103

1238404733

1250328847

1252912346

1259889605

127854470

1291427916

1292405251

1297066426

130043074

1305700750

1306352991

1312703771

1314262047