Discover Webflow cloneables

Here's a simple pricing table with monthly or yearly pricing toggle for Webflow. The design is mobile friendly, user-friendly and designer--friendly. This pricing page includes a menu/navbar, pricing table, toggle with interactions and FAQ section.

Are you looking to use Webflow tabs with a rich text CMS field? By default Webflow doesn't allow rich text fields to be placed in the tabs by default. This technique uses a bit of JavaScript so if you change the classes be sure to update the code within the page settings. The arrows in this demonstration are from Font Awesome and the colors can also be updated in the page settings.

A methodology to create a variable font based on the mouse movement on a Webflow site. This technique relies on custom CSS and JS for this to work which can be found in the HTML embed of the site. A good demonstration of creating dynamic variable fonts in Webflow.

Here's a way to add a background image change on link hover to Webflow. Using a simple trick to change the background image on mouse hover dynamic items list. This is all done with native Webflow capabilities without any scripts.

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.

Here's a way to utilize cookies to keep a modal, window or banner element permanently closed after a user has closed it in Webflow. This is perfect for cookie consents, one time offerings, opt-in modals and much more. Be sure to add the custom code found in the head section and body tags of Page Settings to your Webflow site.

A unique way of adding a social share button to your Webflow site. When a user hovers over the button the social sites sharing icons are shown. This method allows you to maximize space on your site and offer a unique approach to social sharing your Webflow content.

A shooting stars effect for the background of your Webflow site. The stars come in from the top right to the bottom left on your Webflow site.

An example of an expanding image cards on hover menu and navbar in Webflow. This full page menu adds a hover interaction that expands cards or images on hover in your Webflow menu.

Here's a horizontal scrolling technique with a progress bar and pop up navigation for Webflow. A perfect example of how to add horizontal scrolling to your Webflow site with a progress bar indicating how far you've scrolled.

Here's a way to create a typewriter effect in Webflow via CSS. Popular on many different websites the typewriter effect allows a dynamic, eye catching headline or text on your Webflow site.

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.

Now you can utilize a rich text editor for Webflow forms via a little bit of custom code and JS. Easily add this functionality to your Webflow site to make even richer forms.

A fun, fully responsive slide in menu animation for your Webflow navigation. This menu slides in via a dynamic animation and more importantly is already mobile and responsive friendly.

Here's a demonstration of using Dribbles API to display shots from yours, or another Dribble account on your Webflow site.

A thorough guide and technique for freezing scroll on the page on a modal popup. Closing the modal via the background click or by clicking on the close icon closes the modal and makes the page scrollable again. This is a thorough tutorial that helps understand the process, and how to implement the technique on your site.

A recreation of the Slack logo via Webflow native divs and Webflow interactions. A fun way of demonstrating what's capable with Webflow interactions and native Webflow designer. There are four different experiments of movement in this demonstration. This was built via Webflow grid and native interactions.

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.

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

An interactive pop up modal for Webflow. This pop up modal includes close interactions, close on outside click as well as is fully responsive.

Looking to add a dynamic image slider that can change based on categories? Here's way to add a dynamic image slider driven by Webflow CMS that can be filtered by categories or links of your choosing. The amount of slides is determined by the amount of images added to the multi-image field within collections.

An expiremental hamburger menu for Webflow with the interactions. This is a full screen, animated hamburger menu/navigation that you can easily add to your Webflow site.

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 unique photo/masonry grid for Webflow featuring reverse scrolling interaction and mouse hover over effects. As the user scrolls down the page two sets of images scroll in one direction while the middle row moves in the opposite direction. This effect was created strictly from Webflow's native interactions and doesn't require any extra JS or CSS.

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.

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.

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 way to add a dynamic counter metric section to your Webflow site. This is accomplished via the simple JS available within the custom code section of the page settings.

