Discover Webflow cloneables

Here's a way of adding a flipping card animation to cards on your site. This component can be used for a number of scenarios and allows for additional information to be displayed on your cards without taking up important site real estate.

A demonstration of using Swiper.js in a hero section. This is also mobile friendly by becoming full-width.

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 free cloneable of the Dezin style guide for Webflow. This contains everything you'd need for your Webflow site, including color palettes, surfaces, typography, buttons, form inputs, iconography, images, video embeds and even tabs. This is a great way to kickstart your Webflow sites and build a faster, and more cohesive designs.

This is a unique interaction in which images reverse movement based on mouse location in Webflow. There are two images facing opposite directions on both sides of the screen. When ou move your mouse on the x axis the images get further and closer apart. It's a very simple effect but can be modified to create endless opportunities. This used two identical images to save on load time and one was flipped horizontally on the y axis. Both images are set to overflow hidden. Then in interactions a mouse move in viewport interaction was applied to both images and they move on the x-axis.

A wonderful CMS image gallery powered by Webflow's native CMS system. This is a great way to add a lightbox styled image gallery that's driven solely by Webflow CMS. Upon click of an image a full page modal window is displayed with other image thumbnails able to be clicked on and viewed within that modal.

Easily add a tooltip to your Webflow site with one of three different premade designs. These tooltips come in three different variations and include the necessary interactions required. The tooltips feature every possible direction needed, from left tooltips, right tooltips, top tooltips and bottom tooltips.

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.

A unique input label animation for Webflow. When a user selects an input the label moves letter by letter above the input field. A unique way of adding animation to what would typically be a static input label. This uses some custom code to animate the labels and CSS to style the valid inputs.

A unique, staggered page transition that's created via. custom piece of code that allows the page transition to happen in Webflow.

A full page kinetic slider for Webflow. When a user hovers over the slides the images the images morph and act kinetic.

Showcase and feature your CTA by adding moving lines to the border in Webflow. Using this technique you can showcase anything that you want to draw the users eyes to by adding moving lines and a 3D hover rotation to products, cards and other important aspects on your site.

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

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.

Want to add a countdown or number count up to your Webflow site? Clone this easy and free prebuilt counter animation in Webflow and get it up and running in minutes.

A fun 404 page for Webflow featuring a scrolling marquee and unique hover over interactions. This is a rebuild of the pluto.app/404 page. Featuring various scrolling marquees at different speeds with a gradient background and mouse hover link interaction.

Here's a way to add a simple MP3 audio player that hides the browsers default audio controls and works seamlessly with Webflow's CMS collections. This does require some custom code in order for this to work and you will need to host your MP3 files externally as Webflow doesn't allow MP3 filetypes. Be sure to add the custom code found within the head and body tags within the Page Settings.

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.

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.

An implementation of Locomotive.js smooth scroll in Webflow that includes position fixed, sticky and CSS interactions. Utilizing Locomotive.js smooth scroll allows for some unique interactions and scroll effects. You can find the script within the custom code page settings. Here you can modify the smoothing, mobile smoothing, tablet settings and the multiplier applied. You can set the time frame and for the ability to use anchor texts between sections of your site. Add a unique smooth scrolling effect to your Webflow site today by taking advantage of Locomotive.js

Here's a way to add zoom in images on click via a native Webflow interaction. Custom code is involved to disable/enable the body scroll only. Be sure to copy the custom code for the body scroll toggle on modal pop up. This is perfect for showcasing a product where zoom-in is required to view the close up details of that product. The interaction works only for desktop and on mobile it will only be normal image without the zoom in effect.

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.

Five different variations of an image appearing when hovering over a link, or item. In the first example when a user hovers over the item the image stays in line with the text although slightly follows the users mouse. In the second version the image follows but at a different section and with a different image dimension. In the third example the entire div has an image appear from the bottom and changes the background of the item. The following demonstrations changes the entire background of the page to an image. This demonstration and cloneable was built entirely from Webflow interactions and doesn't use any extra custom code or HTML embeds. These examples rely on the Mouse move over element for the triggers.

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.

