Discover Webflow cloneables

A way to achieve a 360 degree spinable book. This was built with CSS grid, responsive typography, 3D transforms and custom CSS properties.

A bouncing, parallax effect draggable slider for Webflow. When you add this to your Webflow site you'll be able to create a dynamic, parallax style bouncing effect to your Webflow slider. The native slider is left intact so you should be able to integrate native Webflow based scroll interactions. This does not work on mobile devices. Consider Webflows native slider for mobile.

A unique collapsing text Webflow interaction that utilizes native Webflow interactions and custom CSS for the text shadow effect. This is perfect for hero sections or areas where you'd like to add unique text animations. This utilizes Webflows page trigger interaction with when page starts loading. Using a few different divs and two text elements you're able to produce this looping effect on your Webflow site. A powerful yet easy to implement interaction that will make any Webflow site pop.

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.

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 an example of how you can integrate Mapbox into your Webflow project to help create an interactive storytelling experience. This is a great way to create an immersive map interaction while scrolling to different sections on your site. Perfect for giving the history of a city, providing a guided tour and much more. You will need to replace the Mapbox with your own API credentials. Unfortunately this isn't optimized for mobile yet.

This is a unique way of adding Curtain.js WebGL slider to your Webflow site. This allows for a variety of transitions and change effects not available to the standard slider. This is based on Curtain.js and is fully customizable in both shape and size, it's also responsive behaving like CSS cover. There are many options from autoplay to buttons, transition duration, displacement maps and even pixel distance, built in easings without libraries.

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 achieve a unique hero section using grid and the Wizardry method in Webflow.

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

A unique card hover animation in Webflow that creates a 3D parallax style interaction. A great example of what can be built using Webflow's native interactions. When hovering over the card a two layer parallax effect is shown with the top transparent purple layer separating from the bottom image layer. Both layers seem to transform in a 3D space while the Name and Title moves at a different rate than the other two cards.

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.

Want to add a range slider to Webflow? Here's a way to add a range slider inside Webflow using Finsweet's Attributes. This slider can be used for either forms or filters on your Webflow projects. Please note that you'll need to add a custom JS library found within the head tag in order for this to work properly. Also check the documentation in order to ensure you've set this up correctly.

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.

Here's a way to add a full page, horizontal accordion to your Webflow site. Using this method you can change the traditional horizontal accordion design to a full page, vertical accordion. Please note that this uses custom code found within the body section of the Page settings.

Three different link hover effects perfect for a menu on Webflow. These three effects create an image hover distortion using three.js.

A non-boring, full width image link with hover interactions in Webflow. A perfect way to add a full width section with unique hover interactions for your Webflow site. The bottom one is the one you'll want to copy and paste and use in your Webflow projects.

A unique way of adding dynamic and animated portfolio items to your portfolio page. These bubbles automatically float up and include mouse interactions to access different pages.

A drag and drop interaction for Webflow. This turns the elements into draggable and droppable objects on your Webflow site. A great way of adding some unique interactions that bring your site to life. Please note that there is custom code in the closing body tag and a style embed.

Here is a simple branding style guide that you can use for your Webflow projects and clients sites. This helps your clients, or yourself, create branding guidelines that will be used for all marketing and site materials.

Six different wonderfully designed material style navigation menus and footers for Webflow. These are perfect cloneables to quickly build either navigation menus, footers, or both for your Webflow site.

A demonstration of how to create a magnify on hover image effect on Webflow. This is built entirely with interactions and requires no custom code. Please note that this method only works on desktop and will not provide the zoom effect on mobile.

A wonderfully designed pricing comparison table with everything you'd need to showcase and feature a pricing page on your site.

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

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

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

Here's a fun example of a hover interaction for a menu or navigation in Webflow. When hovering over the links different images are displayed in the background of the site. There is also a hover underline under the text, with different colors for each link.

A simple yet effective CSS infinite marquee for Webflow featuring hover pause capabilities. Easily adjust the animation duration via the embed element with CSS. While you could create the marquee effect with Webflow's native interactions this allows you to bypass added JS through a simple CSS embed allowing for greater control over the marquee via this CSS script.

A modern, full screen menu with a slide in animation as well as hover over text effects.

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.

A simple, yet modern material design pricing table for Webflow. This pricing table features a large headline, three pricing options with features and a unique offset design aesthetic. The cards also feature a hover over button interaction which changes the call to action button. A great designed pricing table that can be easily added to your Webflow site.