A simple to do list app built in Webflow. The todo list app saves the list status to your browsers local storage. Be sure to add the global styles symbols, the custom head tag as well as the custom JS code added to the body sections.

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.

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's a way to add a non-CMS item to a cMS collection list in Webflow. This can be positioned at the start, middle, end or at a specific position via a number. A great way to add non CMS items into a native Webflow collection list.

A pricing table with tabs to display pricing in a unique and interactive way. This allows for nearly full screen descriptions of each tabbed pricing item.

A fun, cartoon styled 3D animated button that bounces on hover/click. A fun effect for your Webflow site and a way to liven up a typical button.

An experiment using a scroll effect, Lottiefiles and Webflow interactions and the simplest building blocks. A full description of how the effect is achieved so that you can easily replicate it yourself. The entire effect is created via Scroll Actions interactions and the location of the windows page scroll. The lottie files are then triggered by the percentage of the page scrolled with a "static" 100vh window.

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

Add a monthly and yearly annual toggle pricing page to your Webflow site. This predesigned pricing table is built with the relevant toggle interactions to add an annual and monthly pricing table to your Webflow project.

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.

Here's a way to add an infinite, transparent slider to your Webflow site. An easy cloneable that you can copy and paste to your site and have it setup and running in no time.

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 free widget to display your customers Trustpilot reviews and feedback, or other feedback and reviews to your site via a slider element.

Have your navbar shrink on page scroll via this Webflow cloneable. Easily create dynamic navbars for your Webflow site that shrink upon scrolling down the page. Once a user reaches a certain point on the page the navbar transitions from dark to light while shrinking. This does not require any custom code and utilizes Webflow's native interactions. This utilizes Webflow's While scrolling in view for two different classes and as previously mentioned does not require any extra custom code. This cloneable is perfect for anyone looking to create a dynamic navbar that allows for dynamic changes based on the users scroll depth on the site.

A well designed starter dropdown navigation menu with hover over for Webflow. This consists of clear class names, 100% native interactions and basic dropdown triggers. It's also mobile friendly and responsive design.

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 demonstration of a category card animation on hover in Webflow. When a user hovers over a card two different lines are shown on hover. To achieve this effect the lines scale in from the top-left and the bottom right around the image. There are two blocks around the image and the lines for each block start animating at opposite angles to create an interesting line effect around the image. The effect is achieved by placing two, absolute div blocks inside of the card wrapper and then moving the first div block a bit to the upper left and the second block to the bottom right. In the absolute div blocks 4 div blocks were placed on each side of the div block. The transform-origin for each line to make sure that they are scaled in from the correct place. Each line starts at a scale of 0 and then changes to 1.

A beautifully designed modern newsletter opt-in call to action section for Webflow. This free cloneable can be copy and pasted to your Webflow project in no time.

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.

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.

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.

Before and after slider animation with pure animation Webflow interactions. You only need to replace the background image for .before-image and .after-image

Here's a way to add social sharing buttons to the left sidebar of your Webflow site. This social sharing block floats above your site so it's always visible to the users. This is done via a floating-share jquery plugin.

A fun way to have an animated, cursor following dog animation on Webflow. This is driven fully by div elements and a bit of CSS and JS to make the magic happen.

Using Mixitup to combine CMS lists into a single list and add both sorting and filtering to your Webflow site.

A unique way of adding a CMS driven draggable slider to Webflow with background videos playing on hover.

Here's a way to add a beautiful, count up counter via JS in Webflow. This wonderfully designed metric section is perfect for a SaaS or similar industry that is looking to add a metrics section in their Webflow site. Be sure to add the custom code found in the page settings to ensure that this works properly.

Add Trustpilot reviews to your Webflow site with this premade Trustpilot review slider. This slider was built using Finsweet's client first and uses only SVG images for the icons. A great way to add testimonials and reviews to your Webflow site.

