Discover Webflow cloneables

A simple yet clean header hero component for your Webflow site. This features a large headline, subheadline, call to action and product image section. It also has a basic menu section and is fully responsive.

A liquid 3D mesh net with gradients and transitions engulfs the background of your Webflow site. Inside there are shaders and code found in the page. You can adjust the values to customize the effects of this liquid 3D mesh design.

Here's a demonstration of utilizing ztext.js for 3D text effect on mouse move in Webflow. The background was created from an SVG generator.

A product card that displays the title on hover and follows the mouse in Webflow. This interaction is a very well designed interaction that flips the image and provides the title on mouse hover. The title then follows the mouse cursor over each card, displaying the relevant product names title.

A custom, automatic slider with unique animations on Webflow. It was made with Webflow with custom interactions.

Here is a 3D info card animation on hover in Webflow. When you hover over the card an image panel rotates in horizontally to reveal the content. The effect was achieved by adding a div block with a child perspective applied to it. Then another div blcok was added inside of the 3D wrapper. With the interactions this div block was rotated from 90 degrees to 0 degrees on the X axis. Since the wrapper has a child perspective it creates a 3D effect for the panel as it comes in. It also has a reveal from top to bottom as the panel comes in.

A smooth scrolling effect in Webflow that zooms into images as the page is scrolled. Perfect for adding smooth page scrolling and an image effect within your Webflow site.

A fun way of adding dynamic radio inputs animation to your Webflow site. When you click on the radio inputs they expand when selected. Simply clone the project and add this dynamic interaction to your Webflow project.

A fun and clean hero and menu loading interaction in Webflow. When a user loads the page the text appears to load at different intervals, move around and then eventually load the entire page including the menu. There's a scrolling text marquee at the top of the page, parallax style scroll interactions, a menu with slide in interactions and much more. This was built using all native Webflow interactions and was built with the Finsweet client first framework and is fully fluid responsive.

Build a dynamic and interactive photography hero section in Webflow easily. The hero section features a 12 slider layout with slides moving in and out in opposite directions, a modern page load animation and a full screen menu design.

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 responsive, full-screen, Vimeo video embed in the background of the site on Webflow. Please note that you need to visit Webflow's cloneable page of this item to preview it. Change out the video link in the video-embed element nested in the video-wrap div.

Three modern author/bio box designs for Webflow. Easily add a customized, modern author bio box to your Webflow site with one of these three premade layouts that are responsive and well designed.

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

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.

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

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

An infinite slider design for Webflow built using Webflow's native slider and interactions. This fully responsive Webflow slider features unique hover over interactions in which the next and previous navigation appears only on hover. The slide continues endlessly by looping to the starting slide upon finishing the rotation.

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 way to add a nice gradient color transition for a button on the hover state. This is accomplished by using only Webflow interactions.

A portfolio example site built with grid and then made responsive via Flexbox on tablet and mobile. Watch the tutorial here: https://www.youtube.com/watch?v=zp50_iWll8Y

A simple yet effective Webflow sign in/login page featuring Google and Facebook social sign in. This form features native Webflow input fields with states, checkbox and buttons.

A beautiful Swiper.js overlapping cards slider built for Webflow. This Swiper.js slider is perfect for a hero section or features section of a site. When a user navigates between slides the top card is removed and the next card in line comes into view. The cards are stacked with various offsets so it looks like playing cards. There are text transitions for each text associated with the slide. This slider was created using Swiper.js and utilizes Webflow's native CMS collections. This allows you to dynamically generate slides based on the collection list items. This requires custom code so be sure to look at the pages custom code for the Swiper.js code. You can modify the Swiper.js code to include grabcursor, looping, and utilizing arrows to navigate between slides.

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

A styleguide for Timothy Ricks Wizardry technique in Webflow. This styleguide will add the core elements of the Wizardry technique to your Webflow site.

Here's a walkthrough and tutorial of how to build a contact form in Webflow. View the tutorial here: https://www.youtube.com/watch?v=H8-fbOJpC5I

Here's a demonstration of a frosted glassmorphism card with hover and mouse interactions. An easy way to add a glassmorphic effect to your Webflow site.

A simple but unique text link hover animation powered by Splittext.js, CSS and custom Javascript. When a user hovers over a text link the letters produce a splitting animation in which every other letter moves in alternating directions. There's also a sound effect that plays that's simple yet effective. This cloneable also features a mouse gesture in which a ball follows the mouse cursor location, when hovering over the text link the ball increases in size and then appears appears to text mask and invert the colors of the text that it's hovering over. If you plan on using this cloneable keep in mind that you'll need to add the custom CSS found in the custom code page settings as well as the Splittype.js script. The splittype.js script can be modified and relies on the css class .menu-link in this example. You can also customize and define the audio files in the script, although keep in mind that you'll want to host these externally. The cursor effect is built with Webflow's native interactions using Mouse click interactions.

