Discover Webflow cloneables

Here's a way of adding a full screen Google maps modal to your Webflow site. Perfect for showcasing your business location while keeping the user on your Webflow site.

Allow visitors to preview a site thumbanil on external link hover in Webflow. This feature allows you to get a preview of the site that you're linking to without having the user leave your site. It works by extracting the external links on page load, it then grabs a screenshot of those sites and reveals it on link hover. The card's position is calculated using custom code and thus works with inline links and link blocks. Just change the external link and preview will be updated automatically. Replace the demo screenshot API with your own in your live builds.

Here's a way of adding a colored fog background effect to your Webflow site using Three.js and Vanta.js. Please keep in mind that this has good browser compatibility however is CPU intensive and may have some minor issues on mobile. Be sure use only one Vanta.js animation per page.

A fully dynamic hero slider that's responsive and includes a vertical slider that switches out the primary heros image. This was built entirely with Webflow, some CSS and Webflow's native interactions. At the top you'll notice a horizontal marquee, this is powered by custom CSS which you'll find via an HTML embed. You'll also notice an extensive use of Webflow native sliders and a variety of individual interactions for each slide change associated with each and every slider. A very extensive use of Webflow sliders and interactions. This hero slider does not use custom code within the page settings so you'll want to dive into the HTML embed and then the Webflow interactions which make this entire thing possible.

Here's a technique for changing the size of CMS elements with a toggle button to give your clients more flexibility in displaying CMS items in Webflow. Each element has a toggle, medium large and align center. When one of those options is active, a class is then added to the grid item via custom code. This then changes the design based on the clients selection. In order for this to work, the embed field in each CMS item and the jQuery code must be added. Tutorial: https://youtu.be/DsuCGRSgJIk

A simple and easy to implement dark and light mode toggle for Webflow. This method was built using Webflow's native interactions and doesn't require any custom code.

A simple yet effective way of adding a countdown timer and clock to Webflow. This example utilizes some custom code and Webflow's native CMS to create a count down timer clock on your Webflow site.

A simple review slider with a lottie star load animation. When each new review slide is loaded the lottie stars load one at a time. This is also mobile responsive and should work at all resolutions.

A unique 3D image mosaic with glare effects and 3D transforms in Webflow. This cloneable uses 100% native Webflow interactions to achieve the effects with a large number of mosaic tile divs for the images. The Webflow interactions utilizes to create this effect are Rotate, Filter and Move via Mouse Actions.

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.

This is a full screen lottie with scroll interaction. A unique way of using page scroll to animate a lottie file.

A rotating animation that transforms an image before and after the item scroll in Webflow. This is perfect for before and after effects and can be used without the rotation effect as well. There's also a mouseover interaction that creates a magnetic pull of the image.

A rebuild of the Dropbox pricing comparison.

A free cloneable hero section that includes a scroll to reveal text interaction. As the user scrolls down the page the next section is zoomed into and the text then begins to appear. Make sure you have selected the body (all pages) and update your typography settings to 1vw for it to work.

Here's another well designed Webflow navigation menu bar with dropdown interactions. This nav menu is perfect cloneable to jump start your Webflow site builds by providing a fully functional, mobile friendly mega menu navigation to your Webflow site.

A 4 column pricing table cloneable design featuring a bump effect for a primary package in Webflow. This beautiful pricing table includes features, package names, pricing info, and a 3D bump effect for the primary package that you'd like to put emphasis on.

Here's a way of achieving a toggle switch via native checkboxes in Webflow. These Boostrap toggles, a third party library which converts checkboxes to goggles, without needing to import all of Bootstrap's classes and styles. The Bootstrap default colors have all been defined in a style guide so that you can alter the colors yourself without having to touch any code.

A beautiful product & feature grid section for Webflow. This product grid uses flexbox and grid and the icons are SVGs which inherit their color from the parent section.

A fun way of changing the gradient background color via mouse in Webflow. Please note this will not work in Firefox. This is a native Webflow interaction and just a single line of CSS code. The CSS controls the pointer events to none while the interactions control the location of the blur and it's surrounding effects.

Here's a simple way to create tall horizontal accordions within Webflow. This is implemented using interactions, some custom CSS properties for the vertical text, and a touch of magic. There is a lot of math involved with this implementation and will need to be modified if you want to remove or add any accordions.

Three individual animated buttons with hover interactions, which changes color, scale and rotates. On hover the svg mask changes its color via a button color background.

Here's a way to add TikTok videos in a slider with Finsweet client first naming conventions driven by Webflow native CMS. Adding videos could be automated with Make/Integromat or Zapier with the creation of new items in the slider from this collection. This uses the CMS to drive the videos and uses Client-first CSS classes.