Here's a way to create a multi-step Webflow form that includes a step counter, custom confirmation animations and custom checkboxes. A perfect way to filter leads, create long forms that are filled out, and segment your lists/clients.

Box shadows aren't the easiest thing to create in Webflow. Here are 6 different box shadows ready to go and to be added to your projects.

Here's a unique way of adding count up odometers to your Webflow site via Hubspots odometer library. This cloneable includes several features, count up by 1 in a fixed interval, trigger odometer via GSAP Scrolltrigger, currency options, interval increase by own value, interval increment with a randomly generated number in a range, show numbers on a button click and a tutorial of how to make it work.

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.

Here's a fun text effect in which the text fades away on mouse hover in Webflow. A great way to add a dynamic animation interaction to your Webflow site.

Just about every kind of payment method badge, icon or image you'd need for your Webflow site. This includes payment methods like PayPal, American Express, Visa, Google Pay, Apple Pay, Visa, Stripe, Mastercard. They include images with backgrounds, no backgrounds and much more.

A full SaaS pricing table design for Webflow. This pricing page includes a monthly/annual pricing table, features sections, accordion FAQ and much more. This includes a fun hover interaction, updated page copy and font styles.

A stunning membership pricing table perfect for your Webflow site. This pricing table is based on a revised Flowbase design with unique hover interactions, removed/cleaned up class names, updated page copy, new font sizes and memberstack integration. This utilizes an orange and dark blue color scheme, 3 column pricing table with a header.

A perfect way of adding login and pop up modals to your Webflow site. These sign up and log in modal windows are well designed with custom form inputs, buttons and open/close interactions.

A custom page transition for your Webflow site created with Webflow interactions and a bit of custom code. This transition provides a nice, multi level swiping transition from left and then back to the right.

Backdrop filters for Webflow that show three different background effects including inverting colors, saturating colors, hue rotation, and grayscale created by Finsweet. This cloneable was created to showcase Webflow's latest native backdrop filters.

Here's a fun example of creating an animated image on scroll effect/interaction in Webflow.

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.

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

Here's an example of implementing three.js animated interactive road on your Webflow site. Three.js is a great way to add interactive, 3D effects to 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 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.

An amazing background color changing on timer for Webflow. The background color changes automatically based on a timed interval of your choosing. The animation uses a small snippet of JS within each page. In order to change the colors you will have to change the hex code in the array.

An automatic timezone clock for cities around the world in Webflow. This shows the current local time for your city and then keeps it up to date every 60 seconds. Custom CSS was used for the blinking effect on the clock. Here's how it works. It uses the data attributes to define the timezone. Custom code is then used to display the local time of your city. There are separate colors for open, evening and closed office hours. These can be styled through their respective classes however you'd like. Find your timezone via timezonedb.com/time-zones. The location row element contains the data-timezone attribute, change that to your timezone. Everything else will auto update.

A unique horizontal scrolling technique created for Webflow and built using a combination of Webflow interactions, custom CSS code and jQuery. This allows you to add horizontal scrolling to your Webflow site, this cloneable also features a page loader and a mouse cursor interaction. As you scroll down the page you'll notice the horizontal slider that also features parallax style effects, there's a unique text outline stroke effect. Each section is driven by Webflow CMS which allows you to easily add or remove pages based on your needs and requirements. This was built to work on both mobile and desktop devices making it responsive for any size browser.

A simple, yet elegant two package pricing page template design for your Webflow site. Get up and running faster with this wonderfully designed pricing page design template. Perfect for a service or offering that has two different pricing structures such as a freemium model.

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 technique to create a text outline via an image mask technique within Webflow.

A unique gradient hero text animation in which the text of the hero section becomes a gradient a timed interval. This technique uses Webflow native interactions and a little bit of custom code.

A unique menu/navigation video hover effect in Webflow. When hovering over a menu item the text enlarges and scrolls a larger description while playing a background video. A way to customize your menu and add stunning animations and interactions to Webflow.

