Discover Webflow cloneables

Here's a well designed cloneable blog template design perfect for your Webflow site. It features a sticky sidebar and well designed content divs with just about everything you'd need for your blog page. Including other posts, individual blog page, call to action and email opt-in/subscribing, categories, sidebar and much more.

A beautiful two package pricing component that includes a pricing comparison table. Perfect for nearly any site that offers two different pricing packages for clients and needs to feature a comparison table.

A simple, yet complex image slider with a transition effect. This utilizes Splide.js, Anime.js custom JS for the link delay.

A fun demonstration of animated icons with hover states in Webflow. They're very simple line icons with subtle, yet unique, hover interactions. One thing to note with the shapes that change size is that the size animation rather than scale, as adjusting scales adjusts the widths ever so slightly and doesn't make the animation look precise. Size and move were the only two animations used for these shapes. The only easing was used was ease and all the animations have a duration of .5 seconds.

A style guide framework built in Webflow so that you can easily build and create a style guide for your projects/clients in Webflow. This framework lays out all the elements, tools, components and resources used to develop them. This is based on the client-first methodology by Finsweet.

Do you need to disable page scroll on click in Webflow? Here's a method to disable page scrolling on an event click. This is perfect for modals, popups or really any method where you need to limit the page scroll on a Webflow site. This cloneable provides in depth explanations and tutorials of how to achieve this within Webflow.

A unique how it works horizontal scroll feature section perfect for your Webflow site. As a user scrolls down the page each section snaps into place horizontally. This effect was built entirely using Webflow's native interactions and does not utilize any other JS libraries or custom code. This effect was created by creating a scroll wrap with three different triggers for each section. As the user scrolls through each section the opacity, background color and size of each element changes. A unique approach to creating horizontal sliders within Webflow without the use of additional JS libraries or code.

A styleguide for Timothy Ricks Wizardry technique in Webflow. This styleguide will add the core elements of the Wizardry technique to your Webflow 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.

A recreation of the Firefox browser window as a mockup in Webflow. This Firefox browser mockup features open and closeable tabs, forms to act as the URL bar and hover states for all of the browser buttons. A unique way to create and demonstrate product images, product demonstrations and more in Webflow.

Here's a way to disable right click images in Webflow. The custom code will disable right click on either images or lightbox images. In order for this to work simply copy and paste the code found in the Copy this code HTML embed. Keep in mind that this only disables the right click although images can still be downloaded from the web without the right click capabilities.

Here's a great project that shows all of Google's material color palette in an easy copy and paste method. Perfect for building color palettes for your site or finding inspiration for colors to utilize in your Webflow site.

Three different call to action CTA sections designed for Webflow. These are designed to help increase your conversation rate and drawing attention to important call to actions on your Webflow site.

How far can you push Webflow's native interactions? In this demonstration you'll find a Mad Max movie intro page that showcases just how far you can push the limits of Webflow interactions. There are no gifs, gimmicks, or lottie/SVG animated files being used here.

A simple to do list app built in Webflow. The todo list app saves the list status to your browsers local storage. Be sure to add the global styles symbols, the custom head tag as well as the custom JS code added to the body sections.

Here's a way of adding a custom, target style cursor to your Webflow site. This cursor creates both a vertical and horizontal line on the page with a red dot, much like a target/red dot on your Webflow site.

Here's a way of adding a simple file upload to your Webflow site via Uploadcare. This is perfect for clients, users, or sign up flows that require the use of file uploads.

A fun way of adding a 3D interactive Figma logo button to your site.

Showcasing Webflow's new blending and backdrop features. This demonstration cloneable shows off how text hover effects behind Backdrop blur and blend effects in Webflow. In this example text behind backdrop blur shapes showcase the effects colored linear gradients and shapes with no color gradients and the effects of text behind with hover effects. This technique uses a bit of CSS to create the text outline and hover effects.

Here's another way to add full page scroll snapping functionality to Webflow via Fullpage.js. In this example you can see full page, smooth snapping section on scroll. Please note that you'll need to add the custom code found within the page settings found in both the header and body sections.

A unique gradient glowing text effect for Webflow with unique hover interactions. Playing with backdrop filters, SVG clip path, and linear gradients you can now add a unique glowing text effect to your Webflow projects. Just hover over the image to reveal the animation. Be sure to add the custom HTML embed found on the cloneable to ensure that this works properly.