A triple pricing table design for your Webflow site. This component includes features comparison, primary/focused table, hover over effects and much more. A modern design that features shadows and rounded corners and buttons.

A fun way of showing off a product by allowing for feature zoom in on click. Great for ecommerce sites that need to provide context into features with an interactive zoom in capability.

An example of an expanding image cards on hover menu and navbar in Webflow. This full page menu adds a hover interaction that expands cards or images on hover in your Webflow menu.

A simple and easy to implement page loader using all of the letters of the alphabet in Webflow. Everything is accomplished with Webflow interactions and zero custom code.

A free login/sign in page for Webflow. This free Webflow cloneable features a unique feature in which the password field is hidden until a user begins to type their email address. A unique way of turning a simple page into a dynamic one while potentially reducing bot activity.

A unique scroll animation in which a spider crawls across the screen in Webflow. This animation was built entirely from Webflow's native interactions and the power of Lottie animations. As the user scrolls down the page the animation is triggered and then moved across the screen using interactions.

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 full suite of wonderfully designed and accessible components for Finsweets Attributes CMS Filter and Webflow forms. Includes radio button, checkbox, dropdown, search input, select, range slider and more!

A unique way to show a video play button via the mouse/hover over in Webflow. A fun way to add a dynamic play button to your videos in Webflow. When someone hovers over the video a play button appears to follow the mouse cursor and offers a few different rotate states depending upon where the mouse is located over the video. This technique uses a few different native Webflow interactions for the mouse cursor to appear and the rotate effect. This uses 100% native Webflow interactions and does not require any extra code. Tutorial can be found on Youtube here: https://youtu.be/ySUF-D9LxjE

A fun crystal ball hover styled button for Webflow. This was designed entirely with native Webflow interactions and does not use any type of custom code.

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.

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.

Three different unique footer designs for Webflow. Easily add a footer to your Webflow site with one of these three free cloneable footer designs. All footers feature unique designs and layouts with a clean, responsive design.

Here's a way to use native Webflow attributes to send and receive data to text fields or div/text elements. This can be useful for allowing users to contact different departments via Webflow's native forms. Please note that you'll need to add the custom code found within the body close tags within Page Settings for this method to work properly.

A simple way to create complex CMS grid layouts. You can define a layout for any item in the grid. You can make it multiple spans of columns and rows. You can also set columns and rows to the nth items as well as even or odd items.

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.

Here's a way to add a show/hide password input field in Webflow. Clicking on the eye icon displays the password and it's accomplished via some custom jquery code to change the input type.

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 sign up page inspired by Dribble for Webflow. This cloneable sign up page includes Google login button, Twitter login, name, username, email and password. The username, Google and Twitter functionality are a beta of the Memberstack 2.0. The form includes unique designs with hover states, active states and more.

A demonstration of how to change the layout of a page design via a click in Webflow. This method allows you to dynamically alter the page design/layout design on a Webflow site using native Webflow interactions.

A complete Splide.js CMS slider solution for Webflow. Splide.js offers a great solution over Webflow's native slider solution. Lightweight and mobile friendly this slider offers four different designs and implementations, including a Webflow CMS slider solution using Splide.js. This technique does require custom code that you'll find within the page settings, custom code area. Using this solution you can update the number of items per page, the number of items changed per slide, infinite looping, pagination, speed, drag threshold and much more.

Now you can utilize a rich text editor for Webflow forms via a little bit of custom code and JS. Easily add this functionality to your Webflow site to make even richer forms.

Here's a way to display a live date on your Webflow site. Easily add the day, date time and year to your Webflow site using this custom script. Be sure to add the custom script found within the page settings to get this to work properly.

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.

Here's a way to add a simple JS calculator to your site. This is perfect for calculating investments, pricing, or whatever you like. Just change the formula within the embed code to manage what is outputted. This has two functions, one to perform the calculation and another to disable submission on enter.

Here's an easy way to create a masked video in text in Webflow. No custom code is required. This was created with an SVG file and added interactions to zoom in while scrolling.

A great way of adding a slider component with a splitscreen gallery slideshow that automatically rotates a collage while animating each slide with it's own transition. View the tutorial here: https://youtu.be/IvxswB5jy-w

A beautiful membership pricing table featuring annual, quarterly and monthly toggles for Webflow. This pricing table features everything that you'd need for a 4 tier pricing table that offers discounts based on annual, quarterly and monthly pricing options. This template features all the necessary interactions to get this tabbed pricing table to work properly.

A way to implement a parallax scroll effect on your Webflow 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

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.

Prevent Webflow form spam with this unique form validation technique. Using this you'll be able to block spam emails from generic or invalid email addresses from sending you form spam before they get validated with Webflow's native forms. In order to get this to work you'll need to utilize the code found within the closing body tag of the Page Settings. You can customize the invalid domain names within the settings to prevent any domains that you don't want to have form submissions from.

