Discover Webflow cloneables

A 3D Splide.js CMS draggable slider for Webflow. This 3D draggable slider created with Splide.js allows you to integrate Webflow's native CMS solution with Splide.js to create a dynamic and interactive slider with Webflow. The slider features navigation arrows and the ability to drag between each slide item, perfect for desktop or mobile. There's also a 3D effect with the slides entering and exiting the viewport. The Splide.js slider allows you to customize the number of items per page, per move as well as various break point functionality for mobile responsiveness. You're also able to modify the delay, duration and easing in and out. This example is infinite looping so that there's no beginning or end and the users can navigate endlessly between each individual slide that is powered by Webflow CMS.

A full UI kit that contains over 40+ different cloneable components and offers a solid base for any Webflow site. The components include hero sections, portfolio sections, content sections, team sections, blog, CTA, FAQ, buttons and footers.

Here's a wonderfully designed mega menu navigation with dropdowns for Webflow. This mega menu is perfect to get your navigation built quickly for your Webflow site. Featuring multiple different dropdown styles, perfect for any Webflow project.

A set of unique and interesting image slider transitions including distortion and warping effects made with WebGL. The code was modified to behave as bidrectional looping slider. This works on both desktop and on mobile.

Here's another way of achieving a full page/section sticky with a pagination indicator using PagePilling.js. Here are some notes. Start with a div with ID pagepiling. Within the div create several sections with the class section. Make them a height of 100VH. Add the code found on the page to your head tag. Add the code to your body tag. You can then customize it with anchors, scrolling speeds and navigation based on the GitHub here: https://github.com/alvarotrigo/pagePiling.js/

A smooth and easy to implement jQuery accordion for Webflow. This accordion was built using jQuery rather than manually creating all of the interactions in Webflow. This is perfect if you don't want to mess around with Webflow interactions or aren't comfortable with using interactions. You'll find the custom jQuery code for this accordion within the custom code in the page settings. In this jQuery code you signify the speed of opening the accordion, close all other accordions if another one is opened, activate scroll to top for active item, the offset of that scroll and the delay before being moved to that item. You'll then update your class names based on if you updated them in your designs. Overall this is a clean and easy to use jQuery animated accordion if you aren't someone that wants to utilize Webflow interactions.

Add a character count to an input field on your Webflow site. This is perfect for creating limitations or showing the character count of an input field.

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

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.

A beautifully designed pricing page for recurring services in Webflow. The pricing page template has monthly and annual toggle interactions, additional perks/plans/discounts information, an accordion FAQ, footer and navbar.

Cards with a full page transition effect upon click. Upon clicking the transition effect and full screen modal is loaded. Each card has individual colors. Be sure to watch out for the combo classes upon duplication and adding new interactions for each card.

An example of a fixed slogan/text that changes when scrolling through different sections on a Webflow site. The embedded code is compatible with all major browsers, including some variations of Internet Explorer and Edge.

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.

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

A custom slider that changes the size and focus of the slide after it changes to the next slide. Perfect for emphasis on the main slide while maintaining a transition effect for the other non-primary slides in Webflow.

A custom slider transition that zooms into the next slide for Webflow. A great way to customize the boring slider transition and adding a unique flair to your sliders.

Easily add a tooltip to your Webflow site with one of three different premade designs. These tooltips come in three different variations and include the necessary interactions required. The tooltips feature every possible direction needed, from left tooltips, right tooltips, top tooltips and bottom tooltips.

A unique demonstration of using GSAP Flip & Scrolltrigger to move a video around the page based on the users page scroll in Webflow. As the user scrolls down the page the video transforms and moves in different locations on the page. It grows, rotates, and shifts locations, becoming the background of a section, moving to the right of a card and following the user throughout the navigation throughout the site. This method requires the custom code found within the custom code section in page settings. Utilizing GSAP, Flip.js and Scrolltrigger.js you can customize the locations and targets based on element IDs. Be sure to check the page design as well since there are custom CSS HTML embeds found on the page as well.

A full screen menu for Webflow with hover over interactions. This menu features all the native Webflow interactions required for building a full screen menu. When a user clicks on the hamburger button the Webflow menu slides in from the top. Each menu item includes a hover over interaction in which the cards expand and the colors turn from black to white background and the fonts also change at the same time. Closing the menu slides it back to the top of the page.

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.