Here's a way of adding a custom countdown timer/clock to your Webflow site courtesy of Smooth.js. A perfect way to add a custom, coming soon style landing page within Webflow or adding a customized countdown element for whatever need you may have within Webflow.

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

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 is a way to add a countdown clock component to your Webflow site. This simple script will take your chosen date and provide a countdown for the days, hours, minutes and seconds. Perfect for a coming soon page, product release page and much more.

Show/hide image on text link hover.

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.

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.

Connect Webflow's native CMS to an image plotter via this cloneable. With this cloneable you can add an image plotter to highlight features, locations, items, product features and much more. The multi-reference highlight items to each main gallery image item using a simple top and left coordinate value to set the specific location of the dots on the image. Each highlight dot also leverages conditional visibility to adjust the position of the tooltip image polotter depending on the location of the dot and whether or not the values were set in CMS.

A CMS driven hover slider for Webflow. Swipe on mobile or use your mouse to navigate on desktop.

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

Here is a unique project flipping card animation for Webflow. In this example the cards flip 180° upon clicking on the card, the card also has a hover over animation in which the stars scale in and out behind the image. On the mouse move the image moves around the card. For the stars a 6x8 grid of 50x50 blocks were created and added within two div blocks inside the cross. In the interactions they are set to rotate, scale and loop on hover. On hover out the crosses go back to the original size and stop rotating. For the image moving there is a mouse move over element interaction and moved the image 20px to each side as the mouse moves around the card. On click the card flips via a rotation to the card, so it was placed in a 3D wrapper and added child perspective to it.

For a CMS collection making alternative grid items isn't possible natively, unfortunately. However using a unique technique you can accomplish this. The first line of code forces every second item to go from right to left. The second line then forces the text wrapper to always be on the left so that our text doesn't get messed up. Browsers support this method fine. Check out the custom CSS code to accomplish this technique.

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

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

Here's a way to add multi-step contact forms to your Webflow site. This allows you to build out large contact forms that don't feel daunting to the user. Each step has a relevant transition and effect.

A fun glitching animation effect in Webflow and a mouse hover masking interaction with a custom cursor icon.

Here's a way to add GSAP velocity scroll effect to your Webflow CMS image library. Using this technique the images create a shredding load effect which is based on the Webflow native CMS library and images found in that library. A good demonstration of how you can use GSAP with Webflow CMS.

A custom WebGL draggable slider with 3D effects in Webflow. This is a very unique and cool effect to achieve a 3D expand and collapse between transitions on your Webflow site. You can update the text, links, and images in footer via the page settings. Easily modify the effects speed, frequency and more in the footer via the page settings.

Add a click to text functionality to your Webflow site. Using this functionality when someone clicks on this link it'll open their default text messaging app to send a message via text message. Please note that this uses an HTML text link embed in order to function properly.

Ever wanted to create your own, customized scrollbar in Webflow? Now you can use any image you'd like to replace the browsers standard scrollbar. In this example a loaf of bread was used to customize the scrollbar. You can find the custom scrollbar code within an HTML embed found on the Webflow cloneable.

A free Webflow cloneable for a social sharing button interaction. When a user hovers over the button it expands to showcase 4 different social sharing sites, Behance, Dribble, Instagram and Twitter. This social share button was created solely from Webflow interacations and is a fun way to add social sharing or a contact to your Webflow site.

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.

Dark mode toggle for Webflow driven by a cookie so that it remembers your users settings on whether or not they want dark mode or light mode on your next visit.

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 unique gradient hero text animation in which the text of the hero section becomes a gradient a timed interval. This technique uses Webflow native interactions and a little bit of custom code.

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

Using three.js and vanta.js to accomplish a 3D interactive polygon water background effect for Webflow. This interactive background allows for a ripple and water effect to be added to your Webflow site. When a user interacts with the page the water changes views and dimensions. You can edit the following variables based on your requirements. You can edit: shininess: 150.00, waveHeight: 26.00, waveSpeed: 0.70, zoom: 0.65, color: 0x368bbe

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.

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

An interactive dark Chrome mockup design for Webflow. This Chrome browser window mockup is perfect to showcase screenshots of product pages and page designs. This is built entirely in Webflow and utilizes a number of native Webflow elements such as forms, interactions and more to create a beautiful interactive Chrome browser window.

A grid layout with parallax style effects in Webflow. This unique grid layout features a text masked headline section and a unique grid that's ready for a parallax style effect. A unique way of demonstrating images and the power of Webflow interactions.

No javascript, no interactions, easy CSS scrolling marquees for your Webflow site. This is the easiest way to add marquees to your Webflow site without ANY confusing interactions or complicated JS solutions. Please note that you must have an even number of elements within your marquees for them to function properly and not skip around. The CSS for each marquee is included inside of the container and denoted with an emoji.

