Discover Webflow cloneables

Looping lines and wires on page scroll via background animation all through Webflow interactions. This interaction adds a fun background animation to your Webflow site that creates lines moving randomly in different directions on your Webflow's background. As you scroll down the size of the lines grow gradually larger.

Here's a beautifully designed rotating testimonial slider in Webflow. A great way to build trust with your prospective clients. This testimonial component will auto slide between your testimonials with a smooth transitioning effect.

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

Ever wanted to achieve slanted/diagonal sections on your Webflow site? With this no code technique you'll be able to create a Webflow section that isn't flat but has a slant or diagonal edge between sections.

Here's a nice hover over interaction for a product card for your Webflow site. Upon hover over of the card the text fades behind the card and the image/product is grown on top of the text.

A fun demonstration of how to use jQuery to create a draggable canvas or game. This utilizes custom code within the page settings and will not work on mobile.

A simple, interactive scroll text mask technique for Webflow. As the user scrolls down the text moves in separate directions created through a Webflow interaction. The text has a masking effect which can be found on the parent Track div. A great example of Webflow's native masking capabilities.

Five different image mouse trailing effects in Webflow. When a user moves the mouse cursor on the site the images pop up and follow/trail the cursor. These different effects allow you to add a new layer of dynamic elements to your Webflow site that open up all types of possibilities.

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.

Never change the copyright year or other year on your Webflow site again. With this simple javascript code you'll be able to have years automatically update on all of your Webflow sites. Simply add the custom code found within the body tag section in Page settings, identify the div, and you're all set.

Here's a great way to add a dynamic, image changing section based on scroll in Webflow. The left section is absolute image that changes as you scroll down the page further.

This technique allows you to redirect a user to a URL of your choosing after submitting a form on Webflow.

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.

A template for building your own brand design system and/or styleguide created by 5Four Digital. A design system/style guide is a single source of truth which groups all of the design elements for development.

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

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

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

A three tier pricing table design with a floating primary central div for Webflow. Perfect to get your Webflow pricing page launched quickly with three different packages, shadows, and button hover animations and a fully responsive design.

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

A fast and easy way to build your own styleguide in Webflow. This starter style guide is organized in one page and setup with the basics of all of the critical elements you'll need. There's also instructions that help you better understand how to create your own style guide in Webflow.

A light interactive Chrome mockup browser window created in Webflow. This mockup window features a number of unique native Webflow features to build a fully interactive Chrome mockup window for your Webflow site. A perfect way to demonstrate product images, product demonstrations and more.

A great way of adding a dynamic, conversational style contact form for your Webflow site. Add some flare to your contact forms.

A couple of easy to implement splash games for your Webflow 404 pages. Entertain your Webflow site visitors with these fun splash games.

A unique pricing table with tabs to rotate between different packages in Webflow. This pricing table offers a unique design pricing packages that utilizes a tab style pricing table to change between different pricing packages. The pricing table defaults to the cheapest tier, and the more expensive plans are hidden behind a table style button. Featuring 3 different pricing packages and unique transitions between each package. This pricing table features a large header, three packages, and unique rounded design.

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 well designed hero section that offers 3D styled product demonstrations with hover over interactions. Perfect for a startup or services company that wants a fun, well designed hero for their homepage.

Three different unique menu nav bar designs for Webflow. The three designs feature unique hover dropdowns, buttons and designs for your Webflow site.

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 unique 404 page design for Webflow. When a user visits the 404 page the mouse cursor creates a spotlight effect that displays an apology with 100 different languages.

Here's a way of using a math problem for a captcha in your Webflow forms. This allows users to create a basic math problem prior to them being able to successfully submit their form submission. All math questions are randomly generated.

Here's a demonstration of using three.js for the background of your Webflow site.

A great way of creating repeating patterns for your CMS grid items using CSS nth child. It's also responsive!

Five different styles of animated and interactive social media share buttons for Webflow.

Examples of creating mouse over 3D text effects with Webflow. The text letter effects is created via a Mouse move interaction and the rotate effect. All of the interactions are created with Webflow's native interactions and no custom code aside from a small CSS snippet for pointer events none.

Here's a way to create a rotating image on page scroll in Webflow. Perfect for portfolios, products images, and much more.

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.

Nine different video play button animations ready to be cloned to your Webflow site. This allows you to add dimensions and CTA's to your videos on your Webflow site.

A unique colorful gradient background animation technique to add some flare and depth 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.

Custom cursor particles effect for Webflow. When a user moves his mouse over the page custom particles are shown trailing the mouse. A fun, dynamic interaction that adds some animation and life to your Webflow site. This is accomplished via Sketch.js

Here's a way to add a custom, social media sharing hover interaction to your Webflow site. When a user hovers over the icon on the page a social media sharing interaction is triggered that displays 4 different social media sharing sites.