Learn how to implement GSAP ScrollTrigger in Webflow. This tutorial and example cloneable showcases several different Scrolltrigger GSAP effects to turn your Webflow site into a dynamic powerhouse. When loading the page you are presented with a primary image and brand name. As you scroll down the brand moves from the bottom of the page to the top menu while reducing size. Further down the hero section appears and one of the words begins to move behind other text. Further down an image appears and then grows as you scroll further down the page. This shifts into the product section in which images appear with a parralax effect over certain words. This shifts into another product section and the backgrounds transition while the images still float above the text. Each section has a different background color/text color with the images continually scrolling above the text. This utilizes a lot of custom code, and utilizes Webflow's native CMS for products and items found on this page with CSS nth-child. You will need to add the custom code found in Page Settings to get this to work properly. Watch my GSAP Scrolltrigger tutorial for this project at https://www.youtube.com/watch?v=x-BVEhyYW50 Conceptual design for https://www.minimalgoods.co/

A free Webflow membership login page design cloneable. This login and signup template comes with gradient border outlines, border interactions to create a shine effect, show/hide password, drop shadows and a simple nav bar and footer.

This is a fun mouse cursor effect that creates an artificial spotlight effect in Webflow. Simple settings with mouse movement interaction. There are two versions, shadow and white on white. Any color or text is possible.

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

A custom, full page slider for Webflow created with custom dots and transitions that displays the active slide number. The entire slide is based on Webflow's native CMS system, Webflow's native slider and a bit of custom CSS and Javascript to tie it all together. Please note you'll need to add the custom code found in the page settings (header/body) in order for this to work properly.

A fun way of adding a stair melting text transformation animation on hover in Webflow. Perfect for adding a dynamic layer of text to your Webflow site's header or headline section.

A full set of beautifully designed interactions in Webflow for your projects. These interactions include buttons, play buttons, search, toggles, hamburger buttons, toggles, social sharing and much more.

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.

Three different simple page transitions for your Webflow site. These are simple transitions achieved by barba.js. The script can be found on the home page script.

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

A copy and paste GDPR compliant cookie consent widget. This Webflow cloneable features a pre-made and GDPR compliant cookie consent widget perfect for your Webflow site. This method stops all scripts from loading, requires no javascript editing and utilizes Webflow's data attributes and works with Webflow interactions. You can create multiple options for the levels of cookie consents and this cloneable comes with 5 different variations of the cookie consent, one that utilizes Webflow interactions. This is a complete solution to allow you to properly validate your users cookie experience based on GDPR requirements.

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.

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

A fun way of adding a little retro 3D grid animation with overlay scan-lines to your background/site.

Here's a way to block internet explorer visitors from your Webflow site and provides a module that encourages them to download a more popular and up to date browser.

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.

Here is a pressed state effect for buttons like the Google Material design system. Upon clicking it the button has a ripple effect allowing for the user to understand that the button was clicked and an action was performed.

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

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

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.

Add custom radio button designs to your Webflow site with this cloneable. These customized radio buttons require no custom code and use Webflow's native interactions to accomplish a unique, radio icon free design.

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.

An incredible, full page slider for Webflow. This custom slider features custom next/previous arrows, slide transitions and text description location all driven by Webflow's native CMS system.

An expanding side menu that opens up on the right side of the page on click in Webflow. A fully designed with interactions menu/navigation bar that opens on the right side of your Webflow site.

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

A stunning and easy to implement Swiper.js draggable slider created for Webflow. This slider is completely draggable for both desktop and mobile devices, when the next slide is triggered there's a slide in feature that is powered by Webflow interactions. This makes the next card appear to slide in upon being visible. Swiper.js powers the slider and allows for custom functionality such as speed, looping, breakpoints and much more. Keep in mind that this utilizes data attributes to work properly so you will need to update each slides data attributes in order for the Swiper.js functionality to work properly.

An infinite slider design for Webflow built using Webflow's native slider and interactions. This fully responsive Webflow slider features unique hover over interactions in which the next and previous navigation appears only on hover. The slide continues endlessly by looping to the starting slide upon finishing the rotation.

A sticky horizontal scrolling timeline container for your Webflow site. This is a combination of sticky position, overflow-x hidden and a scrolling in view interaction. This is perfect for timelines, milestones, process steps, about, history and much more.

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 CMS driven hover slider for Webflow. Swipe on mobile or use your mouse to navigate on desktop.

