Discover Webflow cloneables

A unique animation for a menu/navigation in Webflow. When a user opens the menu it opens with an expanding circle animation to add a unique design flair to your Webflow navigation/menu.

Tabs can be a pain to create in Webflow. With this cloneable you can get started building your tabs faster and built on top of the client first system by Finsweet. A perfect way to add tabs to Webflow quickly and easily.

A GDPR compliant cookie consent modal window for Webflow. This cookie consent compliant GDPR Webflow cloneable uses the fs-cc attributes to your scripts and can easily be implemented on any Webflow site. Simply clone the project, add the custom cookie consent script found in the custom code settings in the projects settings and modify them according to your requirements. The cloneable includes a premade cookie consent modal window with the ability to customize cookie settings and clearing all cookies.

A full UI kit provided by Kazbek for Webflow. This includes nearly all of the components and UI items that you may need for a site, including navbars, footers, contact forms, pricing, payment icons, FAQ sections and much more.

A fun text effect where text hops on hover.

Add Twitter tweet cards to your Webflow site with this free cloneable. This cloneable recreates the basic design of a Twitter card to allow you to add testimonials, tweets and other Twitter related cards to your Webflow site. Add this to something like Integromat or Zapier and you could automate new tweets to your site. The benefit to this is that you can reduce the load time of your site be not calling the external Twitter embed JS library.

BlueKit is a simple and easy to implement UI framework for landing pages. Perfect for prototypes for user-testing sessions during quick design sprints. You can use the template and pre-built blocks to quickly build page structures. This was built with the beginners in mind. Clone the project, scroll down and delete, hide or move elements as you need. Change the color, font for any style of the current elements and all will change accordingly.

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.

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

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

Various demonstrations of how to create magnetic elements in Webflow. This method is typically used for buttons but can be implemented on a variety of objects using a single interaction and class. In this demonstration a parent class called is-magnetic has an interaction tied to it that allows the items in this class to be "magnetic" and drawn to the cursor. A

Allow visitors to preview a site thumbanil on external link hover in Webflow. This feature allows you to get a preview of the site that you're linking to without having the user leave your site. It works by extracting the external links on page load, it then grabs a screenshot of those sites and reveals it on link hover. The card's position is calculated using custom code and thus works with inline links and link blocks. Just change the external link and preview will be updated automatically. Replace the demo screenshot API with your own in your live builds.

Ever wanted to add an infinite text rotation/changer to your Webflow site? This infinite text rotation technique allows you to have a long list of words that rotate in from bottom to the top and then repeat endlessly. This includes an infinite loop version and a finite version that only runs once. This is fully responsive and easy to customize.

This is a styleguide combination of the Wizardry system and Finsweets Client first methodology. The Wizardry system is an em-based fluid scaling system that is combined with the first class structure and naming conventions of the client first class naming structure and conventions. The main area where the two systems are combined is in sticking with REM units for the small text elements so that on desktop they don't end up too small on low resolution screens. The design also has a mockup at 1440px and in the template the body font size is set to 1.111vw, which is equivelent to 16px for simple px to em conversion.

A clean and unique interactive CMS slider for Webflow. This slider features a variety of unique features including a mouse hover over effect in which text gravitate towards the mouse, a bubble radar effect and unique slide transitions for each slide. This was built with Finsweets client first framework and offers fluid responsiveness design.

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 unique stacking cards on scroll interaction in Webflow. When you scroll down the page the cards on the right side stack on top of each other. A unique interaction perfect for a SaaS or technology site. The stacking cards effect was built entirely using Webflow interactions and does not require any additional code or scripts. The effect is created by using the While scrolling into view trigger, with the use of Scale and Filter. The filter applied reduces the overall brightness of the card and the scaling is used to send the item back smaller. Overall a well designed and thought out solution for a stacking card interaction.

Here's a clean popup modal that includes a slider for your Webflow site. Easy to implement and with cookies you can display the popup once.

Add a CMS driven draggable slider with smoothing to your Webflow site. This slider offers the ability to slide with a trackpad and also has mobile smoothing. There's a small webkit code that removes the scrollbar as well.

An advanced jQuery card hover interaction for Webflow. When users hover over the cards they expand and grow and feature a unique mouse hover over interaction in which the icons shift while hovering in a specific card. The background colors change and the buttons transform into a different call to action button. This is a fully responsive interaction and requires a bit of custom code to implement. To get this to work copy the section-end-cta and copy the code found in the closing body tag on the homepage.