Adding and playing audio on Webflow can be difficult. Here's a way to have as many different audio files as you want which will play/pause every time you click a button. Please note that this only works on the published site and not the builder. Add an embed block on your project with as many audio tags as you want. You have to use the unique id for each one. For example, <audio id="player1" loop src"your-song.mp3"></audio> The second one needs to be labeled with id player2. Add a button for each audio tag with the unique element ID of the previous items. Copy the code within the before body tag with the ids of the buttons that you added.

A demonstration of text clipping with a gradient and a background image. The fontset used in this example is Heatwave Typeface.

Here's a way to customize the select drop down field via nice select jQuery plugin. This allows you to customize the dropdown field style and design in your Webflow site. The customization process was made simple. In the navigator you will see a custom code element called style-settings. Open that up and you'll see different options for color and spacing. Comments are used so that you know what does what. Simply copy and paste your own color and spacing values. Finally you need to initiate the script code located in page settings under custom code. You can also grab the style code in custom code settings so that it translates across your entire site if you happen to use this site wide.

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.

Three different testimonial sections for your Webflow site. These free testimonial sections include two slider designs and one non slider to feature testimonials on your Webflow site.

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

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.

A rebuild of the Who Wants to be a Millionaire gameshow screen in Webflow. Built with some custom code.

Here's a way to create a layered, blurred div effect in Webflow. The blurred div sits on top of another div and creates a transparent layer that blurs the bottom div. A great way to add depth to your Webflow site and opens Webflow up to all types of possibilities.

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

A set of Scrollify.js section scroll interactions and unique Webflow interactions to make for section scrolling interactions in Webflow. This cloneable features Scrollify.js and the settings can be found within the pages custom code section. Each section has a custom class added in which the scrollify.js script utilizes. Each section utilizes Webflow native interactions Scroll into view in which several different individual actions are applied such as , move, opacity, scale, rotate and opacity. In this example the Scrollify.js script is being used to snap each section on scroll and all of the other interactions are powered by Webflow. While this could have been built with Webflow interactions as well the author decided to use Scrollify to limit the number of interactions per section.

Here's a technique to add growing divs or sections on mouse hover in Webflow.

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.

Here's a way of using CSS grid and a small amount of custom code to create a postage-stamp style layout for projects tied into Webflow CMS. A great way to add a custom grid design in Webflow hooked to Webflow's native CMS.

A horizontal scrolling timeline of events driven by Webflow CMS. You can navigate through the timeline both vertically (below) and horizontally. Both lists stay in sync. The vertical section shows more notes and links regarding the timeline events. This timeline is CMS driven and there are two collections, one for the events and one for the categories of each events. Each year of the timeline is made out of one collection list. There is more info on how this works at the bottom of the page, specifically how the CMS and CSS calc work. This could be great for about pages, client timeline pages, and much more.

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.

Here's an easy way to implement a Webflow form to Mailchimp. Everything in this cloneable is done for you so that you can easily add your own Mailchimp connection to Webflow's native forms. Simply update the Action URL in your Embed form.

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 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 3D rotating cube that can be customized with images or videos, which can add a nice dynamic level for your features section. The effects are achieved via Webflows native interactions and transforms.

Add a flock of interactive flying birds to your Webflow site via three.js and vanta.js. A wonderful way of adding an interactive background of 3D birds flying to your Webflow site. You can edit the following sections of the custom code for further refinement. You can edit: backgroundColor: 0xffffff, color1: 0xf70707, color2: 0xff5a00, birdSize: 0.90, wingSpan: 29.00, speedLimit: 4.00, separation: 22.00, alignment: 21.00, cohesion: 21.00, backgroundAlpha: 0.93

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.

Knockup is an end to end Figma to Webflow framework created by Edgar Allan. It helps designers and Webflow designers accomplish more by working together via an easy to understand framework. This framework defines the approach that Edgar Allan uses for all projects, from single page sites to large scale enterprise arrangements.

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.

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

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

A nice background animation with a very small fie size. Download the JS files, download the .txt fill file Search for backgroundColor Change the hsla code Upload the new file Link the new script in the script tag

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

Here are 9 easy to use minimal page transitions for your Webflow site. Add some dynamic flair to your sites page transitions via these premade Webflow cloneable transitions.

