Discover Webflow cloneables

A beautifully designed login or sign up page with a toggle between signing up and logging in forms. This full page design includes backgrounds, input designs, button, background video and much more.

A beautifully designed hero section for an architecture firm/business in Webflow. This offers a unique, 3D style pre-loader with a full hero section. The hero incldues custom line style slider navigation, 2 lightboxes in each slide, one for image and one for video, search functionality, hamburger menu and much more.

A sun circle animation that grows based on the page scroll in Webflow. This entire animation is built natively with Webflow interactions and requires no custom code. A great example of how you can use Webflow's native interactions to build in depth, multi stage animations based on page scrolling.

Here's a way to have an image slider driven by Webflow's native CMS. In this example they are using slick slider tied to Webflow CMS.

A fun way of adding a water mouse hover ripple effect to your Webflow site. Simply add a tiny code and the javascript library and you're all set.

An NFT collection with a minting dapp in Webflow. The minting works but you need to have a MetaMask wallet and you also need to have some MATIC tokens on the Polygon network to avoid high gas fees.

A beautifully designed product card for your Webflow site. An easy to implement cloneable for your Webflow site to add product cards.

Build a staggered animation with gird and Anime.js in Webflow.

Here's a fade and rotate page transition for your Webflow site. This transition occurs using a small snippet of custom code that allows the transition to happen.

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

Here's a unique vertical split slider that with split transitions between slides for Webflow. A great way to add a responsive, unique slider effect for a full page or section on your site.

Here's a way to add a custom mouse cursor tooltip in Webflow. This custom tooltip fades in when hovering over an element and follows the mouse pointer over that element. This could be used for project title information, additional/next slider information and much more. A majority of this is created with Webflow interactions. Please note that there is some custom style CSS in the head section of the page.

Easily build your nonprofit or charity site with this cloneable hero section in Webflow. This features fullscreen tabs layout with the ability to display large text content, a full screen menu with unique hover interactions, video lightbox and search functionality.

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.

This is the official project starter cloneable for Client-First. It contains a style guide page with all the utility classes that come with the Client-First style system. What is Client-First? https://www.finsweet.com/client-first Full docs: https://www.finsweet.com/client-first/docs Made with 💪 by Finsweet

A huge selection of premade Webflow animations, including animated buttons, click buttons, circular hover buttons, scroll down animations, nav link animations, tab animations, search bars, social media buttons, text animations, contact cards, blog cards, product cards and more.

A fully designed black and white hero section for Webflow. This Fintech inspired design features unique button designs and interactions, call to actions, review section, mega menu/navigation and much more. Everything you'd need to get started building a hero section for your homepage.

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.

Easily add a grainy effect to your entire site. This uses a grain png that was on a Webflow site. You can create your own grains as well to change it up.

Here's an advanced reveal image on hover interaction tied to Webflow's native CMS system. This is 100% Webflow native CMS powered using a little bit of jQuery. It's fully responsive with fluid responsiveness based on Finsweet client-first framework. The interaction is used to showcase a preview image from the portfolio CMS, but can be used in a number of different ways. For example you could set it as a values section, gallery section and much more. Be sure to copy the section-portfolio and global styles symbol as well as the global elements symbol. Copy the code in the before body tag and you are all set.

Here's a technique to add a rotating images on page scroll via Webflow interactions. This adds a dynamic feeling to your site as your users scroll down on your Webflow site the images rotate around the page.

A well designed centered pop up opt in modal for Webflow with premade gradients. This is a perfect way to add a pop up opt in modal to your Webflow site due to its premade gradient shadows which will make this modal window pop on any Webflow site.

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.

Infinite looping scroll marquee with stopping on hover via CSS. Also provides a unique jquery effect for hover over to display more information about the object. The infinite scroll marquee is powered by Webflow's native CMS system. In order for this to work you'll need to add the custom CSS script and JS script found within the Page Settings.

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 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 to create a color changing background effect in Webflow. Using preselected colors you can have the background color of your Webflow site shift over time between your preselected colors.

Here's a way to add smooth scrolling to your Webflow site using tween max. There are several ways to achieve smooth scrolling in Webflow, and this is another way of achieving that effect.

Here's a great project that shows all of Google's material color palette in an easy copy and paste method. Perfect for building color palettes for your site or finding inspiration for colors to utilize in your Webflow site.

Help your users understand what they should be searching for via this rotating search suggestions.

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

An interactive accordion design for your Webflow site. This design is a full width accordion built with all necessary open and close interactions as well as a custom mouse cursor design.

A fun, predesigned footer for dark sites using a mix blend difference which allows for easy customizing to your sites designs. Includes custom mouse cursor, hover over effects using mix blending, and much more. Make sure you have selected the body class (all-pages) and then go to the typography panel and select 1VW for it.

Here's a way to achieve a unique hero section using grid and the Wizardry method in Webflow.

Three amazingly designed call to action section scroll interactions created in Webflow. These call to actions are perfect for the bottom of your Webflow sites to create eye popping dynamic elements that draw the users attention.

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.

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 way of adding a slider before and after scroll reveal. This was a clone from Udesly.