The starter style guide project for the Relume Library. This project contains a style guide with the necessary pre-built classes. There are no pages, no layouts, and nothing to delete. This simply allows you to get up and running with Relume, easily. The Relume Library uses Finsweet's client-first Webflow style system. You can find the prebuilt page under Drafts/Style Guide. The styleguide comes with Headings (H1-H6), heading classes (heading-xxlarge), Paragraphs, Links, Block Quotes, Lists, text sizes, text weights, letter spacing, line heights, text styles (using custom Global CSS), text alignment, rich text, colors, background colors, premade shadows, UI elements, buttons (with icons, alternates, icon locations), form elements, icons, image wrappers.

A unique button design in Webflow with hover over interactions. When a user hovers over the button the button fills from right to left and on hover out the fill moves from left to right creating a unique Webflow button via native interactions.

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.

Here's a rebuild of MoMA's website navigation and menu bar. A great way to add a well designed and thought out navigation and menu bar to your Webflow site.

A unique way of showcasing your logo front and center and have it move up on page scroll in Webflow. This adds a fun dynamic element to your Webflow site and draws the users attention in. This interaction was created entirely from Webflow's native interactions using the While page is scrolling functionality and size, move, scale, opacity and more. This requires no additional custom code and can be cloned and setup quickly.

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

Easily add social share buttons to your Webflow site with this free cloneable. This technique uses a small script that utilizes Webflow's attributes to automatically update the outbound links to social sharing URLs. A great way of using Webflow's designer to create the design elements while still having the share functionality. This eliminates the need for ugly HTML embed codes within the designer.

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.

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.

Here's a way to create an age gated pop up modal in Webflow. Using the power of cookies you can now gate your content/site with a age date requirement. The code in the settings takes the submission of the month, day and year of the persons birthday and calculates their age against todays date. If they validate that they are over 18, then a cookie will be added to their browser and the pop up modal will be hidden from them until they clear their cookies. If they are not over 18 then they are redirected from your site.

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.

A wonderful style guide created by Flow Ninja. Jump start your Webflow build with this pre-built style guide. Includes a figma file, font styles, headings, block quotes, unordered lists, ordered lists, rich text elements, buttons, colors, inputs, containers, sections, paddings/sizing, margins, text alignment, flex and much more. This is a well organized styleguide featuring screenshots of the relevant sections if affects in Webflow. An excellent starting platform to build your own styleguide or use Flow Ninja's default styles.

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

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.

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

A product card with hover animations for Webflow. When a user hovers over the card the title of the product appears, and a few icons appear as well as the price staggered from the bottom. There is a cart icon that can be used to add the product to the cart, an eye icon which can link to the product page, and a heart icon that can link to a counter of some type.

An excellent example of Swiper.js for Webflow CMS items. This example is perfect for a hero section, or any Webflow slider that wants to be upgraded to utilize Swiper.js. This demo includes scroll interactions, in which each card is changed upon scroll up or down on the mouse and also includes next & previous buttons to navigate between slides. Each slide changes the thumbnail previews of each slide, updates the slide active and slides the text of each slide. The thumbnails and text titles allow you to navigate between each slide as well. This script utilizes Webflow CMS, allowing you to utilize Webflow's CMS items in your native Swiper.js slider. Keep in mind that this utilizes Webflow's custom code section and you'll find the relevant code within Webflow's page custom code settings of this Webflow cloneable.

A beautifully designed, multi-step custom onboarding form perfect for your SaaS, web design or site which requires a multi-step form. This is a complete onboarding form page design that allows for multi-step progress via a bit of Javascript. You will find the necessary JS and CSS files within the pages custom code settings. One set of code allows the form to use the arrows for the next and previous form pages. This form also features a unique range slider which was used for the date. This can be customized to your own requirements but is a well designed, multi-step onboarding form that allows you to break down long questionairres or onboarding forms into small, bite size pieces.

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.

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.

Here's a way to utilize a tab change interaction for your Webflow sites. Upon clicking the tab the elements animate and the tab changes. Note that any interactions happening within the tab page much start after any interactions within the tab link are finished. Otherwise the tab component will cut off the animation resulting in nothing happening within the tab pane itself.

Here's a hero card hover interaction for your Webflow site. Upon hovering a circle expands to fill the entire card. Simply copy and paste this to your Webflow site.

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

Here's a well designed cloneable blog template design perfect for your Webflow site. It features a sticky sidebar and well designed content divs with just about everything you'd need for your blog page. Including other posts, individual blog page, call to action and email opt-in/subscribing, categories, sidebar and much more.