A beautifully designed estimate, investment portfolio, quote page in Webflow. Perfect for an investment portfolio/funds, or anything requiring detailed investment/financial quote structures. With a little bit of work this could be made both responsive and CMS driven, allowing for clients, employees or others to make this for internal sites.

A simple yet fun Webflow interaction in which a custom cursor becomes visible upon item hover. This technique utilizes Webflow interactions but does have a small CSS snippet HTML embed, so be sure to add that. This example utilizes Webflow interactions Mouse hover events. When the mouse moves over an object the pointer scales accordingly. This is a fun, lightweight example of adding even more unique animations and interactions to your site.

Here are a collection of 16 different footer designs, all responsive and fully customizable and ready to be added to your Webflow sites. A great way to add a footer to your site quickly.

A frequently asked questions FAQ expanding accordion interaction for Webflow. The interaction expands and then collapses the accordion based on each click.

Add all countries to a dropdown in your Webflow forms. If the dropdown/country isn't selected the form will produce an error state. With this project you can copy-paste the custom <select> code. There are three different variations of the dropdown. 1. With Emoji flags 2. Without Emoji flags 3. Without the Nice select Please note that the countries are loaded via JS and won't display in the editor.

Here's a way to dynamically change font size on click. This allows you to offer different font sizes for content for your viewers and readers. A wonderful technique to help accesibility of your Webflow sites.

A unique demonstration of the capabilities of Webflow interactions to create an animated solar system. This demonstration utilizes primarily Webflow's native interactions and rather simple interactions to demonstrate the rotation of the planets in our solar system. What seems like a rather confusing and extensive site is built using Webflow's native interactions and simple timed rotating interactions.

A beautifully designed pricing page for recurring services in Webflow. The pricing page template has monthly and annual toggle interactions, additional perks/plans/discounts information, an accordion FAQ, footer and navbar.

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

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.

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

A horizontal scrolling timeline of events driven by Webflow CMS. You can navigate through the timeline both vertically (below) and horizontally. Both lists stay in sync. The vertical section shows more notes and links regarding the timeline events. This timeline is CMS driven and there are two collections, one for the events and one for the categories of each events. Each year of the timeline is made out of one collection list. There is more info on how this works at the bottom of the page, specifically how the CMS and CSS calc work. This could be great for about pages, client timeline pages, and much more.

A recreation of Headspaces navigation/menu in Webflow. This free cloneable features a fully responsive navigation with hover effects in Webflow. It features a mega menu style hover interaction with unique menu item hover effects. A beautiful mega menu that'd be a perfect starting stone for your Webflow project.

Four separate stats sections for your Webflow site. Each of the stats sections are well designed, and unique to help show stats of your product or service on your Webflow site.

A styleguide for Timothy Ricks Wizardry technique in Webflow. This styleguide will add the core elements of the Wizardry technique to your Webflow site.

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

Here's a way to add a dropped in text underline on hover in Webflow. When you hover over the multiple lines of text an underline interaction is triggered and the underline appears over the text.

This is a demonstration of Webflow's new blending and backdrop effect filters in action. This cloneable features both blending and backdrop effects in a fun art quiz. The artwork that's being questioned is covered by the Screen blending effect with a Blur backdrop filter over it. When a user selects an answer the blending and backdrop filter is removed to showcase the artists artwork.

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

A starter style guide to help develop the most important part of your site, a thorough styleguide.

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.

A fun way of adding a canvas cursor tracking element via HTML canvas to your Webflow site. With a bit of JavaScript you can add a fun cursor tracking effect to your Webflow site. Be sure to add the custom JS code found within the page settings for this to work properly.

Here's an example of a menu with a slide in interaction and that features a background video for the menu. A fun interaction that adds some depth and liveliness to your Webflow site.

An example of integrating locomotive scroll integration in Webflow

Here's a unique way to add transition animations to a full screen slider. Using both Swiper.js and a GSAP animation script.

This is an interaction that displays an image on hover via a unique interaction in Webflow. Add this animated hover interaction to your Webflow site to add a dynamic interaction for your images.

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.