Unfortunately Webflow's native component switches between tabs can be rough on the eyes and somewhat jarring. Using a bit of CSS this cloneable allows for a smooth transition between tabs with visual images by using a small snippet of CSS to override the default tab transition making for a milky smooth transition.

Here's a technique to lock the page scroll on a modal pop up window in Webflow. This is useful to ensure that the page doesn't scroll when a popup CTA modal window or mobile navigation modal is shown on your Webflow site.

A great category card hover animation/interaction for Webflow. Adding this effect to your Webflow site creates a custom card animation/interaction effect. When you hover over the card the circle scales up to fill the entire card with a color and then the border color becomes white. The text also becomes white to be more readable on the background color. This effect is achieved by placing an inner circle, circle border, and an icon within a circle wrapper. With interactions the circle scales up, and the border and background circle change color on hover. Each card has a unique and separate mouse out interaction so that it can revert back to the individual cards color.

A complete pricing table driven by Webflow CMS. No need to customize pricing, features, or images. All of it is being driven via CMS to make it easy for you or your clients to update their pricing information.

Want to use Tabs with Webflow sliders to show off your products? This cloneable allows you to showcase a variety of products via tabs with sliders on each internal tabbed results. A great way of displaying a large number of products in a small area.

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.

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

A demonstration of a spiral galaxy via three.js in Webflow with a GUI control panel. In this example you're able to manipulate the spiral galaxy animation and customize the settings. A great way of testing/playing with this three.js technique to find the best settings for your spiral galaxy.

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 full page iPhone mockup design for Webflow. A great way to add an iPhone mockup design to your site with all of the elements already designed for you.

Here's a way to add a nice gradient color transition for a button on the hover state. This is accomplished by using only Webflow interactions.

A custom javascript solution to a CMS stacking slider in Webflow. This custom Javascript CMS driven stacking slider works great, although may be a bit confusing for beginners. It utilizes custom Javascript and utilizes Custom attributes in order to work properly. When a user clicks on the next item, the text description in the header changes and the next image is shown. This requires two different CMS collections, one for the content and one for the images. You'll need to add 2 attributes and 1 HTML embed into the CMS collection for the images and utilize the proper class names. Update the slider navigation buttons and assign the custom attributes. Overall this is a great slider but is tailored to someone familiar with Webflow.

A unique slider that provides functionality support not found in my other sliders in Webflow. Including responsive, swipe gestures, keyboard arrows. Easy to customize simply copy and paste the slide item to add more items. Place content within the content wrapper. This slider utilizes Slick Carousel to create the slider and thus requires you to add the custom JS code found in the closing body tag.

A unique effect using Scrollify.js and tabs that scroll/ease in content based on the tab selected in Webflow. Using this method you can create a tabbed section that can be accessed via click or by scrolling down the page. When you scroll down the page the selected section will become highlighted to signify which section you are currently viewing. This method utilizes Scrollify.js so you'll need to add the custom JS found within the closing body tag.

Another cloneable pricing component created by Flowbase. This version includes tabs for three different variations of pricing.

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

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

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

Three different call to action CTA sections designed for Webflow. These are designed to help increase your conversation rate and drawing attention to important call to actions on your Webflow site.

Using the MetaMask API and Web3.js you can send Ethereum via Metamask in Webflow. In order to get this to work properly you need to add the custom code found in Page Settings before the closing body tag.

A Matrix style text scramble effect in Webflow. This entire effect relies on custom code which is included as an HTML embed and was found on a CodePen. In order to modify the text you'll need to update the custom code in the HTML embed.

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.

A unique interaction in which a different image is shown based on the cursor location on the Webflow site. This effect was created entirely from Webflow's native interactions and requires no custom code. A great example of thinking outside of the box, integrating the use of a grid design to trigger the hidden images based on mouse over trigger events.

Supercharged marquees powered by GSAP. These unlock a whole new level of customization to your marquees via GSAP. The first example showcases two marquees, both on different z-indexes with an image in between both of them so that one marquee is in front of the image and the other is behind it. The next marquee provides a unique vertical marquee that speeds up or slows down as you scroll it into view. The third and final marquee is a horizontal marquee that does the same as the second. As you scroll this marquee into view it speeds up the marquee while the page is scrolling. As mentioned these demos rely upon GSAP and Scrolltrigger to function properly and provide the functionality. You can customize the code from within the custom code page settings.

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.

An analog clock built from CSS & JS in Webflow. The design is built from divs, while javascript and CSS drives the analogue movements of the clock hours and hands.

Here's a guide and an example of Particle.js on a Webflow site. Particle.js is a fun way of adding a dynamic background to your Webflow site. In this example a new particle is added every time you click on the background of the site.

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.

