Discover Webflow cloneables

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

A unique product card animation on hover in Webflow. When a user hovers over a card the image shifts down, and a border appears with an animation, there's also a description of the card that appears as well. This animation effect was built entirely with Webflow's native interactions.

Here's a way to add random stroke backgrounds to your Webflow site via three.js and vanta.js. Each time the page is loaded the strokes are loaded randomly.

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.

Another demonstration of Webflow's new blending and backdrop filters. Here you can see hue, screen, hard light, color, color dodge, difference, multiply, and overlay blending and background filters in action in Webflow. A clean way to quickly demonstrate the different affects that blending and backdrop can have on images and items on a Webflow site.

A smooth and easy to implement jQuery accordion for Webflow. This accordion was built using jQuery rather than manually creating all of the interactions in Webflow. This is perfect if you don't want to mess around with Webflow interactions or aren't comfortable with using interactions. You'll find the custom jQuery code for this accordion within the custom code in the page settings. In this jQuery code you signify the speed of opening the accordion, close all other accordions if another one is opened, activate scroll to top for active item, the offset of that scroll and the delay before being moved to that item. You'll then update your class names based on if you updated them in your designs. Overall this is a clean and easy to use jQuery animated accordion if you aren't someone that wants to utilize Webflow interactions.

Here's a 4 column pricing page table/grid that's feature rich for Webflow. This pricing table/grid includes sticky package heading on scroll, tooltips, category and feature comparison and is also mobile ready with a tabbed version. A perfect starting point for any pricing page of a Webflow project.

Here's a demonstration of a category card animation on hover in Webflow. When a user hovers over a card two different lines are shown on hover. To achieve this effect the lines scale in from the top-left and the bottom right around the image. There are two blocks around the image and the lines for each block start animating at opposite angles to create an interesting line effect around the image. The effect is achieved by placing two, absolute div blocks inside of the card wrapper and then moving the first div block a bit to the upper left and the second block to the bottom right. In the absolute div blocks 4 div blocks were placed on each side of the div block. The transform-origin for each line to make sure that they are scaled in from the correct place. Each line starts at a scale of 0 and then changes to 1.

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

Here's a way of creating a 3D animated and interactive box model that flips and rotates based on mouse movement in Webflow. Playing around with CSS grid functionality this demonstration creates a net of a box using CSS grid, then just folds the sides together using the transform options and native Webflow interactions to create a 3D box.

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.

Simple tooltips using Tippy.js. You can add more functionality via their dcouments.

Here's a cloneable 4 column feature dark variation of a pricing page in Webflow. This feature rich version includes important aspects like tooltip hovers, comparison tables/grids, and sticky headers on page scroll. This version also includes a mobile friendly tabbed version for phones and smaller resolutions.

Here's a way to exclude free email domains from using a Webflow form on your Webflow site. It excludes the top 100 free email domains via Javascript.

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

A large product display for Webflow perfect for ecommerce and other product related sites. This product card features a large primary image, product image, and a call to action button.

An advanced demonstration of using Finsweets Attributes CMS Filter using no-code for Webflow. The example includes a search input, sorting, checkboxes, range slider, sorting, drop down, radio buttons and more. A great way to understand the capabilities and advanced filtering options of Attributes CMS filtering.

A custom slider transition that zooms into the next slide for Webflow. A great way to customize the boring slider transition and adding a unique flair to your sliders.

A unique slider animation interaction for your Webflow site. Upon next slide the transition zig zags each slide and loads in the next slide with the same animation.

Here's a way to have a CMS driven music player, with download functionality for your Webflow site.

A simple login overlay panel for Webflow. A clean login UI overlay built with a minimal native Webflow interactions. Perfect for prompting a user to login upon taking an action, such as saving or bookmarking an item.

Here's how to create an infinite marquee within Webflow using no additional code and strictly based on Webflow interactions. There are numerous examples such as horizontal from right to left, horizontal from left to right and vertical in both directions. This technique uses the page load trigger and by wrapping the items in the marquee (of the same size) in a parent wrapper. That parent wrapper then utilizes the move functionality in Webflow interactions from 0% to 100%. You can then customize the duration to slow down or speed up the marquee animation. A great example of relying on Webflow interactions vs CSS or JS methods.

Another great 3D card hover effect created in Webflow. You can change the angle from the transformations and you are also able to change the layout if you wanted.