Featured in the Webflow 2021 Year in Review site (https://webflow.com/year-in-review/2021), this Love button uses the Matter.js library (https://brm.io/matter-js/) — a 2D physics engine for the web — to make hearts fall and bounce around as if they have weight. Customize it by adding your own shapes, tweak the speed, or make it rain puppies instead. The sky’s the limit.

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.

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.

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.

A drag and drop interaction for Webflow. This turns the elements into draggable and droppable objects on your Webflow site. A great way of adding some unique interactions that bring your site to life. Please note that there is custom code in the closing body tag and a style embed.

Here's a way to add a text reveal on scroll to your Webflow site. An eye catching animation reveals the text as the user scrolls down the page. An underline appears and then glitches the color and finally rolls away as you scroll.

A way of creating a stacking testimonial card section in Webflow on scroll. As the user scrolls down the page testimonial cards are stacked on top of one another. This technique was built primarily with Webflow interactions although does use a HTML CSS embed for the numbers on the card. You can remove this if you don't plan on using the outlined numbers found in this demonstration.

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

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 great way of displaying videos within a mobile iPhone mockup. You can design the story layout and upload multiple videos into one mobile frame.

Here's an example of a live search built with Jetboost. This uses the real time search booster and power-ups to mimic a live collection list search like Algolia in Webflow.

A stunning, beautifully designed hero section for Agency's created in Webflow. This unique and free hero section includes custom cursor with masking effects, full screen slider with custom navigation dots and slide change transitions and a full screen hamburger menu.

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.

Horizontal vertical marquees are easy to create in Webflow. However vertical infinite scroll marquees aren't as prevalent. Here's a way to create a vertical infinite scroll marquee in Webflow. This example even includes a masking hover over effect for each different scrolling marquee. Each marquee is built with native Webflow interactions and no custom code.

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.

Here is a wonderfully designed blog card animation on hover in Webflow. When a user hovers over the card the image rotates, a color overlay appears, and the date of the blog post appears. The summary panel below also moves up. When hover over the read more button the background and text changes color. The way this was achieved was by adding all the elements and then animated via interactions. for the image it was placed inside of an image wrapper and set the overflow of the wrapper to hidden. The width and height of the image changes to 150% so that when it rotates it is still visible inside of the wrapper.

Here's a way to achieve a sticky horizontal scroll section within your Webflow site. Using CSS sticky and interactions you can now have a showcase section that horizontally scrolls on scroll down in Webflow.

A very cool scrolling spiral menu text effect. Opens up a fun opportunity for a unique full screen menu build.

Not just another vertical CMS marquee, this one is powered by GSAP and provides extra functionality. The vertical marquee provides a constant infinite loop of text. As the word comes into view a second text area updates to showcase the relevant text for the primary looping marquee text. A great example of utilizing GSAP to add increased functionality to an otherwise normal marquee. This also utilizes a bit of CSS so be sure to not overlook that when you are adding this to your site. You can customize the script to your liking and increase or decrease the number of items visible and the speed of the looping.

Here are several demonstrations of mouse hover interactions as well as text page scroll animations and transitions for various sections of a Webflow site.

A demonstration of how to add a Chart.js bubble chart to Webflow. This technique uses an HTML embed to work properly so you'll need to add the HTML embed to your Webflow site. This method could technically be tied into Webflow's native CMS to allow for the CMS system to update and populate the Chart.js chart.

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 colorful pricing plan design table for your Webflow site. Easily copy and paste this design to your Webflow site and add a pricing page in no time.

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.

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

Here's a highlight effect on text hover animation for Webflow. When a user hovers over text a highlight style animation interaction is displayed. This is perfect for a menu or other type of text with a unique underline animation on hover. Each menu item has a title and phrase. An underline appears under the title and the phrase at the same time and scales back on hover out. The phrase also moves a bit to the right on hover.

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

A demonstration of using Spline to create an interactive and embeddable 3D background. This interaction will not appear on the project preview and you'll need to visit the actual page to learn more about this technique.

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.

Here are a collection of 16 different footer designs, all responsive and fully customizable and ready to be added to your Webflow sites. A great way to add a footer to your site quickly.

Here's a unique way of showing images, app screenshots or more in an iPhone mobile slider. The images continuously rotate through and infinite loop.

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

A modern cloneable accordion grid for Webflow. This accordion grid is a free and easy copy and paste cloneable built with all necessary interactions so that you can quickly add an accordion to your Webflow project.

This is absolutely wild, this is a demonstration of Civilization 6 built with Webflow. This cloneable features 12,400 elements, 1,800 styles, 1,200 assets, and 400 unique interactions. This demonstration shows the possibilities of what can be created with Webflow. The game features all 46 leaders along with their individual soundtracks and nearly every feature of the game. This project comes in at a whopping 124 GB. A true testament of what you can create with Webflow. With this cloneable you can dive in and see exactly how it was built. What's most impressive is a majority of the site is powered by Webflow's native interactions, there are is som additional code but the code is very limited for a project this large and with this many different interactions. Be sure to take a look as you don't want to miss it.

Here's a login or sign up page with slider in Webflow. A wonderfully designed sign up or log in page designed in Webflow with an automated slider. This can help jump start your Webflow projects and provide key pages for sign up and login. With custom input form fields with needed states, and error checking.

Bring your videos to life in Webflow with this unique hover over button animation. When you hover over the play button the button creates a loading style animation via a micro intraction.

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 simple method to create video explainer tour widget in Webflow. You'll need to view the live site in order to test the experience. This method allows for a way to embed a video into projects to help create an explainer video.