A simple, interactive scroll text mask technique for Webflow. As the user scrolls down the text moves in separate directions created through a Webflow interaction. The text has a masking effect which can be found on the parent Track div. A great example of Webflow's native masking capabilities.

Creating a proper Webflow site should start with brand guidelines and a style guide. This ensures that your sites brand and feel stays consistent from the start of your Webflow site build. This is a great resource and UI kit to build your own styleguide and brand guidelines.

A custom product display using accordions in Webflow. This product display for Webflow is built with Webflow's native builder and utilizes an accordion like effect with Webflow's native interactions. Each card when clicked explands to show additional product information including a an image, title, product description and price.

Here's a way to achieve a sticky horizontal scroll section within your Webflow site. Using CSS sticky and interactions you can now have a showcase section that horizontally scrolls on scroll down in Webflow.

A fun demonstration of how to use jQuery to create a draggable canvas or game. This utilizes custom code within the page settings and will not work on mobile.

Here's another way of achieving a full page/section sticky with a pagination indicator using PagePilling.js. Here are some notes. Start with a div with ID pagepiling. Within the div create several sections with the class section. Make them a height of 100VH. Add the code found on the page to your head tag. Add the code to your body tag. You can then customize it with anchors, scrolling speeds and navigation based on the GitHub here: https://github.com/alvarotrigo/pagePiling.js/

Here's a great blog post card design with hover interactions perfect for any Webflow site. When the user hovers over the card the image is zoomed in, becomes brighter and the authors details are shown.

A full page hero slider section featuring full page image and text transitions in Webflow. A hero section built for photographers and videographers featuring a stylish 3-column slider with large, modern page loading, and a full screen hamburger menu.

Ten different footer designs for Webflow. Beautifully designs that can accomplish just about any type of footer variation that you could possibly want on you Webflow site.

An inclined, horizontal smooth scroll portfolio section created with the power of Webflow interactions. This technique uses no custom code such as Javascript or CSS to implement on your site. Instead this utilizes Webflow's native interactions taking advantage of the While scrolling in view. As the page is scrolled down the interaction moves the cards from right to left. The incline is achieved by utilizing 3D transforms on the cards parent div. Each card has a unique hover effect in which the image moves on hovering of each card. This cloneable is perfect for a portfolio section, features section or much more.

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.

Before and after slider animation with pure animation Webflow interactions. You only need to replace the background image for .before-image and .after-image

A fun interaction in which a head with eyes follows the movement of a mouse on the page. This fun interaction showcases the abilities of Webflow interactions as the entire effect was created using Webflow's native interactions. As the user moves the mouse over the site the head, and eyes change location, the mouth grows and shrinks and the eyes also have another blinking interaction. The entire head was built using divs, as well as each individual element such as the ears, eyes, mouth and everything else. All three interactions rely on the page load trigger and then utilize the mouse moving in viewport functionality. Quite honestly this is one of my favorite native Webflow interaction animations that's interactive and playful.

A complete pricing table driven by Webflow CMS. No need to customize pricing, features, or images. All of it is being driven via CMS to make it easy for you or your clients to update their pricing information.

A unique way of erasing content via a hover over effect with your mouse. Also includes a touchable version for tablets. Be sure to add the custom code to your site to ensure that the black overlay is properly shown.

A before/after comparison component built with native Webflow interactions. Perfect for an image optimization service or demoing the difference between two different products/services. Fixed width before/after images, position absolute, and an interaction to resize the containers on hover.

Complex techniques to achieve amazing background effects using unique blending and backdrop filter effects and blending effects. In this demo you'll see a hide/show background effect on scroll, moving divs/assets wherever on a page and the various blending techniques, mouse hover over to effect background effects and more. Combine separate channels into full colour photo; magically hide and show objects simultaneously using nothing but solid coloured divs; play with stacking various blend modes on top of each other; see the mind-bending inception of inversion of already inverted objects; use interactive colour changer for your elements, that does not even touch the elements themselves; create fun colour-restoring games; reveal the magical world invisible to naked eye with your blend-empowered cursor.

A mobile ready product display card for Webflow. This mobile product card was created for smaller, responsive ready mobile screens. This card features a product image, slider orientated with a product name and price with a large call to action button with hover over interactions.

