Discover Webflow cloneables

Add an Apple style keynote feature grid to your Webflow site. Video tutorial found here: https://www.youtube.com/watch?v=fAkGkF-w1gI

A set of fun characters created via strictly from Webflow interactions utilizing divs and no images. A great exercise in the abilities of Webflow interactions. The interactions rely on movement, size of divs with a loop to make this continuous animated character interaction.

A unique parallax style section that features dynamic scroll interactions for Webflow. As you scroll down an image and background sections move at different speeds providing a unique Parallax style effect. There's also multiple different images that appear when hovering over the links on the side. All of this is built with Webflow's native interactions and no custom code.

A rebuild of the Who Wants to be a Millionaire gameshow screen in Webflow. Built with some custom code.

Here's a way to create a CMS driven slider with a lightbox and video modal in Webflow. This slider utilizes Slick slider for the slider effects. Please note that this uses custom code of both CSS and script for the slider.

Three different testimonial sections for your Webflow site. These free testimonial sections include two slider designs and one non slider to feature testimonials on your Webflow site.

Here's a demonstration of utilizing ztext.js for 3D text effect on mouse move in Webflow. The background was created from an SVG generator.

Here's a way to add a text reveal on scroll to your Webflow site. An eye catching animation reveals the text as the user scrolls down the page. An underline appears and then glitches the color and finally rolls away as you scroll.

Add a monthly and yearly annual toggle pricing page to your Webflow site. This predesigned pricing table is built with the relevant toggle interactions to add an annual and monthly pricing table to your Webflow project.

A shooting stars effect for the background of your Webflow site. The stars come in from the top right to the bottom left on your Webflow site.

A free cloneable footer component with gradient background animations, featuring page links, social media buttons and more. For this to work be sure to check the settings and that you have selected the body class (all-pages) go to typography panel and apply 1vw for it.

A set of unique 3D cards in Webflow with hover over animations and unique interactions. These dark themed cards include mouse cursor interactions in which the cards create a 3D effect on hover. At the same time the cards have a hover animation in which a circle grows and changes the card from dark, to white with all icons/text and everything changing on the hover state.

A fun, sticky div interaction for Webflow. When a user scrolls down the page each div scrolls and locks into place until you reach the last div, and eventually the bottom of the section.

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.

Here's a unique vertical split slider that with split transitions between slides for Webflow. A great way to add a responsive, unique slider effect for a full page or section on your site.

Looking to add a dynamic image slider that can change based on categories? Here's way to add a dynamic image slider driven by Webflow CMS that can be filtered by categories or links of your choosing. The amount of slides is determined by the amount of images added to the multi-image field within collections.

Here's a custom slider with dashes instead of dots and a next/previous slide via mouse click in Webflow. The cursor turns into a custom cursor upon hovering above the slide on your Webflow site.

Here's a way to style code embeds on your Webflow site that are added to Webflow's native CMS system. This allows you to embed styled code snippets into the Webflow CMS. Everything is styled and configured to be super easy to add to your Webflow site. All styles are applied via class names so you won't lose anything during the copy/paste process. The code styling is achieved via highlight.js

A unique interaction that features a hover over animation for images that creates a swirling effect as well as an animated button overlay. The interaction can be used for blog cards or any other type of card or element which links to another page.

A responsive table template design for Webflow built with divs. Perfect for listing information such as client list, user list and other situations in which you need a table design in Webflow.

A unique slider interaction that changes the slide and the pages background image upon each transition in Webflow. A fun way of creating a hero section that adds a level of dynamic flair to your Webflow site.

A fun way of adding a full screen menu with image hover effect on text links. The full screen menu is responsive and easily copy pastable to your Webflow site.

Here's an interaction to shrink the navigation/menu on page scroll for your Webflow site.

A fully native dark-mode toggle button to convert your Webflow site into dark mode or light mode at the switch of a button. This technique utilizes Webflow's native interactions and the Filter, BG color, text color and border color functionality.

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.

A unique way to display and reveal a thumbnail image preview on hover.

A basic styleguide for beginners. Includes font style demonstration, color palettes, text colors, display classes, headings, text blocks, paragraphs, rich text elements, buttons, links, form fields, checkboxes, radio icons, icons, logos, class codes and more.

A CMS driven hover slider for Webflow. Swipe on mobile or use your mouse to navigate on desktop.