Want to create custom text highlighting and underlining in Webflow? Webflow makes it easy to add customized highlighting and underlining via span classes. This cloneable demonstrates how to create any type of highlighting or underlining variations that you could dream of using Webflow's native text span.

A beautifully designed estimate, investment portfolio, quote page in Webflow. Perfect for an investment portfolio/funds, or anything requiring detailed investment/financial quote structures. With a little bit of work this could be made both responsive and CMS driven, allowing for clients, employees or others to make this for internal sites.

A free dashboard collection for an ecommerce company.

A very complicated, and advanced cloneable featuring hover effects for a portfolio site. This demo includes a custom, animated cursor, hover effects that change images/divs, text clipping that fills text based on the cursor location. A great example of how Webflow can create a number of different effects, all at the same time. All of this is driven via Webflow's native CMS.

A simple way to add social media links with a hover animation to your Webflow site.

A full page background video hero section design in Webflow. An easy way to integrate a background video hero section in your Webflow projects with unique button interactions, and a scroll indicator.

Here are two different examples of logo animations in Webflow. Great inspiration for ways that you could animation your Webflow site logo with native interactions.

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

Unleash the power of GSAP Scrolltrigger toggle in your Webflow projects. This allows you to create complex, and yet lightweight effects powered by both GSAP and Scrolltrigger. This CMS powered GSAP & Scrolltrigger effect showcases a hero section in which three different slides transition between each other based on the users position on the page. After the initial hero the second section features different words and images that ease in and out based again on the users position on the page. These sections are utilize Webflow's native CMS to power each slide. You will find the custom code that powers this under the pages custom code settings and it allows for you to customize the items, the trigger element, the timeline and mobile friendly attributes.

A triple pricing table design for your Webflow site. This component includes features comparison, primary/focused table, hover over effects and much more. A modern design that features shadows and rounded corners and buttons.

A unique button design for Webflow with hover interactions. This purple styled button features a hover interaction in which the purple arrow expands and grows when hovering and then shrinks back to the original design on hover out. All of the button animations are built with native Webflow interactions.

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.

Here's a minimalistic 404 page design with a doorknob hanger sign animated via Lottie files and interactions.

Three different advanced modal examples for your Webflow sites. Automatically adds scrollbar if the content exceeds the maximum height of the page/modal. Also features modal with the scroll the complete modal height, scroll the content within the modal, and ability to lock the background if you happen to scroll outside of the modal window.

Here's a great style guide template that you can clone to use, or modify for your own Webflow sites. It's built with a grid page and bootstraps 4 style columns. It includes a typography section, color palettes, button designs, form inputs and labels including checkboxes and radio buttons. Cards with shadows and much more.

A free Webflow login in/sign up page design with unique loading interactions, custom inputs and much more. A perfect cloneable to easily create a login or sign up form for your Webflow site with fun style 3D illustrations and loading animations.

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

A simple service membership sign up and login page design in Webflow. The form features a show/hide feature, preinstalled with Memberstack, styled select field, checkbox, email, name and password.

A well designed scrolling sections that utilizes no additional page code or custom codes in order to achieve the effect. As a user scrolls down the page it appears that each section is on a different Z-index, which in turn makes it seem like the sections are unfolding. There's also a unique text masking effect being applied to one section so that the text appears transparent and you can view the background change in the text as you scroll down. As mentioned this cloneable doesn't use custom code or even Webflow native interactions to showcase it's effects. Instead it uses Webflow designer and unique positioning and text masking functionality.

A low tech javascript free pattern generator that combines a list of colors and shapes to create random geometric patterns via CMS.

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 fun glitching animation effect in Webflow and a mouse hover masking interaction with a custom cursor icon.

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.

Here's an example of a 360 degree image showcase featuring Nike Air Jordan 1 Retro High Spider-Man origin story. Please note that this example only works on desktop currently.

Here's a way of adding an animated progress bar to your Webflow site. All you need to do is update the width % to your preferred number. The animated progress bars add a fun Webflow interaction animation to the metrics section of your Webflow site.

Here's a way to add a image splitting interaction on hover in Webflow. Using a grid and clip path to make this interaction happen. With this example when someone hovers on an image, the image opens in half and a text description is shown.