This is a great cloneable if you'd like for your users to stay on a page without navigating to other pages. This AJAX iFrame modal utilizes GSAP to allow users to create iFrames that load via a modal window when a user clicks on a link via the page. This helps keep users on the primary page without the need to navigate to and from pages endlessly. Keep in mind that this technique utilizes prefetching links, which can cause performance issues on large sites. As mentioned this technique is utilizing GSAP and you can find the custom code within the page settings of the Webflow designer. A clean and relatively lightweight solution to allowing iFrame style embeds of your sites own content that loads quickly, thanks to prefetch and the power of GSAP.

Here's a way to create a layered, blurred div effect in Webflow. The blurred div sits on top of another div and creates a transparent layer that blurs the bottom div. A great way to add depth to your Webflow site and opens Webflow up to all types of possibilities.

Here's a way to create a slick slider type of slider within Webflow.

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.

Advanced pricing table that provides a loading bar indicator for individual features. Includes hover interactions, animated bars, sticky header and much more. This also is mobile ready although be careful about hidden columns.

Here's a way to add a live clock to your Webflow site via the power of Vue.js. Please note that the custom code section is what allows this to work properly. It's also suggested to use some type of preloader for your page as it takes a second to load the clock properly and for the code to execute.

Add a stacking slider as inspired by houseof.world. This adds a fun, 3D effect to your sliders that transitions and moves the cards forward, and to the back upon next slide.

A free Webflow style guide featuring all of the fundamentals that you'd need to build a Webflow site. This includes backgrounds, buttons, cards, colors, elements, fonts, grids, icons, sections and much more. This styleguide was created to be a starting foundation of your Webflow site, ensuring that each element has it's own style guide element to keep consistency and brand continuity throughout your Webflow project.

Pop up contact form modal interaction for Webflow. A clean modal window appears with a contact form when clicking on the contact button. This contact modal form features all the native Webflow interactions required for a modal window in a fully responsive design.

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.

Here's a way to add background video, with sound, to your Webflow site that features a mute/unmute button. This is completed using plyr.js plugin and works on any Webflow site. Perfect for background videos or other sections that require sound/audio but with the ability for users to mute and unmute. Be sure to add the html video embed, as well as the plyr.js code found in the closing body tag section of the Page Settings.

Here's a way of using CSS grid and a small amount of custom code to create a postage-stamp style layout for projects tied into Webflow CMS. A great way to add a custom grid design in Webflow hooked to Webflow's native CMS.

Another amazing Webflow full screen menu featuring a hover over image preview interaction that allows for dynamic images to be presented. This Webflow interaction creates a fun, yet professional animation to your Webflow's menu.

Four different individual text animations created with Anime.js for Webflow. These animations each create an individual letter loading animation on load. Please note that this only works on the published site. To get this to work give a class to the text that you'd like to animate. For example, animation1. Add a span to the text and give it a class of letter. Copy the code on the settings, before body and make sure that you change the class to the one that you used in the first step.

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 great way to add mouse aware, location aware slider navigation interactions to a slider.

Here's a unique contact form designed as a chat widget in Webflow. Perfect for simulating a chat widget on your site without paying hefty fees. This gives the user a feeling of a live chat element that's hooked up to Webflow's native forms.

Eight unique Webflow preloader animations that can be easily added to your Webflow projects.

A massive collection of 180 premade gradients that are perfect for your next Webflow project. This makes adding gradients to your Webflow site a breeze, simply copy the cloneable page with the gradients and then simply add the class to any div and you'll see the gradients added immediately. For example, you can add Winter Neva, a bluish light gradient by adding .gradient-winter-neva to your Webflow div as a subclass. In this massive pack of 180 Gradients you'll find gradients with various styles, such as angular, radial directions, and gradients with a number of different colors. The best part, these gradients can easily be modified to your own specifications as they use Webflow's native gradient functionality and all the presets have already been completed for you. Simply update the colors, direction and settings to create your own Webflow gradients.

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.

A custom slider for multiple images per slide. This allows you to maximize the number of images, or items for each individual slide. Each slide has a transition preview effect and a fanning out animation upon the transition.

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.

Want to add an audio player in your Webflow site? Here's a way of adding a Webflow CMS powered HTML audio player to your Webflow sites. This allows you to add standard browser designs, custom styles and designs via jQuery and much more to your Webflow projects. While Webflow doesn't allow you to host MP3 files natively there are other free external hosting options, such as Dropbox, that will allow it.

A unique slider pricing calculator that updates the pricing table based on the slider options in Webflow. This is a great way to customize your pricing page tailored to the users unique features that dictate your pricing for your Webflow site and service.

A great way to achieve a sticky Webflow effect for features, about sections or really anything in which the image becomes sticky in the viewport while the text still scrolls. As you scroll down the images are sticky while the text is scrollable, between each section there's an image transition effect. This effect uses no custom code and is all accomplished via Webflow's while scrolling into view interaction with the opacity and scale options.

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.