Connect Webflow's native CMS to an image plotter via this cloneable. With this cloneable you can add an image plotter to highlight features, locations, items, product features and much more. The multi-reference highlight items to each main gallery image item using a simple top and left coordinate value to set the specific location of the dots on the image. Each highlight dot also leverages conditional visibility to adjust the position of the tooltip image polotter depending on the location of the dot and whether or not the values were set in CMS.

A unique swatchbook hover interaction created in Webflow. When a user hovers over a swatch card, it sweeps out to display the card information. The entire animation and hover effect is built via Webflow's native interactions and doesn't require any custom code.

Add some dynamic flair to your iPhone mockups in Webflow. When you scroll down the animated phone unlocking animation is shown to reveal content. The phone has auto updating date and time based on the users location. The iPhone GUI was recreated and the phone has the ability to unlock and reveal content on scroll. The mockup is fully customizable and you can change the content and wallpaper and is also fully responsive on all devices.

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.

Here's a way to build a toggle switch for your Webflow site using interactions. A great way to learn how to build toggle switches in Webflow and get a better understanding of Webflow interactions.

Here's a way to add a background image change on link hover to Webflow. Using a simple trick to change the background image on mouse hover dynamic items list. This is all done with native Webflow capabilities without any scripts.

A well designed sign up/sign in page for your Webflow site. This sign up or sign in page features a unique confirm password interaction in which appears once the password field is starting to be typed into. The sign up page features a unique rotating logo image, email field, password, confirm password, create account and custom input field states (hover, selected, default).

An amazing 3D scroll animation that rotates a tablet towards the viewer on scrolling down. This can be used for both static images or animated videos and creates a wonderful depth perspective on page scroll by users.

Three well designed tab content interactions perfect for your Webflow site. The first variation has a unique sliding feature when a new tab is selected, the content then appears to fade in coming in from the bottom. The second variation has an underline for the active tab, the active tab underline then moves to the next selected tab while the content appears to fade in from the bottom. The final version appears to fade in from the left to the right with a different appearance to the content. These tabs all utilize Webflow's native tabs with Webflow interactions. Keep in mind that all of the tabs are individual interactions so the more tabs that you add the more interactions you'll need for each individual tab. Overall these are well designed and thought out tabs that would be perfect for any Webflow site.

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.

Here is a free and easy way of using Google translate to make your site multilingual with jQuery.

Background swirl animation via canvas backgrounds in Webflow. This method is created via a custom JS file found in the closing body tag of the page settings. This utilizes the unique javascript text "hack" allowing you to host JS files as text files in Webflow and calling that text file as a script.

Cards 2 is an amazing UI kit and framework to allow you to quickly design and wireframe your next landing page using Webflow. There are over 100+ different prebuilt symbols and components included for hi-fidelity wireframing for any UI/UX designers. Create landing pages and designs faster with the Cards 2.0 UI kit directly in Webflow and ready to be published directly with code. This UI kit includes 50 new cards as Webflow components/symbols in both dark and light variations. 3 complete landing page designs in both dark and light. Symbols/components for both hero sections, features, testimonials, team, pricing pages, blog posts and more. These are responsive for all 4 breakpoints and all cards are offered in a Sketch file. This UI kit allows you to build your designs faster and begin the design process directly in Webflow.

A fancy scrolling interaction to showcase your work in Webflow. This cloneable uses Webflow's native CMS and the power of Webflow interactions to create a smooth scrolling interaction in which each slide is a different section. Upon scrolling the images move in smoothly and the headline and description appear. This is a rather extensive interaction as it deals with scroll actions and scale, opacity, move based on the location of the page.

A very complicated, and advanced cloneable featuring hover effects for a portfolio site. This demo includes a custom, animated cursor, hover effects that change images/divs, text clipping that fills text based on the cursor location. A great example of how Webflow can create a number of different effects, all at the same time. All of this is driven via Webflow's native CMS.

A full screen menu for Webflow with hover over interactions. This menu features all the native Webflow interactions required for building a full screen menu. When a user clicks on the hamburger button the Webflow menu slides in from the top. Each menu item includes a hover over interaction in which the cards expand and the colors turn from black to white background and the fonts also change at the same time. Closing the menu slides it back to the top of the page.