The starter style guide project for the Relume Library. This project contains a style guide with the necessary pre-built classes. There are no pages, no layouts, and nothing to delete. This simply allows you to get up and running with Relume, easily. The Relume Library uses Finsweet's client-first Webflow style system. You can find the prebuilt page under Drafts/Style Guide. The styleguide comes with Headings (H1-H6), heading classes (heading-xxlarge), Paragraphs, Links, Block Quotes, Lists, text sizes, text weights, letter spacing, line heights, text styles (using custom Global CSS), text alignment, rich text, colors, background colors, premade shadows, UI elements, buttons (with icons, alternates, icon locations), form elements, icons, image wrappers.

A way to reveal sections/data on Scroll. This uses interactions with opacity and move.

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.

Add social share buttons within Webflow with Refokus social sharing library.

A unique hexagon hover effect in Webflow via custom CSS. When a user hovers over a hexagon on the page a color gradient shifting animation is displayed with a fade in and fade out animation. Please note that you need to include the HTML embedded CSS for this effect to work.

Here's a rebuild of Stripes mega menu design in Webflow. Add a unique mega menu design and navbar to your site inspired by Stripe's mega menu.

Here's a fully responsive, full page slider with diagonal transitions. Here's a great way to add dynamic slider animations and interactions to your Webflow site slider.

Want to validate forms prior to submission in Webflow? Using this technique you'll now be able to validate form fields in Webflow prior to allow a submit using native Webflow forms. In order for this to work you'll need to add the custom code found on the Page Settings. This utilizes jqueryvalidate to validate the forms prior to submission. Jqueryvalidate offers a number of additional validation features that may relevant to your needs.

An all-in-one free UI kit for Webflow projects. Included are over 40 different sections, and 11 page templates. This UI kit is designed to help you with all the sections that you may need to build a business website. Pre-built sections include Navigations, Hero sections, Client sections, tabs, cards, testimonials, content sections, pricing tables, faq sections and accordions, forms, team, footers and more. Several prebuilt pages are already ready to copy and paste to build out your sites. These include Home, About Us, Article/Blogs, Pricing pages, Contact pages, and much more.

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.

Here's a tall pricing page design with annual pricing toggle in Webflow. A full pricing page design for your Webflow site that includes an annual/monthly pricing toggle interaction, service features, and a FAQ section.

Here's a way to add notched/slanted buttons in Webflow. Using custom code you're now able to create a custom notched button by simply adding a subclass to your button. This code can also be modified to create notched blocks on other objects than just buttons.

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.

Add a pause/play button to your sites background video in Webflow.

Here's a demonstration of a simple to do list created in Webflow via javascript.

Here's a fun way of adding a text color invert on mouse hover effect for your Webflow site.

Here's a way to add a count up preloader screen to your Webflow site. This preloader counts up based on the amount loaded to create an adaptive preloading screen that's perfect for any Webflow project. This includes a loading bar/progress bar as well as the percent loaded text field. This technique utilizes GSAP and CustomEase.min.js in order to work properly so you'll need to view the custom code page settings to get the relevant code. This code also checks to see if the user has visited the site previously and creates a cookie if they have not. A simple yet effective way of adding a truly dynamic preloading page that captivates the user as your site is loading.

A login page featuring a sign in form with a password showing button in Webflow. This enables you to add a show password option for the password field of a sign in page on Webflow. This cloneable features a simple login page with email, unique form labels, password label and field, stay logged in checkbox and sign in button. This technique uses some custom javascript which can be found at the bottom of the cloneable of the page as an embed.

Using Airtable and No Code API to power the job listings of a Webflow site rather than using the CMS.

A fun mouse drawing canvas perfect to add to your Webflow background or page elements. This utilizes sketch.js for the drawing canvas which allows you to use your cursor or by touching your mobile device to draw right on the screen. You will need the custom code found in the custom code page settings in order for this to work with your Webflow site. You then have the ability to customize the colors of the mouse trail on the canvas, and can update the design and color attributes. This is a fun and interactive element that can add a unique sense of interaction to your Webflow site.

A stunning portfolio/image grid interaction in which a circle follows and grows when hovering over the portfolio/image grid in Webflow. This was created via Webflow interactions and animations and some custom jQuery. A lovely way to liven up your image grids or portfolio items on your Webflow site.

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.

Here's a technique to add a 360 degree draggable image to Webflow

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.

Here's a way of rotating/transitioning text on a section of your Webflow site. Perfect for hero and headline sections in which multiple headlines or text is needed to explain or demonstrate something.

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