This is the official starter UI kit for the Untitled UI Webflow components library driven by Relume. This project contains a styleguide with all of the necessary pre-built classes. There are no pages, no layouts and nothing that you need to delete. This Untitled UI kit uses the client-first Webflow styling system. The styleguide features all typography, H1 headings, H2 headings all the way through H6 headings. This also includes the heading classes from xxlarge to xsmall, paragraphs, links, block quotes, unordered and ordered lists. You'll find the class text sizes such as text size large, text weights, text heights, text styles, color swatches, including error, warning and success color states. Background colors, text colors, shadows, UI buttons and all necessary elements, badges, badge groups, form elements such as inputs, dropdowns, checkboxs and radios. This is the complete Untitled UI styleguide kit to jump start your next Webflow builds.

Here's a beautiful WebGL colorful background animation on page load. A great way to add extra color and a dynamic element to your Webflow site.

A unique Webflow slider created with Three.js and GlslCanvas. While this is a good example of a slider it uses hand coded image URLs rather than Webflow sliders. A good demonstration of how to add Three.js slider effects to your Webflow site but will need some customization to make it work properly on a Webflow site.

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

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.

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.

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.

A simple CSS snap scrolling cloneable that allows you to easily add snap scrolling via CSS to your Webflow sites. This utilizes CSS and you can find this in the cloneables custom code page settings. With this custom code you can target the n parent and other nth categories to customize the snap scrolling functionality. You can add easing, the duration for the scroll snapping, the height of the items and much more. Easily add snap scrolling to your site via this snipped and skip bloated 3rd party JS libraries.

A unique interaction perfect for portfolio pages or about company pages. As a user scrolls down the page the primary in focus element becomes highlighted and the background changes to a different image. This effect was created from only Webflow interactions and does not use any extra javascript or code snippets. Using Webflow interactions and the scroll into view trigger the opacity of the image changes and the previous items are hidden, while a text effect is accounted for. Overall this is a basic, yet sophisticated Webflow cloneable that will help bring any portfolio to life.

A fun way of adding a 3D interactive Figma logo button to your 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 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.

A fun GSAP text hover image span effect created for Webflow. When hovering over a specific text or link, images appear on the screen. Perfect for dynamic and playful interactions powered by GSAP. This script is powered by GSAP and you can find the custom code found in the page settings. This allows you to signify images that appear when a user hovers over a native Webflow text span item. This is also mobile friendly as the code allows you to set media resolution settings and customizing the effect on the non-selected text span. You are able to customize the easing, zindex position, colors and much more.

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

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.

Here is a way to create dual snapping cards on scroll in Webflow. When you scroll both cards snap into place, the slides change with an interesting reverse scrolling effect. Position sticky and Webflow interactions give the illusion of a snapping effect.

A set of fun characters created via strictly from Webflow interactions utilizing divs and no images. A great exercise in the abilities of Webflow interactions. The interactions rely on movement, size of divs with a loop to make this continuous animated character interaction.

A stunning background animation that's interactive and provides a glassmorphism design via Three.js for Webflow. This interactive, twisting sphere can be dragged and rotated anywhere. Playing with the settings, especially phase, will produce colorful and unique results.

A fun, interactive bubble blog for your Webflow site driven by Three.js. This interactive bubble blob follows the mouse around the page and moves and interacts based on it's location. A fun way of adding a dynamic and interactive background animation to your Webflow site.

A scroll to reveal text masking interaction in Webflow. When a user scrolls down the page the text is zoomed into the masked image and reveals the image upon scrolling. You can edit the text inside each section and change the image to your choosing. You can also add other icons or graphics inside of it. Just be sure to use black/white elements only.

Here's a wonderfully designed full section testimonial slider for Webflow. Each slide has it's own transitions as well as custom slider arrows using Webflow's native slider. Perfect for adding a testimonial section to your Webflow site.

A CMS driven accordion calendar for Webflow. Perfect for an events page or about page on your Webflow site. In order to use this be sure to copy the hidden section which includes an unbounded CMS design.

A recreation of the Firefox browser window as a mockup in Webflow. This Firefox browser mockup features open and closeable tabs, forms to act as the URL bar and hover states for all of the browser buttons. A unique way to create and demonstrate product images, product demonstrations and more in Webflow.

A sign up authentication page design for your Webflow site. This includes show/hide password, input field autofocus, image slider with a responsive design.

Here's a great way to add dynamic hover states to your team cards in Webflow. With this profile card design several hover states are displayed with various scaling and movements. The top circle has social media icons to make the card more functional and display relevant information. The bottom has the name of the person displayed in a rectangle. The hardest part of this interaction was adding all the shapes into the card. Specific wrappers were used and positioned around the wrapper in an absolute position. For the rectangles at the bottom they were skewed on the x axis -20px. Take note, when you add a move interaction to these shapes the skew property gets removed so you have to add the skew property to the initial state of the interaction as well.

