Responsive Web Design Grid
A template of web design grid to help you design better.
.png)
Live search Anywhere with 'hideseek.js'
Embed a live search bar to search in any div container.
.png)
Changing Text
Change text in a sentence/headline with Webflow's interactions
.png)
Thick Underline
An editable thick underline for your Headlines
.png)
Email Validation (Non-free / Work)
Excluding 100 of the most popular free email domains from using it in a Webflow form with JavaScript.
.png)
Brand ID Questionnaire
Questionnaire for better understanding brand ID
Animations with Lottie
Clonable animations with lottie .json files.
Chart.js in Webflow
A short tutorial on how to implement a Chart.js plugin in a Webflow project
ToDo List
A todo list, created with JavaScript collected through the internet... ;)
.png)
Cursor Blend
A few short lines of code, to replace the pointer with an interactive color element.
Contact form as a Chat widget
A contact form disguised as a chat widget.
%2520(1).png)
Hover to reveal Mask
A fixed background image that is revealed by mouse hover all over the section
.png)
Desktop Grid, Mobile Slider
Change Webflow's Slider to act as a "regular" grid block on desktop, but go back to Slider on Tablet and smaller screens.
.png)
Custom Slider
A small upgrade to the normal behaviour of the Webflow Slider Widget.
.jpeg)
Swapping Text on Scroll
Swapping a sticky element on sections scroll.
Auto get Current Year
Automatically insert the current year to any element with the class of 'year'
).png)
Background Video with Audio (using plyr.js)
An embed video with Mute/UnMute button using plyr.js plugin.
).png)
Pass Parameters
Pass input fields parameters and add them to the destination URL.
.png)
Before / After effect
A Before / After effect for photos, without any code. Only Webflow's interaction.
.png)
Tabs with scrollable (sideways) Menu
A Webflow Tabs widget with some edits and custom code to make the menu scrollable on desktop & mobile
.png)
Auto Change Tabs 2.0
A new and improved version for a Tabs element that automatically change tabs
.png)
Sliding Tabs Menu
A sliding background element placed behind the tabs menu. No custom code, only IX.2
Round Scroll Indicator / Progress Bar
A round scroll indicator mad with Webflow elements and interactions
.png)
OS Detection with JavaScript
Short JavaScript code that detects which OS system the user is running and display div accordingly.
Scroll & Focus
Scroll down and focus on an input field when a button is clicked
.png)
CMS Autocomplete
A short JavaScript code for transferring a CMS list into an autocomplete on an input field.
Scroll Menu to Current Link
Using JS to scroll a div (menu) to the current link inside.
).png)
Floating Labels Interaction
A short CSS code for floating labels on a form
.png)
Symbol in RichText
Insert a symbol element into a RichText. On a static or dynamic page.
.png)
Modal Lottie Transition
A full screen close/open animation with lottie
.png){kind=spacer}