A fun exploration of SVG text effects as loading/enter pages in Webflow. This demonstration features three different circular SVG intro animations of differing color schemes and effects. The animations are all created via Webflow's native interactions and require no custom code. The animations are created with SVGs and a combination of Webflow scale, opacity and hide/show interaction states.

A fun example of the blending feature released by Webflow via a custom mouse cursor. This technique turns the mouse cursor into a blended object, when hovering over the image you can see the blending difference effects. This utilizes some minor custom CSS for the mouse cursor although the true blending and custom cursor is created via native Webflow interactions and features.

Three different stunning Swiper.js carousel sliders built for Webflow. The first variation contains a draggable bar, slider dots to indicate which slide is currently active and slider arrows. The second variation features a dark themed variation of the first version. The third is a larger variation of the other two. These designs are all setup for Webflow's native CMS collection so that they can tie into your preexisting CMS items. As mentioned you will need to add the custom script found in the page settings. With this Swiper.js slider you can customize the looping behavior, slides per view, the slides between groups, space between, mousewheel, the transition speed, mobile responsive break points and its actions. You'll notice that classes are associated with many variables in the code, so be sure to use those or update them to your own.

Featuring 10 different text and typography scroll effects powered by GSAP, ScrollTrigger, Lenis.js, splitting.imin.js and Scrolltype.js. Keep in mind that these effects are great but you will need to have some understanding of code in order to modify these significantly as they rely on simply the JS libraries and data attributes to apply each effect. The first effect rotates the text and highlights each letter as the paragraph comes into view. This is achieved via the data attributes as mentioned previously. The second text effect showcases each letter coming into view from a different rotation and then all combines together to make the visible text. The third effect has each word come in at different positions from out of view and then into view on page scroll. The third version unwraps each word letter by letter as you scroll down the page. The fourth effect takes each letter and has it fold up at random intervals as you scroll into view. The fifth demonstration shows each letter rotating into place upon scrolling into view. The next demonstration creates a rolling hills effect for the letters as you scroll into view. The next one showcases a paragraph in which each letter is grown from the initial position as you scroll down the page. An appear example follows this one in which each letter of a word appears to be blurry and come into focus as you scroll down the page. The next and final variation has each word come in from random directions to create the paragraph.

A beautifully designed implementation of lightbox driven by Webflow CMS. A great way of adding a lightbox to your Webflow site that's powered by Webflow's native CMS.

A great way of displaying videos within a mobile iPhone mockup. You can design the story layout and upload multiple videos into one mobile frame.

This is the official starter UI kit for the Untitled UI Webflow components library driven by Relume. This project contains a styleguide with all of the necessary pre-built classes. There are no pages, no layouts and nothing that you need to delete. This Untitled UI kit uses the client-first Webflow styling system. The styleguide features all typography, H1 headings, H2 headings all the way through H6 headings. This also includes the heading classes from xxlarge to xsmall, paragraphs, links, block quotes, unordered and ordered lists. You'll find the class text sizes such as text size large, text weights, text heights, text styles, color swatches, including error, warning and success color states. Background colors, text colors, shadows, UI buttons and all necessary elements, badges, badge groups, form elements such as inputs, dropdowns, checkboxs and radios. This is the complete Untitled UI styleguide kit to jump start your next Webflow builds.

Here's a way to create a fixed header text section within Webflow in which the header text stays static as the page is scrolled. A little tweak with the interaction and by moving the header 100VH up and down while scrolling over an element.

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.

Here's a way to add a parallax slider to your Webflow site. You can navigate the slider via dragging or using your arrow keys.

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.

A unique tinder style swiping module for Webflow. This demonstration uses fish and a tinder like design to like, or dislike fish. This was built using Webflow CMS and Jetboost for the like feature.

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.

A well designed starter dropdown navigation menu with hover over for Webflow. This consists of clear class names, 100% native interactions and basic dropdown triggers. It's also mobile friendly and responsive design.

This is a demonstration of how to randomly order CMS items on each page refresh using custom code. This was created because the random CMS settings within Webflow wasn't giving a random order on each page load. This is an example of how to truly have a random CMS list on each page load. This uses custom code and a class name assigned to the cards. There is also a non-CMS version of this as well.

Add numbered paginations to your CMS collection lists via this small custom code snippet.

A recreation of the Slack logo via Webflow native divs and Webflow interactions. A fun way of demonstrating what's capable with Webflow interactions and native Webflow designer. There are four different experiments of movement in this demonstration. This was built via Webflow grid and native interactions.

