Discover Webflow cloneables
The best Webflow cloneables for your Webflow sites. Find what you're looking for faster with instant search.
A great way of adding a date/calendar picker to forms or other elements within Webflow. Provides the essentials to get it added in 30 seconds and easily configurable based on your own style. Inherits the <body> typography. Please note that the date picker does require custom code found within the Page Settings. This utilizes Datepicker.js to create the date picker and the styling allows you to further customize the styling.
Dark mode toggle for Webflow driven by a cookie so that it remembers your users settings on whether or not they want dark mode or light mode on your next visit.
A frequently asked questions FAQ expanding accordion interaction for Webflow. The interaction expands and then collapses the accordion based on each click.
Here's a 3D parallax style card interaction/animation for Webflow. With this effect a card rotates on mouse move, and the image inside the card rotates 360 degrees that gives the effect that hte card is moving. A caption also appears on the bottom section when hovering on the card. The card is in a 3D wrapper with a child perspective applied to give it a 3D effect as it moves.
A unique input label animation for Webflow. When a user selects an input the label moves letter by letter above the input field. A unique way of adding animation to what would typically be a static input label. This uses some custom code to animate the labels and CSS to style the valid inputs.
This technique allows you to redirect a user to a URL of your choosing after submitting a form on Webflow.
A fun way of adding detailed information for your CMS items via a jQuery powered sidebar. The project uses a single CMS collection list to populate both the grid and the information when clicking on the card.
Here's a way to add smooth scrolling to your Webflow site using tween max. There are several ways to achieve smooth scrolling in Webflow, and this is another way of achieving that effect.
A wonderful style guide created by Flow Ninja. Jump start your Webflow build with this pre-built style guide. Includes a figma file, font styles, headings, block quotes, unordered lists, ordered lists, rich text elements, buttons, colors, inputs, containers, sections, paddings/sizing, margins, text alignment, flex and much more. This is a well organized styleguide featuring screenshots of the relevant sections if affects in Webflow. An excellent starting platform to build your own styleguide or use Flow Ninja's default styles.
Add a click to text functionality to your Webflow site. Using this functionality when someone clicks on this link it'll open their default text messaging app to send a message via text message. Please note that this uses an HTML text link embed in order to function properly.
A light themed, pop up email opt in modal for Webflow. A great way of adding an interactive, opt in pop up modal for your Webflow site. Build an email list faster and easier with this free cloneable.
Another beautifully designed hero section for your Agency site in Webflow. This cloneable features a dark/light toggle, a full screen slider with custom navigation dots along with slide number change animation, and a full screen hamburger menu navigation.
A great category card hover animation/interaction for Webflow. Adding this effect to your Webflow site creates a custom card animation/interaction effect. When you hover over the card the circle scales up to fill the entire card with a color and then the border color becomes white. The text also becomes white to be more readable on the background color. This effect is achieved by placing an inner circle, circle border, and an icon within a circle wrapper. With interactions the circle scales up, and the border and background circle change color on hover. Each card has a unique and separate mouse out interaction so that it can revert back to the individual cards color.
Here's an example of creating 3D interactive balls via Webflow using only divs and color gradients, no images or custom code was used to create this effect. When someone moves the mouse on the Webflow site the balls/divs move in different directions.
A wonderfully designed pricing comparison table with everything you'd need to showcase and feature a pricing page on your site.
Here are four different text reveal animations on scroll interactions in Webflow. These designs all use custom code via HTML embeds. The four techniques include classic text review on scroll, growing circle mask on scroll, and text in from left and right on scroll.
A fun way of adding a 3D interactive Figma logo button to your site.
A funny "game" inspired by Tinder's swiping functionality in Webflow. The site is best viewed at 1440 x 900 in desktop. This mini game is not built using Webflow's CMS and uses sections to create each swiping style page. This was built using Webflow's interaction and doesn't require any extra code.
Are you looking to use Webflow tabs with a rich text CMS field? By default Webflow doesn't allow rich text fields to be placed in the tabs by default. This technique uses a bit of JavaScript so if you change the classes be sure to update the code within the page settings. The arrows in this demonstration are from Font Awesome and the colors can also be updated in the page settings.
Here's a way to add a nice gradient color transition for a button on the hover state. This is accomplished by using only Webflow interactions.
Here's a way to add a contact form popup modal to your Webflow site. Perfect for quotes, advanced contact forms and more via a pop up modal overlay. This contact form overlay includes custom open/close interactions, form inputs, submit button and shadows.
Want to build a multi step form in Webflow? This is a way to build a multi-step form in Webflow. By default creating a form you're limited to only a single form, using this method you can create a multi step contact form via a native Webflow slider.
A fully cloneable mega menu navigation with full page dropdown interactions for Webflow. A great way to quickly get your Webflow menu/navigation launched with pre-built dropdowns, CTA buttons, and more. This was built with clear class names, native Webflow interactions, basic dropdown triggers and fully responsive.
Here's a way to exclude free email domains from using a Webflow form on your Webflow site. It excludes the top 100 free email domains via Javascript.
Here's a hero card hover interaction for your Webflow site. Upon hovering a circle expands to fill the entire card. Simply copy and paste this to your Webflow site.
A perfect way of adding login and pop up modals to your Webflow site. These sign up and log in modal windows are well designed with custom form inputs, buttons and open/close interactions.
Here is a simple branding style guide that you can use for your Webflow projects and clients sites. This helps your clients, or yourself, create branding guidelines that will be used for all marketing and site materials.
A stunning membership pricing table perfect for your Webflow site. This pricing table is based on a revised Flowbase design with unique hover interactions, removed/cleaned up class names, updated page copy, new font sizes and memberstack integration. This utilizes an orange and dark blue color scheme, 3 column pricing table with a header.
Accesible Webflow components library consisting of accordion, menu and an accessible Modal. This cloneable features three core components as well as a thorough description describing important accessibility characteristics and methodologies. This uses Finsweet's client first system and Webflow javascript snippets.
Here's an example of how you can integrate Mapbox into your Webflow project to help create an interactive storytelling experience. This is a great way to create an immersive map interaction while scrolling to different sections on your site. Perfect for giving the history of a city, providing a guided tour and much more. You will need to replace the Mapbox with your own API credentials. Unfortunately this isn't optimized for mobile yet.
A conference/event hero section design for Webflow. Features illustrative cards for daily event schedule, a get notified form opt in, video lightbox and menu/nav bar.
A unique way of using a CMS to create an interactive responsive map. You can watch the full tutorial here: https://www.youtube.com/watch?v=VqSEvzzLoVQ