Complex techniques to achieve amazing background effects using unique blending and backdrop filter effects and blending effects. In this demo you'll see a hide/show background effect on scroll, moving divs/assets wherever on a page and the various blending techniques, mouse hover over to effect background effects and more. Combine separate channels into full colour photo; magically hide and show objects simultaneously using nothing but solid coloured divs; play with stacking various blend modes on top of each other; see the mind-bending inception of inversion of already inverted objects; use interactive colour changer for your elements, that does not even touch the elements themselves; create fun colour-restoring games; reveal the magical world invisible to naked eye with your blend-empowered cursor.

A great style guide to get your Webflow site up and running faster. Included in this style guide is typography, hero text, H classes, paragraph, rich text, color swatches, buttons, shadows and more.

A simple review slider with a lottie star load animation. When each new review slide is loaded the lottie stars load one at a time. This is also mobile responsive and should work at all resolutions.

A perfect product preview card interaction and animation that upon card click shows an image preview modal window in Webflow. A great product card design with pre-built interactions and animations that are perfect for your ecommerce or product/sales pages.

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

A fun and unique green pricing table design for Webflow. This pricing table design features a large headline and a four section pricing table with a unique hover over interaction. When a user hovers over a card the card is attracted to the mouse and moves around a bit. The pricing cards feature product information as well as a primary discounted card label for a package. A great design to get your Webflow sites pricing section built out quickly.

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.

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.

A 3D flipping cards interaction perfect for adding additional information to Webflow cards utilizing Webflow interactions. When a user clicks on the + sign of a card the card flips over to showcase additional information about the product. This cloneable features no additional custom code and was created using Webflow interactions. Using mouse click the card flips 180 degrees via the Y axis. This is accomplished using Z index and 3D transforms using the backface functionality. A simple, yet sophisticated flipping card interaction that's perfect for any Webflow site.

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.

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.

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 fancy scrolling interaction to showcase your work in Webflow. This cloneable uses Webflow's native CMS and the power of Webflow interactions to create a smooth scrolling interaction in which each slide is a different section. Upon scrolling the images move in smoothly and the headline and description appear. This is a rather extensive interaction as it deals with scroll actions and scale, opacity, move based on the location of the page.

Here's a way to enable geolocation based translation on your Webflow site, automatically. The languages according to location: India - Hindi, Germany - German , France - French, everywhere else - English.

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 custom slider with dashes instead of dots and a next/previous slide via mouse click in Webflow. The cursor turns into a custom cursor upon hovering above the slide on your Webflow site.

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 simple yet effective way of adding a countdown timer and clock to Webflow. This example utilizes some custom code and Webflow's native CMS to create a count down timer clock on your Webflow site.

How about a 3D interactive iPad mockup in Webflow? Here's a way to add an interactive, 3D iPad mockup to your site.

Twenty prebuilt CSS button hover effects to allow you to easily add button hover effects without complicated Webflow interactions. These include a number of unique effects such as marquee text on hover, fade in and fade out, 3D expanding effects, chat widget buttons, rotating and much more. You can add these to your Webflow site by copying the HTML embed with the relevant CSS scripts for the button effects that you want. Add the custom css class to your buttons and you'll immediately be able to view the button effects within Webflow designer. This makes for easy, and lightweight buttons that provide fun effects without the headache of interactions or complicated hover states.

A demonstration of how to utilize lotties within Webflow CMS. This cloneable example will help demonstrate how you can embed, utilize and even control lotties via Webflow CMS system.

A fun three.js background animation for your Webflow site. Flying butterflies will come from the bottom left hand corner of your page and fly up to the top right and off of the screen. A fun background animation effect powered by Three.js and Webflow.

A beautiful sign up page created for Webflow as a rebuild of the Linear sign up page. This sign up page features a large Continue with Google button, while the continue with email button shows the email option after being clicked. This page features a well designed layout with custom buttons, hover effects, input fields and more.

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

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

A unique tinder style swiping module for Webflow. This demonstration uses fish and a tinder like design to like, or dislike fish. This was built using Webflow CMS and Jetboost for the like feature.