Show/hide image on text link hover.

Add a fully responsive preview of your Airtable database in Webflow

A fun concept of a fan site for the Matrix. Utilizes a moving background code screen much like in the movies.

A fun exploration of SVG text effects as loading/enter pages in Webflow. This demonstration features three different circular SVG intro animations of differing color schemes and effects. The animations are all created via Webflow's native interactions and require no custom code. The animations are created with SVGs and a combination of Webflow scale, opacity and hide/show interaction states.

Here's a way to add a dropped in text underline on hover in Webflow. When you hover over the multiple lines of text an underline interaction is triggered and the underline appears over the text.

A funny "game" inspired by Tinder's swiping functionality in Webflow. The site is best viewed at 1440 x 900 in desktop. This mini game is not built using Webflow's CMS and uses sections to create each swiping style page. This was built using Webflow's interaction and doesn't require any extra code.

A simple, yet modern hero section for SaaS and similar companies in Webflow. This cloneable hero section is a perfect way to quickly add a well designed hero section to your Webflow site.

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 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 subtle, yet clean gradient moving background interaction created for Webflow. This cloneable was built with only Webflow native interactions and does not require any additional code or HTML embeds. The effect was created by adding 4 different circle gradients to a gradient wrapper. The moving gradients uses Webflow interactions page load trigger and manipulates the scale of each item over a timeframe. Essentially each item grows and contracts at different intervals creating the appearance of a moving gradient background that isn't overwhelming.

A demonstration of using Sketch.js for a background interaction within Webflow. Using sketch.js the background of your Webflow site becomes a drawing canvas in which users can move their mouse and it creates a design on the background of the Webflow site.

Here's how to utilize a Deck of Cards API via GitHub, VS Code and jsDelivr with your Webflow sites. Be sure to check the tutorial video and GitHub repo to tie it all together. A nice way of understanding how to make Webflow content even more dynamic via the power of low-code.

A demonstration of how to add an infinity cycle text header rotation with 3D style changes in Webflow. This technique uses native Webflow interactions and does not require any 3rd party scripts or plugins to work properly.

A dynamic info card hover interaction for Webflow. When a user hovers over the card a box moves from the title and displays a description while the image changes to color. A wonderful interaction that adds a level of animation and interaction to an info card.

Here's a way to dynamically change font size on click. This allows you to offer different font sizes for content for your viewers and readers. A wonderful technique to help accesibility of your Webflow sites.

An amazing, sweeping slider interaction perfect for any Webflow site. The interactions have a custom scroll indicator, automatically transitions slides and provides a unique sweeping transition between slides. Perfect for a hero or landing page in Webflow.

An example of how to create a sticky navigation sidebar in Webflow. Perfect for blogs, article pages or other sites that require a sticky sidebar in Webflow. In this demonstration there are three examples of sticky sidebars to showcase that multiple can be added to the same site.

An interesting concept of building a FPS via Webflow, doom style game. This uses a rotating 3D box and is positioned as though you were inside of that box. Then added some controls so that it seems that you are moving inside of the box but it's actually the box that gets moved around. A fun demonstration of what's capable with Webflow.

Here's a way to create a tabbed style slider for Webflow with unique transitions. The previous and next slider buttons are removed and each of the sliders are numbered. Upon clicking on the next number the text and images are slid in via a unique transition. Perfect for changing the way that your slider can be built and displayed within Webflow.

A fully native dark-mode toggle button to convert your Webflow site into dark mode or light mode at the switch of a button. This technique utilizes Webflow's native interactions and the Filter, BG color, text color and border color functionality.

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

A fully built FAQ accordion section powered by Webflow native CMS collection with native interactions and animations. A great way to add a frequently asked question section to your Webflow site or clients site that is powered by the Webflow CMS system.

A method to highlight text on page scroll in Webflow. A unique a fun interaction in which the text on the page begins to highlight as you scroll down the page. Each letter even partially highlights depending on where you've scrolled on the page. This effect uses GSAP and Scrolltrigger.js to create the effect. You'll need to add the custom code found on page settings for this to work properly.

An amazing background color changing on timer for Webflow. The background color changes automatically based on a timed interval of your choosing. The animation uses a small snippet of JS within each page. In order to change the colors you will have to change the hex code in the array.