A unique interaction perfect for portfolio pages or about company pages. As a user scrolls down the page the primary in focus element becomes highlighted and the background changes to a different image. This effect was created from only Webflow interactions and does not use any extra javascript or code snippets. Using Webflow interactions and the scroll into view trigger the opacity of the image changes and the previous items are hidden, while a text effect is accounted for. Overall this is a basic, yet sophisticated Webflow cloneable that will help bring any portfolio to life.

A full set of social media brand icons in black and white for your Webflow projects. There are several different variations, all in black and white, including SVG icons, button classes, embed boxes and Font Awesome icons.

Here's a unique clickable process/steps section in Webflow. Whenever someone clicks on each step an interaction triggers that displays the number as well as further information about that specific step. Simply edit the content, update the interactions based on your requirements and enjoy a unique steps/process section on your site.

Add a flock of interactive flying birds to your Webflow site via three.js and vanta.js. A wonderful way of adding an interactive background of 3D birds flying to your Webflow site. You can edit the following sections of the custom code for further refinement. You can edit: backgroundColor: 0xffffff, color1: 0xf70707, color2: 0xff5a00, birdSize: 0.90, wingSpan: 29.00, speedLimit: 4.00, separation: 22.00, alignment: 21.00, cohesion: 21.00, backgroundAlpha: 0.93

A fully built Webflow CMS for structured data to help provide insight into how to structure your Webflow CMS to support markup and Google Structured Data.

A modern and responsive pricing section with two different plans. A light mode and a dark mode is available.

A set of 8 different SVG preloaders for Webflow. These SVG preloaders are created entirely using SVGs and can be added via HTML embeds to your Webflow projects. These are perfect for demonstrating a loading state such as a preloader, submit button or other similar action.

A text gradient scroll effect that was similar to the one used on Apple's website. This text scroll effect showcases a block of text, which has a gradient effect applied to it. As the user scrolls down the bottom portion of the text is visible and as the user scrolls down further the entire text is visible, scrolling down further on the page the text then fades out. This effect does not require any HTML embed or custom code and utilizes Webflow's native interactions. This interaction utilizes the element trigger and while scrolling into view to create the effect. This interaction works by changing the opacity and moving an object over the text.

Range slider examples created for Webflow. These range sliders allow you to capture price ranges for your form inputs and specific amounts as well. These demonstrations can be easily edited to suit any amounts or styles based on your own specifications. The sliders are built using custom code found within the page settings so be sure to add the code to your site in order to work properly.

Add Twitter tweet cards to your Webflow site with this free cloneable. This cloneable recreates the basic design of a Twitter card to allow you to add testimonials, tweets and other Twitter related cards to your Webflow site. Add this to something like Integromat or Zapier and you could automate new tweets to your site. The benefit to this is that you can reduce the load time of your site be not calling the external Twitter embed JS library.

Here is an interaction for hovering over a card using Webflow interactions. Simply clone this and add it to your site to add a dynamic hover interaction to your Webflow site.

Perfect for a services or overview page on a Webflow site. This progress bar indicates where you've scrolled through and which content you're currently viewing. The progress bar was created to scroll to the dynamic CMS collection blocks, typically this is not possible with Webflow since collections can't have anchor links. This was resolved via a nice hack by assigning the ID to the collection classes through an embed and then converting the progress bar links to anchor links so that you can scroll through the various content naturally.

A fun, cartoon styled 3D animated button that bounces on hover/click. A fun effect for your Webflow site and a way to liven up a typical button.

Four unique methods for creating 3D elements in Webflow natively without using any type of code. No custom code or lottie animations were used and all of this was accomplished naturally via Webflow interactions.

A unique slider animation for the background image on a site. It utilizes the full viewport and provides a unique animation.

A membership pricing table design for Webflow featuring three pricing structures in a clean and modern design. This pricing table cloneable features a unique header section and three different pricing packages with an emphasis on one package. It includes price, description, button and individual pricing options.

Product cards become sliders when on mobile resolution technique in Webflow. Here's a fun way to add a dynamic element to your site for mobile users.

An accordion with Native tabs absolute sidebar navigation for Webflow. This combines the power of the accordion and native Webflow tabs element with some minor custom code for the numbering of each category. Due to this the method will not work for Webflow CMS. Perfect for an online course, learning module or similar style site.

A unique button design for Webflow with hover interactions. This purple styled button features a hover interaction in which the purple arrow expands and grows when hovering and then shrinks back to the original design on hover out. All of the button animations are built with native Webflow interactions.