Here's a fun technique, using a slider with a hover slider to dynamically change the color of a sites background in Webflow. This was all made with Webflow interactions.

Here's a way to add a simple horizontal scrolling cards section to your Webflow site. The cards are designed for horizontal scrolling on desktop and tablets and vertical stacking on mobile. Since this was designed using Flexbox, you can add/remove cards and the scroll will still work. Although you'll likely want to resize the scroll track if you use a lot of cards. Each card can have a background video added to the card for a neat reveal on hover effect.

Looking to easily add buttons to your Webflow site? Here are 16 different button designs with prebuilt hover state interactions.

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

A simple way of adding a CMS driven stacked slider to Webflow using addClass and removeClass jquery code that is fully responsive. This opens up a new way of adding a 3D stacked effect for your native Webflow sliders.

Here's a cloneable 4 column feature dark variation of a pricing page in Webflow. This feature rich version includes important aspects like tooltip hovers, comparison tables/grids, and sticky headers on page scroll. This version also includes a mobile friendly tabbed version for phones and smaller resolutions.

A unique GSAP velocity based interaction demonstration for Webflow. When a user drags the slider the items react based on the velocity of the drag on the slider. A unique interaction that adds a new dynamic layer to a normally static style draggable slider. Take note that this utilizes GSAP and Observer.js to work properly and you'll find the custom code within the custom code page settings. In this you can update the attributes of the velocity such as the velocity, and CLAMP. You can also adjust the rotation amount, duration and easing used. This is a mobile friendly and desktop friendly slider solution that utilizes the power of GSAP and Observer to work with Webflow's native CMS collection lists.

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.

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.

A vertical masonry image grid lightbox driven by Webflow's native CMS. This allows you to easily integrate a beautiful masonry image grid with a full screen pop up modal upon click. The modal has a lighthouse slider with thumbnails that you can click on and view each individual image within the CMS system.

A simple, yet elegant accordion interaction for your Webflow site. This accordion has pre-built interactions so that when a user clicks on the accordion the information is expanded and then closed on second click.

Another amazing Webflow full screen menu featuring a hover over image preview interaction that allows for dynamic images to be presented. This Webflow interaction creates a fun, yet professional animation to your Webflow's menu.

Here's a unique way to show off your team cards on your Webflow site. When you hover over a card a social media panel appears on the right hand side. The dots are color coded to match the brand color of the social media platform. You can place text or icons inside of these dots as well. On the hover a panel appears with the brand color and a large social media icon. The image rotates -10 degrees to 10 degrees on hover. The animation is pretty straight forward. The only thing to note is that the dots had to placed in the same wrapper so that when you hover over the dots you could target a sibling element within the interaction. This allowed to make sure that the effect could be repeated across multiple cards by targeting the sibling classes of the dots.

A fun way of changing the gradient background color via mouse in Webflow. Please note this will not work in Firefox. This is a native Webflow interaction and just a single line of CSS code. The CSS controls the pointer events to none while the interactions control the location of the blur and it's surrounding effects.

An Instagram feed embed design for Webflow. Add an Instagram styled feed slider embed to your Webflow site that utilizes Webflow's native CMS system. Tie this into a tool like Zapier and you could automate your Instagram feed to your Webflow site without adding bloated third party JS libraries.

Seven different feature layout designs for Webflow. These unique designs allow you to easily add feature sections to your Webflow site. Great looking, responsive designs.

A fancy, full-screen responsive and mobile ready menu navigation. The custom open and close animation is with an animated background gradient that adds some uniqueness to the menu itself. View the youtube tutorial here:

A complete Splide.js CMS slider solution for Webflow. Splide.js offers a great solution over Webflow's native slider solution. Lightweight and mobile friendly this slider offers four different designs and implementations, including a Webflow CMS slider solution using Splide.js. This technique does require custom code that you'll find within the page settings, custom code area. Using this solution you can update the number of items per page, the number of items changed per slide, infinite looping, pagination, speed, drag threshold and much more.