Here's a way to bulid a pricing calculator based on multiple slider inputs to get an estimate/quote for your clients. This is accomplished using the native Webflow slider element and a bit of CSS to style the controls. Values are updated by the sliders as well as by entering in a number within the top input fields. This is perfect for custom pricing and quotes needed on a pricing page.

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.

Add dynamic, auto changing tabs to your Webflow site. These tabs can be changed automatically based on a time interval. Add a dynamic layer to your Webflow native tabs via this unique interaction.

Twenty prebuilt CSS button hover effects to allow you to easily add button hover effects without complicated Webflow interactions. These include a number of unique effects such as marquee text on hover, fade in and fade out, 3D expanding effects, chat widget buttons, rotating and much more. You can add these to your Webflow site by copying the HTML embed with the relevant CSS scripts for the button effects that you want. Add the custom css class to your buttons and you'll immediately be able to view the button effects within Webflow designer. This makes for easy, and lightweight buttons that provide fun effects without the headache of interactions or complicated hover states.

Here's a technique to add IP based geolocation to your Webflow site. This can pull everything from city location, country, IP address, IP timezone, IP latitude and longitude to your site.

Another unique button animation for Webflow. When a user hovers over the button the text color changes and the arrow icon animates via native Webflow interactions.

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.

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.

Easily add a countdown or launch timer to Webflow. With this you can easily add this into your own project. The numbers have separate IDs for Hours, days, Minutes and of course Seconds. To change the time simply go into the Custom code and change the date. The date is in the following format, "2018-09-28-00"

A beautiful, draggable slider for your Webflow site. Some notes about the draggable slider, in mobile view it uses hammer.js for the slider. Images can be updated by changing the attributes found in each <li> item>. The view details URLs can be updated the same way. You can also change the view details and view project by changing the data-video to false. If you want it to say something else you can dive into the code and update that way.

Add a countdown or launch date timer to your Webflow site with this cloneable. Have an upcoming launch for a product or service? Add a countdown timer via this cloneable and JS snippet. Simply update the JS code with the date and time of your event, match the style and make sure you have the relevant parent element ID and relevant divs setup and you'll have a countdown timer. In this example you can show the days, hours, minutes and seconds till your chosen launch time. This is perfect for any product or service page or events page that has a launch time associated with it.

Here are four different text reveal animations on scroll interactions in Webflow. These designs all use custom code via HTML embeds. The four techniques include classic text review on scroll, growing circle mask on scroll, and text in from left and right on scroll.

A custom WebGL draggable slider with 3D effects in Webflow. This is a very unique and cool effect to achieve a 3D expand and collapse between transitions on your Webflow site. You can update the text, links, and images in footer via the page settings. Easily modify the effects speed, frequency and more in the footer via the page settings.

Here is a unique project flipping card animation for Webflow. In this example the cards flip 180° upon clicking on the card, the card also has a hover over animation in which the stars scale in and out behind the image. On the mouse move the image moves around the card. For the stars a 6x8 grid of 50x50 blocks were created and added within two div blocks inside the cross. In the interactions they are set to rotate, scale and loop on hover. On hover out the crosses go back to the original size and stop rotating. For the image moving there is a mouse move over element interaction and moved the image 20px to each side as the mouse moves around the card. On click the card flips via a rotation to the card, so it was placed in a 3D wrapper and added child perspective to it.

Here's a technique to fade text in and out on page scroll with various sections and different texts in Webflow.

A unique scroll-into-view animation that teases the portfolio image as soon as they come into the view port.

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 great example of a CMS slider with custom navigation arrows that are designed within Webflow. It also features a dropdown to filter the slides. This uses the slick slider JS library.

A black and white styled subscription form login for Webflow. This free Webflow cloneable is a sign up/login UI with a textured background, rounded buttons, show/hide password and styled inputs.

Here's a way of creating a product tour in Webflow utilizing native interactions and custom tool tips. Rather than using complicated external JavaScript libraries you. can build your own guided product tour using a simple tooltip design and Webflow's native interactions.

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

I loved how the Ribbon Finance website looked, so I couldn't stop but rebuild it in Webflow with a "party mode" on CTA hover...

Here are six unique, well designed hero sections for Webflow. Easily add a unique hero section to your Webflow site with this copy and paste cloneable.