A way to add a dropdown with all the countries and flags to your Webflow site. There are several examples that utilize Nice Select, including flags, no flags and a dropdown only. You can copy-paste the custom code element with a select tag with all the countries in it. Note that this is achieved via JS and you won't be able to preview this within the WEbflow designer.

Six different call to action designs for your Webflow site. An easy way to add important call to actions to your Webflow site via a cloneable.

A full page Calendar with week/day/month setting and works with Webflow CMS. This full page calendar design relies on custom stylesheet and JS to work so you'll need to copy both the CSS and JS found in the head and closing body tag of the page settings. Please note that this is primarily driven via CSS and thus Webflow's designer becomes rather useless for the design other than the Webflow CMS elements tied to it.

A 100% native CMS based Webflow horizontal scroll technique. This CMS horizontal scroll animation was built solely with Webflow native interactions without any custom code. The method was to use a second collection list and make the length of the scroll trigger wrapper always proportional to the width of the horizontal strip. This way nothing to adjust or change in the designer when the number of items changes, and the animation will always feel consistent and smooth.

An NFT collection with a minting dapp in Webflow. The minting works but you need to have a MetaMask wallet and you also need to have some MATIC tokens on the Polygon network to avoid high gas fees.

A slick split hero slider design with unique slider transitions that rotate both half of the pages in different directions upon each slide. Perfect for a unique hero section in Webflow that allows for an eye catching and dynamic hero slider section.

A demonstration of how to utilize lotties within Webflow CMS. This cloneable example will help demonstrate how you can embed, utilize and even control lotties via Webflow CMS system.

Easily add social share buttons to your Webflow site with this free cloneable. This technique uses a small script that utilizes Webflow's attributes to automatically update the outbound links to social sharing URLs. A great way of using Webflow's designer to create the design elements while still having the share functionality. This eliminates the need for ugly HTML embed codes within the designer.

A fully responsive 3D flippable/foldable card effect on hover. You can also achieve this via the scroll method as there are two options in this demonstration. These affects were created using Webflow's native interaction and require no additional code. The interaction uses hover event and rotate and move actions.

Here's a FAQ accordion with lottie interactions for Webflow. Perfect for adding an accordion to your Webflow site with a nice lottie animation for opening and closing the accordion.

A fun popping credit card hover interaction in Webflow. When a user hovers over the credit card it bounces up and then back down using completely native Webflow interactions.

A unique pricing table with tabs to rotate between different packages in Webflow. This pricing table offers a unique design pricing packages that utilizes a tab style pricing table to change between different pricing packages. The pricing table defaults to the cheapest tier, and the more expensive plans are hidden behind a table style button. Featuring 3 different pricing packages and unique transitions between each package. This pricing table features a large header, three packages, and unique rounded design.

Here is a way to create dual snapping cards on scroll in Webflow. When you scroll both cards snap into place, the slides change with an interesting reverse scrolling effect. Position sticky and Webflow interactions give the illusion of a snapping effect.

A FAQ section with a sticky sidebar and accordions for various FAQ questions.

Here's a way to create a forever scrolling effect for your Webflow site. With a custom piece of code you can create an infinite page scroll which continues to clone the body over and over again. Not sure how you could use this effect but a fun demonstration none the less.

A fun way of adding dynamic radio inputs animation to your Webflow site. When you click on the radio inputs they expand when selected. Simply clone the project and add this dynamic interaction to your Webflow project.

Here's a way to utilize List.js with Webflow native CMS to create filtered and searchable lists within your Webflow site. This helps users filter specific information and details from a large list quickly and easily from within your Webflow site.

Add a Vimeo video to the background of your Webflow site with this cloneable. This allows you to run the video as a loop in the background. If you click on the unmute button the video will play from the beginning and the sound will become activated. This allows you to add Vimeo videos to your sites with better flexibility and increased usability. This requires a bit of custom jQuery code and the Vimeo API must be included if you want to utilize Vimeo iFrames. You can find the jQuery and relevant code within the custom code settings of the page. Take note that this also utilizes data attributes and Webflow interactions to work properly.

Add a cookie consent to your Webflow site in no time. Here are 5 different designs for a cookie consent with working codes attached at the bottom of the page.

An easier way to create custom slides in Webflow. Includes animations with static elements or CMS collection lists. This is powered by SlickJS, allowing you to use all of the slider functionality offered without writing any code.