A unique image slider that appears when hovering over items in Webflow. This is perfect for providing a preview of the item that the user may visit next, this could be used for portfolios, about sections, blog posts and much more. When the user hovers over a link an image appears, when the user hovers over the next element the image from the previous item slides up and the current image replaces it. This technique was created with a simple jQuery code snippet which you can find in the custom code of the page settings. You'll want to note that there's also some custom CSS which can be found via the HTML embed. This cloneable was setup to use Webflow collections and does not utilize any custom Webflow interactions.

A unique demonstration of TypeJS and Webflow. Using your keyboard you can change the color of the background using TypedJS, simply type a letter from A-Z and the background color changes.

Here's a dark design full width large accordion with interactions for Webflow. An easy way to add a huge accordion to your Webflow site.

Here's a way to create a horizontal scrolling slider item based on a Webflow CMS. The top one is an example of it in use, while the second one is easier to copy and paste into your projects. Just unbind it from the collection and you can then copy and paste. It's limited to four items so if you end up adding more you'll need to go in and edit the interaction. Please note that there are separate interactions for mobile, tablet and landscape.

An example of how to use Scrollify.js when you want partial height sections rather than full viewport height sections. View the full tutorial here: https://www.youtube.com/watch?v=E0jbNJ6M494&ab_channel=KevinHaag

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

A CMS driven range slider that updates the price based on the selected range in Webflow. This pricing range slider is connected to Webflow's native CMS system. Note that this requires custom code within the Body close tag section to work properly.

A fun, fully responsive slide in menu animation for your Webflow navigation. This menu slides in via a dynamic animation and more importantly is already mobile and responsive friendly.

Have your navbar shrink on page scroll via this Webflow cloneable. Easily create dynamic navbars for your Webflow site that shrink upon scrolling down the page. Once a user reaches a certain point on the page the navbar transitions from dark to light while shrinking. This does not require any custom code and utilizes Webflow's native interactions. This utilizes Webflow's While scrolling in view for two different classes and as previously mentioned does not require any extra custom code. This cloneable is perfect for anyone looking to create a dynamic navbar that allows for dynamic changes based on the users scroll depth on the site.

20 predesigned CSS link hover effects perfect to copy and paste on your next Webflow project. Each individual text link hover effect includes its own CSS for the hover effect. Simply add this to a custom HTML embed or to your sites custom code section. Effects include strikethrough, double underlines, scramble, moving in from both sides, growing and much more. A simple way to easily enhance your sites experience through simple, micro interactions.

A simple way of adding a CMS driven stacked slider to Webflow using addClass and removeClass jquery code that is fully responsive. This opens up a new way of adding a 3D stacked effect for your native Webflow sliders.

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 number of different examples of utilizing Countup.js in your Webflow projects. The examples include, currency count up, intervals, scroll and more. The first example loads when the page is loaded, the second example counts up when the item enters viewport, the third item counts up several items at different intervals and finally there's a currency countup that continuously counts up. This requires custom code which you can find in the custom code section of page settings. Each example is commented within the code and allows you to update the target ID as well as the final count number. The second example is the scroll into view option and can be added as shown in the code. There's also a count down example, count up example with a duration and suffix. This is a great cloneable if you plan on adding count up or count down text items to your Webflow site.

Showcase your Webflow projects and portfolio items within a laptop. This includes videos, animations, and more. This is fully responsive and works with your CMS items so that the videos can change dynamically as needed.

A beautiful example of a Splide.js Webflow slider that features a variety of features in a beautiful design. This slider offers navigation buttons (previous/next), fading out of the person image that isn't active, text description fade in on current active item and more. This example utilizes Webflow's native CMS collections which helps make this even more expandable and future proofing for you or your clients. This example also features infinite looping so that no matter the number of slides users can navigate endlessly through the items. With Splide and this example, you can customize a variety of options such as perPage, perMove, focus, the gap between items, arrows, pagination, the speed that the slider changes items, the dragthreshold, rewind speed and individual breakpoint styling effects. Keep in mind there is some custom CSS that you'll need to add as well which can be found in page settings and via an embed.

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.

Here's a dynamic double vertical bar chart that's hooked up to Webflow CMS. It's nearly responsive and hooks natively to Webflow's CMS via an HTML embed.

A GDPR compliant cookie consent modal window for Webflow. This cookie consent compliant GDPR Webflow cloneable uses the fs-cc attributes to your scripts and can easily be implemented on any Webflow site. Simply clone the project, add the custom cookie consent script found in the custom code settings in the projects settings and modify them according to your requirements. The cloneable includes a premade cookie consent modal window with the ability to customize cookie settings and clearing all cookies.

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 huge selection of premade Webflow animations, including animated buttons, click buttons, circular hover buttons, scroll down animations, nav link animations, tab animations, search bars, social media buttons, text animations, contact cards, blog cards, product cards and more.