A unique demonstration of using GSAP Flip & Scrolltrigger to move a video around the page based on the users page scroll in Webflow. As the user scrolls down the page the video transforms and moves in different locations on the page. It grows, rotates, and shifts locations, becoming the background of a section, moving to the right of a card and following the user throughout the navigation throughout the site. This method requires the custom code found within the custom code section in page settings. Utilizing GSAP, Flip.js and Scrolltrigger.js you can customize the locations and targets based on element IDs. Be sure to check the page design as well since there are custom CSS HTML embeds found on the page as well.

A well designed lateral menu animation built for Webflow. When a user clicks on the menu tab the entire menu opens up slowly sliding in to expand over the entire page. This was built using Webflow interactions with no custom code required. There's an interaction animation built for both opening and closing the menu.

Ever wanted to create a previous/next button for CMS items in Webflow? Using this cloneable and technique from Finsweet you'll be able to create a previous and next button for Webflow items so that users can navigate seamlessly between items of your CMS collection.

A simple yet clean header hero component for your Webflow site. This features a large headline, subheadline, call to action and product image section. It also has a basic menu section and is fully responsive.

Here's a way to achieve a dual slider effect in Webflow. When clicking on the next or previous two different sliders will be triggered via the single onlick trigger via a custom button. This clicks on two hidden slider links simultaneously allowing you to maximize the slider transitions and effects.

A card interaction that displays additional information upon click in Webflow. This interaction was built entirely with Webflow's native interactions and requires no additional code. When a user clicks on the card the image reduces size and zooms out while the text information of the card appears.

A Webflow pricing table component featuring tabs on the side for different pricing packages.

A started style guide featuring many of the core elements needed when creating a Webflow site. This style guide features typography setting such as headings, text classes, labels or eyebrows, field labels and rich text. Color options such as text colors, text hovers, fill colors, border colors, form colors for both dark and light versions. Elements such as buttons, icon buttons, submit buttons, text links, inline links, pills, interface icons, text fields, text areas, checkboxes, radio buttons, select fields and dropdowns, containers and spacers as well as additional information about this style guide.

A native Webflow CMS driven slider that uses Splide.js to create unique next/previous buttons and transitions. Splide.js is a popular slider alternative that many Webflow designers use to customize their Webflow sliders beyond the capabilities offered via the standard slider functionality. Be sure to add the custom code found in the page settings for this to work properly.

A unique CSS driven item reveal on hover CMS interaction. Using a simple CSS snippet you can allow for CMS item images to become visible when hovering over a parent item. Simply copy and paste the CSS code to either your custom code page settings or adding it via an HTML embed. When a user hovers over the CMS item an image appears over that specific item. Perfect to showcase additional images and objects that you don't want immediately visible to users but visible upon a hover effect.

Here's a Webflow cloneable component to easily add a vertical step/process section to your Webflow site. Perfect for timelines, process steps or anything that you can think of.

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.

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.

Two examples of creating modal windows using Webflow's native CMS system.

The Mast CSS framework is one of our favorite Webflow frameworks. It's based on a developer first mentality and features essential classes and strategies to help you build efficient Webflow sites. It's built with the less is more mentality, less classes, less elements to maintain which means faster sites and less development time. This framework allows you to quickly build anything from scratch by utilizing an essential set of HTML and CSS building blocks. Get up and running quickly with the Styleguide that features typography, heading classes, body text classes for paragraph, eyebrow text elements, ordered lists, unordered lists, color swatches, text colors, components such as buttons (primary, secondary, text links, form fields with radios and checkboxes, cards, utility classes, padding, alignment, overflow, size, helpers, layout, grids, columns and other helpful items.

A beautiful sign up page created for Webflow as a rebuild of the Linear sign up page. This sign up page features a large Continue with Google button, while the continue with email button shows the email option after being clicked. This page features a well designed layout with custom buttons, hover effects, input fields and more.

Here's a technique demonstrating spinning, 3D circle divs based on mouse movements via Webflow native interactions.

Looking to create breadcrumbs for your Webflow ecommerce CMS? If you have more than a handful of products in your Webflow ecommerce site you'll need a way to organize those. Here's a free Webflow cloneable to help you understand how to create breadcrumbs for your ecommerce projects.

Here's a way to add a rotating outline for buttons in Webflow. A unique and eye catching animation that draws your users attention to important buttons on your Webflow site.

Add a background text clipping effect to your Webflow site. This allows you to use any image as the text colors/styling by adding a clipping effect that allows the image to pass through the text.

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.

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.

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.

Custom product image slider featuring animated image transitions

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 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 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.

A thorough guide and technique for freezing scroll on the page on a modal popup. Closing the modal via the background click or by clicking on the close icon closes the modal and makes the page scrollable again. This is a thorough tutorial that helps understand the process, and how to implement the technique on your site.