Explore techniques for implementing unique Webflow CMS sliders via Swiper.js. Flow Ninja built 8 different slider options including a basic slider, a thumbnail slider, infinite loop swiper great for client logos, auto height, pop-up modal sliders, grid sliders, vertical sliders and a number pagination slider. These prebuilt Webflow sliders utilize Swiper.js to operate correctly so it's important to add the code implemented in the head tag and closing body tag found in the Page Settings for this to work properly.

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.

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.

Here's a unique Webflow mouse hover interaction in which the background changes based on the location of the mouse on the page.

Here's a concept design of a 3D contact form that follows the mouse on the page in Webflow. An interesting interaction that may help provide some inspiration for other methods on your own Webflow site.

Here's a fun glitch style effect for your Webflow site. With this CSS effect the entire page, text and everything will appear to glitch randomly. It's a fun way of adding dynamic effects to your site.

A fun interaction animation that adds confetti. Click on the waving hand for the demonstration.

A great way of adding a date/calendar picker to forms or other elements within Webflow. Provides the essentials to get it added in 30 seconds and easily configurable based on your own style. Inherits the <body> typography. Please note that the date picker does require custom code found within the Page Settings. This utilizes Datepicker.js to create the date picker and the styling allows you to further customize the styling.

This dynamic range slider takes a number and calculates the output into a certain number of images in Webflow. A perfect way to implement a range slider with dynamic images based on the clients input and your output settings. Perfect for charities to display the impact of donations of charity donations.

Here's a walkthrough and tutorial of how to build a contact form in Webflow. View the tutorial here: https://www.youtube.com/watch?v=H8-fbOJpC5I

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

A method to create more dynamic and interactive experience by allowing your users to view a simple cursor animation powered by GSAP and Cuberto Mouse Follower. This utilizes custom code so you'll want to make sure you check the pages custom code section for stylesheet and JS code. This combines the power of GSAP and mouse-follower.min.js to create a smooth mouse following animation. With this you can modify the MouseFollower scripts speed, skewing and skewingText functionality to your specifications. Unlock the power of GSAP powered dynamic site elements for your Webflow site today.

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.

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

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.

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.

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.

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

Easy to implement looping lightbox via jQuery for Webflow. All you need to do to implement is copy the code from the page settings. Add fo-lightbox class to all lightbox elements. Publish the site to see the results as it won't work in designer. This method utilizes Webflow's native CMS for the images and the custom JS code provided in the closing body tag of the Page Settings.

A great example of a slide in full page animated menu with mouse hover effects.

A very cool, custom OGL cursor effect for Webflow. You can edit the speed, count of lines, friction, colors and other settings. A fun and dynamic cursor effect for your Webflow site.

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.

An excellent way of adding a customer review/social proof CMS component to your Webflow site. These reviews work perfectly with Webflow's native CMS and is also responsive and mobile friendly.

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.

An info card for Webflow that features hover over interactions. This free Webflow cloneable features cards with unique hover over interactions. When a use hovers over the card the image turns from black and white to a color gradient overlay and an information block is shown with additional information about the post/card.

Here's a way of adding text above a div on mouse hover in Webflow. This method allows you to add floating text that follows the mouse on div hover. This also keeps the text in line within the specific div that you are hovering on.

An interactive dark corner opt in modal for Webflow with interactions for close. Easily add a corner style, email opt in pop up modal to your Webflow site that includes all necessary interactions for closing the modal.

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.

Add a fully responsive preview of your Airtable database in Webflow

An exploding text particles animation using Three.js in Webflow. A good demonstration of how to add Three.js to your Webflow site. In this cloneable the text begins to morph and explode as you move the cursor over it. Please note that this uses custom code found in the head and closing body tags of the page settings.

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

A unique headline animation for Webflow powered by Anime.js. The headline text sweeps in from the bottom one letter at a time and after displaying the line sweeps out one letter at a time with a fading effect. In order for this effect to occur you'll need to be sure to add the custom code in both the head and closing body tag in Page Settings. This is perfect for a preloader page or temporary scrolling section.

Here's a technique to add an infinite spinning record image to your Webflow site. Perfect for a music site, DJ, or media style site. This method could also be used for a variety of other interpretations.

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.

A CMS based Pinterest masonry grid design for Webflow. This unique styled masonry grid is powered by Webflow's native CMS and provides unique hover over interactions.

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.

A simple pricing table with a three column design for Webflow. This simple pricing table features a blue design with gradients, animated circles background, and a primary pricing package with features options.