An image project card animation for Webflow that includes hover interactions and animations. With this effect the title and caption move upon hovering, the view project appears and moves down with an underline animation. This interaction also includes a cover overlay that moves and appears from the upper left corner on the hover state. This effect was achieved by creating a card wrapper and placing the color overlay inside of it with a position of absolute and full. Then a text wrapper was added to the card wrapper in the center with a heading, text block and view project text block. The view project text and underline were then added inside of another wrapper. The interactions had different elements move and the underline effect scale.

A unique 3D glassmorphism interaction and animation that utilizes a combination of video, Webflow interactions and Custom CSS. When a user hovers over a card the card rotates and 3D transforms based on Webflow interactions. The technique for the glassmorphism is powered by custom CSS using backdrop-filter blur and image masking. In order for this to work properly you will need to add the custom CSS code with this cloneable. Pay attention to the Webflow interaction that is powering the cards 3D transform techniques. An excellent example of using Webflow interactions, CSS and a little bit of creativity to create glassmorphism 3D cards in Webflow.

A style guide template that you can use to jumpstart your upcoming Webflow project and speed up your sites development time. There is a bit of custom code in the page settings. The CSS stops the default grey box flash from happening when you click the return to top button on mobile.

An inclined, horizontal smooth scroll portfolio section created with the power of Webflow interactions. This technique uses no custom code such as Javascript or CSS to implement on your site. Instead this utilizes Webflow's native interactions taking advantage of the While scrolling in view. As the page is scrolled down the interaction moves the cards from right to left. The incline is achieved by utilizing 3D transforms on the cards parent div. Each card has a unique hover effect in which the image moves on hovering of each card. This cloneable is perfect for a portfolio section, features section or much more.

A fun way of adding a text color changing effect to a headline or other piece of text in Webflow. This technique uses Webflow's native interactions to achieve a color changing text effect in Webflow. This demonstration as two different methods, one which each text changes colors at a time and the second in which all texts change color and then revert back and loop again.

Want to add a copy to clipboard button in Webflow? Here's a way to create a copy to clipboard button that will copy any piece of text that you want, including links, to the clipboard. This is great when you want to allow your users to copy blocks of text, URLs, or even color codes in a styleguide.

A FAQ section with a sticky sidebar and accordions for various FAQ questions.

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

Here's a well designed checkbox with an interaction animation. A perfect way of adding a unique checkbox design to your Webflow sites with a fading animation.

A Webflow slider created with SplideJS tied into Webflow's native CMS system. This slider features a draggable slider with a progress bar. In order to get this to work properly you'll need to add the HTML embed splide code as well as the code found within the page settings.

Here's a way of adding a unique, full screen image transition to your Webflow site via Three.js Each image loads a unique transition upon clicking them and turns the images full screen upon click.

A full page, dark themed, hamburger menu navigation for Webflow. Built with interactions and animations for sliding the menu in as well as hover states for the links.

A full screen parallax scrolling interaction in which different sections are folded in on Webflow. This also has a subtle blurring effect to add extra design to the scroll interaction. This is built entirely from native Webflow interactions without any extra custom code or CSS.

A beautifully designed multi step form with unique animated input forms for your Webflow site. Even if you don't use the multi-step form the input label animations are a great design and perfect for any Webflow site contact form/checkout form.

Want to liven up the videos on your Webflow site? With this cloneable you'll be able to feature three, full page videos with a unique animation effect. Perfect for portfolio pages, heros or pages that you need to feature more than one video in a dynamic and interactive way.

Here's a way to add a neon sign text effect to your Webflow site. A perfect CSS effect that creates a neon sign style text effect in Webflow.

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.

A beautifully designed opt-in/sign up modal interaction with Webflow that provides a unique way to sign people up or opt them in via an interaction. The modal has a custom bounce interaction on load and you can use the X or click anywhere on the page to close the box.

I wanted to see if I could rebuild this beautiful website. All interactions are created in Webflow :) Custom code used to create infinite scroll. Current limitations (stretch goals to fulfil at a later date): 1) Sound effects 2) Text changing effect Rebuild of https://one-is.com

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

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.

An interactive sky background for your Webflow site using three.js and vanta.js. When a user interacts with the page it feels like you're flying through a set of clouds. A perfect way of adding depth and interactive nature to your Webflow site.

Here's a fun card interaction in which the cursor acts like a peeling of a label on a Webflow card. Perfect interactions to add a new layer of dynamic flair to your otherwise boring Webflow cards.

Here's a way to create a custom automatic slider for the hero section of your Webflow site. This was created with the native slider component and Webflow interactions.

A pop up modal that is triggered by a toggle on the CMS collection item while also keeping the default link to the collection item on the page. The pop up modal will disable body scroll and enable when closed.

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.

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