A unique text character interaction in which each text character slides in on page scroll via Webflow's native interactions. Keep in mind that while this is a fun interaction this requires each character to be situated in it's own div and could get complicated for sites requiring changes to the word. Although for a loading screen or for elements in which the text doesn't need to be updated often this is a great Webflow interaction that requires no additional code and utilizes Webflow's native interactions. This uses the element trigger While scrolling into view to animate each letter swooping in from the top to complete the word. It also features a unique hover interaction in which each letter changes size when a user hovers over each individual letter.

Turn your site into an interactive black hole with this unique Webflow cloneable. Please note that this entire example relies on scripts and code so you'll need to add the code found on the page and within the page settings for this to work properly.

A magnetic call to action button featuring rotating text and a trailing custom cursor in Webflow. Circletype.js was used for the circular text rotating animation. You can change the text and the circle radius will automatically recalculate.

A spiral 3D spinning interaction that requires no WebGL, third party libraries or any custom code. This was built entirely in Webflow with Webflow's native interactions. As a user scrolls down the page the images spin around and rotate around the page. A fun and unique interaction that showcases the power of Webflow. This is perfect for portfolios, or other items on your site. This was built utilizing While scrolling in view and taking advantage of only two options, move and rotate. Essentially the items layout allows for the positioning of the item. By utilizing class names each class will have the same result and effect.

Here's a beautifully designed custom onboarding form to collect/update member information at any time. This could be used for onboarding, profile updating, account setup and much more.

Here's a way to add Facebook, Twitter and Pinterest sharing buttons to your Webflow site. This technique uses an HTML embed for each element with the images hosted via Webflow.

A beautiful two package pricing component that includes a pricing comparison table. Perfect for nearly any site that offers two different pricing packages for clients and needs to feature a comparison table.

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 fully cloneable mega menu navigation with full page dropdown interactions for Webflow. A great way to quickly get your Webflow menu/navigation launched with pre-built dropdowns, CTA buttons, and more. This was built with clear class names, native Webflow interactions, basic dropdown triggers and fully responsive.

Here's a way to utilize List.js with Webflow native CMS to create filtered and searchable lists within your Webflow site. This helps users filter specific information and details from a large list quickly and easily from within your Webflow site.

A newsletter form input with a pop up data privacy notice that appears once the email input field is active. This can be hooked up to Mailchimp or whatever email newsletter you're using.

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

Here's a work around to use .webp files in Webflow. The trick is to upload your webp files as .webp.txt in the asset manager. Then you can use a <picture> tag and now you've got native Webp files hosted in WEbflow.

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.

Power up your Webflow tabs through a timed, auto-rotating tabs feature. This is perfect to add emphasis to your Webflow tabs and more specifically demos, explainers, testimonials and just about everything else you can think of. This is a super simple script that adds auto rotation to Webflows native tabs.

An infinite scroll marquee on hover interaction for Webflow. When a user hovers over a link an infinite scroll marquee animation is displayed. This is perfect for a menu or navbar within Webflow in which you'd like to add extra emphasis and animation design to. This was built entirely from Webflow's native interactions and requires no custom code.

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.

Here's a way to utilize Lottie files with a scroll into view interaction and position sticky. A great way to add dynamic animations to your site with animations on scroll.

Here's a way to add a image clipping to text in Webflow. This effect allows the text to act like a mask to the image behind it, making the font color take on the image in the background. This method uses Webflow's native designer and doesn't require any type of custom code. Simple choose Clip background to text option for this to work properly.

A simple way to add a mouse scroll animation with a dot moving from the top to bottom. This is not a lottie file or gif, this is made with interactions and divs.

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.

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 demonstration of how to add Cookie Consent to Webflow using Finsweet's Cookie Consent. This cookie consent Webflow cloneable features various designs for cookie consents, including modals, banners, pop-ups and more.

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.

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 way of creating a 360 degree spinning image via SpriteSpin

Another beautifully designed hero section for your Agency site in Webflow. This cloneable features a dark/light toggle, a full screen slider with custom navigation dots along with slide number change animation, and a full screen hamburger menu navigation.

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

A fullscreen photo accordion with hover over interactions for Webflow. This Webflow cloneable features a unique full screen accordion powered by Webflow's native CMS system. When a user hovers over each card the card expands to show a larger image and detailed information about the accordion. While a majority of the effects were created with Webflow's native interactions there is some custom code that needs to be applied.

A beautiful text hover animation for Webflow built entirely from native Webflow interactions. On hovering over the circle the text changes its position on the page. A great way of adding a unique text animation effect to your Webflow site.

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.

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.

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.

Add a custom cursor of your choosing to your Webflow site. This allows you to add a custom cursor and you don't need to add interactions to each link in your site as well as the hover effect when the cursor moves off the page.

Here's a way of adding GSAP's motionpath technique using Scrolltrigger and Motionpath in Webflow. As a user scrolls down the page an animation follows a wavy path. Please note in order to get this to work you'll need to add the custom code found. in the closing body tag as well as the custom HTML embed found near the image file.

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.

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.