A great way of adding a text time clock to a Webflow site. In this effect the time is written out and displayed on a page, a great way of adding a classy style clock to a Webflow site.

A simple to implement neon glow text effect for Webflow.

A set of Scrollify.js section scroll interactions and unique Webflow interactions to make for section scrolling interactions in Webflow. This cloneable features Scrollify.js and the settings can be found within the pages custom code section. Each section has a custom class added in which the scrollify.js script utilizes. Each section utilizes Webflow native interactions Scroll into view in which several different individual actions are applied such as , move, opacity, scale, rotate and opacity. In this example the Scrollify.js script is being used to snap each section on scroll and all of the other interactions are powered by Webflow. While this could have been built with Webflow interactions as well the author decided to use Scrollify to limit the number of interactions per section.

A unique Webflow slider created with Three.js and GlslCanvas. While this is a good example of a slider it uses hand coded image URLs rather than Webflow sliders. A good demonstration of how to add Three.js slider effects to your Webflow site but will need some customization to make it work properly on a Webflow site.

Never change the copyright year or other year on your Webflow site again. With this simple javascript code you'll be able to have years automatically update on all of your Webflow sites. Simply add the custom code found within the body tag section in Page settings, identify the div, and you're all set.

A free create account/subscription sign up page design for Webflow. This simple login and sign up page design includes gradient input outlines, show/hide password functionality in a dark theme with a beautiful background.

A conversational style contact form design for Webflow. The contact form makes it fun and easy to fill out a contact form by creating a conversational style form surrounded by customized input fields and a submit button. A perfect way to add some personalization to your Webflow's contact page.

Here's a great way to add dynamic hover states to your team cards in Webflow. With this profile card design several hover states are displayed with various scaling and movements. The top circle has social media icons to make the card more functional and display relevant information. The bottom has the name of the person displayed in a rectangle. The hardest part of this interaction was adding all the shapes into the card. Specific wrappers were used and positioned around the wrapper in an absolute position. For the rectangles at the bottom they were skewed on the x axis -20px. Take note, when you add a move interaction to these shapes the skew property gets removed so you have to add the skew property to the initial state of the interaction as well.

An interactive dark Chrome mockup design for Webflow. This Chrome browser window mockup is perfect to showcase screenshots of product pages and page designs. This is built entirely in Webflow and utilizes a number of native Webflow elements such as forms, interactions and more to create a beautiful interactive Chrome browser window.

A beautifully designed product card for your Webflow site. An easy to implement cloneable for your Webflow site to add product cards.

A pricing chart tooltips created in Webflow via native Webflow dropdowns. This tooltip was created using Webflow dropdowns and was built for desktops and mobile breakpoints and is fully responsive.

Here's a way to create a simple drawn underline for text in Webflow. This method demonstrates how to create a span text class and use a hand drawn underline image in text for Webflow. It's recommended to create several different underline length spans as some words look better than others with different sizes.

Here's a way to create a CMS checkbox with custom names.

Here's a dynamic pricing table that updates the pricing and currency symbols based on the selected currency in Webflow. A great way to show different pricing based on the currency selection of your users.

Here's a way to enable geolocation based translation on your Webflow site, automatically. The languages according to location: India - Hindi, Germany - German , France - French, everywhere else - English.

Here's a unique, 3D mouse interaction in Webflow. In this example a 3D box spins based on the mouse within the viewport of the Webflow site. It's a simple 3D box that rotates around the center of the viewport as the mouse is moved around.

A like button that allows the users to take notice when they give some love on your site. When a user clicks the like button the heart begins to fill up and the like count increases. The like count can be added to local storage or synced to a database.

Using the MetaMask API and Web3.js you can send Ethereum via Metamask in Webflow. In order to get this to work properly you need to add the custom code found in Page Settings before the closing body tag.

Here's a Tic Tac Toe game created in Webflow. It was created with some custom code and native Webflow interactions.

Looking to easily add buttons to your Webflow site? Here are 16 different button designs with prebuilt hover state interactions.

Here's a method of adding a toggle switch without any native Webflow interactions. Step one is to place a checkbox in your form (use custom checkbox option. Step 2 style your checkbox like a toggle box. Step 3 place the dot as a svg image. Step 4 style the checked state: move the dot to the right / change the background color. Step 5 on normal state add transition to background-position and background color property. Done.

A great way to add mouse aware, location aware slider navigation interactions to a slider.