Here's a minimalistic 404 page design with a doorknob hanger sign animated via Lottie files and interactions.

A real estate hero section design for Webflow. This hero features a custom load animation, call to action buttons, fully designed slide in menu/nav bar and much more. This features a JS snippet to disable scroll once the menu is open, which can be found in the home settings before the body tag.

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.

Here's a unique and fun button with border animations in Webflow. Initially the button looks rather basic, however with a few line animations it makes this button really pop. The lines were placed within wrappers and set the wrappers to an overflow hidden. The move animations to each line was added to control which direction the lines came in from with the different hover states. Scaling the lines doesn't allow for transform-origin to be changed on the different states, hence why the move option was used instead. There are 6 line wrappers with lines inside of them and they are all placed on different sides of a button with a position of absolute.

Here's a clean, beautiful language toggle button that can be implemented on your Webflow sites. There are hundreds of flags that you can match with any language you may need.

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.

Here's a product card with image zoom on hover for Webflow. When the user hovers over the product image it scales up and zooms so the user can see more information about the physical product. This was accomplished by placing the image div inside of a wrapper with an overflow hidden. When the user hovers over the image wrapper the image div scales up to double the size. Then with the mouse over element interaction the image moves in different directions when hovering over the image wrapper. This allows the user to hover around the image to see different parts.

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

Here's a way to add a control panel animation to Webflow similar to the Apple control center. There are two animations that still need polishing however this is a great way to add a unique navigation menu to your Webflow site.

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 responsive dropdown navigation menu for Webflow. An easy cloneable that can be added to your Webflow site to get your navigation up and running quickly. Best of all it's already responsive and mobile ready.

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

A rebuild of the popular Wordle game in Webflow. This game also has a hidden Webflow mode, which when activated changes the dictionary to only include CSS, HTML and all things Webflow. The interactions, popups, word lists & attributes are all within Webflow. This rebuild is based on the same rules as Wordle, you have six tries to guess the 5 letter word. The exception being that each time you refresh the page you can keep playing as the word changes.

Here are well designed service cards that have a rotation hover interaction that highlights and rotates the card for Webflow. This perfect for adding 3D dimension to a Webflow site via service cards, project cards or even pricing tables.

Here's a way of creating an autocomplete style search input in Webflow via a small JS snippet. This is perfect for giving your users autosuggestions as they search based on items within your native Webflow CMS list. Be sure to add the custom code found within the closing body tags of the Page Settings for this to work properly.

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.

Stop those pesky videos from playing in the background when the modal or popup has been closed by the user. Apply this to your sites body code and view the instructions in the following loom video: https://www.loom.com/share/ae76cd611f604de5af8cffea8b25efa3

A simple and clean Hero section for a Webflow site that features content on the left and a large lottie hero image on the right. A perfect lightweight and clean Hero design perfect for any SaaS or tech company. The Hero section has a bold statement, two buttons and a large demonstration Lottie image. The design is fully responsive and can be used used to add a hero section to your Webflow sites landing page in seconds. This also uses Webflow's interactions for a unique logo animation on page load. This cloneable does not use any custom code or HTML embeds so adding to your site is super simple.

Here's a way to create a feature section that highlights the text and changes the image based on page scroll. This was created with 100% native Webflow interactions.

Unleash the power of GSAP Scrolltrigger toggle in your Webflow projects. This allows you to create complex, and yet lightweight effects powered by both GSAP and Scrolltrigger. This CMS powered GSAP & Scrolltrigger effect showcases a hero section in which three different slides transition between each other based on the users position on the page. After the initial hero the second section features different words and images that ease in and out based again on the users position on the page. These sections are utilize Webflow's native CMS to power each slide. You will find the custom code that powers this under the pages custom code settings and it allows for you to customize the items, the trigger element, the timeline and mobile friendly attributes.

Here's a way to transform text with Webflow without using any SVGs or custom code. This text effect is accomplished with text & divs and mixing those with some move and rotate transforms with the overflow property. A unique approach to creating vibrant text effects within Webflow.

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.

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.