Want to create custom text highlighting and underlining in Webflow? Webflow makes it easy to add customized highlighting and underlining via span classes. This cloneable demonstrates how to create any type of highlighting or underlining variations that you could dream of using Webflow's native text span.

A fun, book and page flipping interaction in Webflow. Please note that while a majority of the page designs are created with Webflow interactions there is some custom code found in the page settings to get this to work properly.

Looking to add animated play buttons to your Webflow site videos or other media? Here are a few different variations of animated play buttons. One variation repeats the play animated button, and the other animates on the hover over state. All of these are accomplished via Webflow interactions.

Build a multi-step estimator calculator for your Webflow site. This is perfect for unique pricing pages, contact forms, and internal tools for your team.

A very cool three.js background animation featuring fly by hills that are black and white. A unique way to add 3D depth the background of your Webflow site.

Create a looping infinite CMS Marquee with pause on hover effect. Achieved via custom CSS.

Here's a way to add multi-step contact forms to your Webflow site. This allows you to build out large contact forms that don't feel daunting to the user. Each step has a relevant transition and effect.

Here's a short CSS code for creating floating labels on a Webflow form. This interaction creates a unique way to add interactions and animations to what would typically be a static input field.

A fun login and sign up page for Webflow featuring a unique cartoon character that follows your mouse cursor. This is accomplished via 100% native Webflow interactions. The SVG was broken up into several parts, and added a hover over element interaction to the background and hover/in out interactions to the email, password and login fields. The rotating head effect is created by moving close-up elements slightly more than the background elements. For example, the nose moves 11px to the left or right, while the mouth only moves 9px and the face moves 6px while the body doesn't move at all.

A beautiful example of a horizontal slider created with GSAP for Webflow. As the user scrolls through the site it smoothly transitions to a horizontal slider. This slider was built using GSAP & ScrollTrigger.js and you can find the custom code in the page settings. This is not setup to use Webflow CMS although it could be modified if you have an understanding of GSAP and code. The horizontal scroll can be modified to adjust the scaling of the image, rotation and much more. Be sure to check out this horizontal slider if you're looking to implement a GSAP variation on your Webflow site.

A responsive safari mockup built for Webflow. A perfect way to showcase a product demonstration or image in a responsive Safari style window. This Apple Safari mockup window is a light version rather than a dark version.

Here are 18 hand drawn SVG elements for your Webflow site. This cloneable includes 18 different arrows inside individual custom embeds. The great thing about SVGs, when setup properly is that they can inherit their color from the font-color of the parent elements.

Here's a way to create a typewriter effect in Webflow via CSS. Popular on many different websites the typewriter effect allows a dynamic, eye catching headline or text on your Webflow site.

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 way of adding a custom countdown timer/clock to your Webflow site courtesy of Smooth.js. A perfect way to add a custom, coming soon style landing page within Webflow or adding a customized countdown element for whatever need you may have within Webflow.

A simple CSS snap scrolling cloneable that allows you to easily add snap scrolling via CSS to your Webflow sites. This utilizes CSS and you can find this in the cloneables custom code page settings. With this custom code you can target the n parent and other nth categories to customize the snap scrolling functionality. You can add easing, the duration for the scroll snapping, the height of the items and much more. Easily add snap scrolling to your site via this snipped and skip bloated 3rd party JS libraries.

A compilation of landing page design components including features, cards, call to actions, testimonials section and more.

Add a unique circular slider to your Webflow hero. This demo showcases a circular slider with animated panels via the background. These panels were created in Adobe After Effects and triggered via a slider element within Webflow. The main slider is also linked to a secondary slider that showcases the text. The sliders were then linked together via custom code.

Here's a Webflow budget app created in Webflow and coded with Svelte running on Webflow. This is a great demonstration of the power of Webflow and using JS, the power of front-end design + JS for more dynamic and functional web apps.

A free widget to display your customers Trustpilot reviews and feedback, or other feedback and reviews to your site via a slider element.

Here's a way to add GSAP velocity scroll effect to your Webflow CMS image library. Using this technique the images create a shredding load effect which is based on the Webflow native CMS library and images found in that library. A good demonstration of how you can use GSAP with Webflow CMS.

A horizontal scroll interaction built for Webflow using native Webflow interactions. This horizontal scroll allows you to use as many panels as you'd like and the panels don't need to be the same width or unit type. This horizontal scroll utilizes the While scrolling in view element trigger, and then utilizes only the move scroll action to complete this Webflow interaction. To add other panels simply add a new panel div in the track-flex section.

Load form or anything from a different page on your Webflow site. This is helpful for embedding 3rd party forms in Webflow or even external action URLS. This helps combat most spam bots since many don't utilize or render JS. Keep in mind that JS needs to be enabled in the browser for this technique to work.

Add a custom cursor of your choosing to your Webflow site. This allows you to add a custom cursor and you don't need to add interactions to each link in your site as well as the hover effect when the cursor moves off the page.

Here's a virtual card animation for Webflow. When a user hovers over the card it opens up like a card and displays the inside of the virtual card. A fun animation for your Webflow site and a way to send someone a virtual card.

A unique demonstration of OGL manipulating a sites background image on hover. Be sure to check out the custom code to ensure that this work properly on your Webflow site.

A geometric pattern design with hover animations created in Webflow. This technique and demonstration was created completely with Webflow's native designer and requires no additional codes or scripts to work properly. Using a bit of creativity and patience a few skew tranforms can build a seamlessly endless geometric pattern. Add in some border animations and you've got a fun, fully interactive geometric pattern in Webflow.

Add flair to your Webflow buttons with this linear gradient animation. This demonstration include two different variations of the linear button gradient animation, one created solely via Webflow interactions and the other via CSS. There are also two different styled animations, one that's one time and another that infinite loops while on hover.

Add Trustpilot reviews to your Webflow site with this premade Trustpilot review slider. This slider was built using Finsweet's client first and uses only SVG images for the icons. A great way to add testimonials and reviews to your Webflow site.

Let's face it, Matter.js is fun! It adds dynamic elements to any site where you can play, throw, and drag items into each other with real like physics. This cloneable features how to utilize Matter.js with SVG bodies. While technically this is easy to accomplish this does require a bit of custom code and HTML embeds, with proper div names to work properly. You can find the custom code for Matter.js and this effect in the Webflow custom code page settings, also take note to the CSS HTML Embed located on the page. This technique uses Matter.js, pathseg.min.js and dcomp.min.js to work properly. This uses element IDs to target the matterContainer and can be further modified to your own specifications. A wonderful example of how to add Matter.js to your Webflow sites in a fairly straight forward manner.

A full page background video hero section design in Webflow. An easy way to integrate a background video hero section in your Webflow projects with unique button interactions, and a scroll indicator.

A simple and easy way to copy and paste social media sharing buttons to your Webflow site. Simply clone the project, copy and paste to your project. This features two different social sharing designs, one that is a simple horizontal bar and the other is a vertical bar. This technique uses HTML embeds to create the social sharing links with the link targets being based on the class name of the link divs. A unique way to create social sharing in Webflow for major sites like Facebook, Twitter, LinkedIn, Email, Reddit, Tumblr and Pinterest.

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.

Want a full page slider effect in Webflow? With this technique you will be able to create a full page slider. This is an illusion using the page loading interactions, making the page look like it slides to the next page.

A fun, interactive bubble blog for your Webflow site driven by Three.js. This interactive bubble blob follows the mouse around the page and moves and interacts based on it's location. A fun way of adding a dynamic and interactive background animation to your Webflow site.

A working example of a native Webflow form to Google sheets upon submission via Integromat. View the tutorial for Integromat here: https://nocodequest.com/webflow-form-submit-to-google-sheet/ Please note that this will not work natively with Webflow and requires setting up Integromat/Make in order for this to work properly.

Build a staggered animation with gird and Anime.js in Webflow.

Here's a way to customize the select drop down field via nice select jQuery plugin. This allows you to customize the dropdown field style and design in your Webflow site. The customization process was made simple. In the navigator you will see a custom code element called style-settings. Open that up and you'll see different options for color and spacing. Comments are used so that you know what does what. Simply copy and paste your own color and spacing values. Finally you need to initiate the script code located in page settings under custom code. You can also grab the style code in custom code settings so that it translates across your entire site if you happen to use this site wide.

Easily add a grainy effect to your entire site. This uses a grain png that was on a Webflow site. You can create your own grains as well to change it up.