Discover Webflow cloneables

A simple and easy to implement dark and light mode toggle for Webflow. This method was built using Webflow's native interactions and doesn't require any custom code.

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 full SaaS pricing table design for Webflow. This pricing page includes a monthly/annual pricing table, features sections, accordion FAQ and much more. This includes a fun hover interaction, updated page copy and font styles.

Four different individual text animations created with Anime.js for Webflow. These animations each create an individual letter loading animation on load. Please note that this only works on the published site. To get this to work give a class to the text that you'd like to animate. For example, animation1. Add a span to the text and give it a class of letter. Copy the code on the settings, before body and make sure that you change the class to the one that you used in the first step.

Five different image mouse trailing effects in Webflow. When a user moves the mouse cursor on the site the images pop up and follow/trail the cursor. These different effects allow you to add a new layer of dynamic elements to your Webflow site that open up all types of possibilities.

Here's a way of adding a full page infinite scrollable and draggable grid in Webflow. This grid is fully draggable in ALL directions, horizontal and vertical as well as in any other direction. A perfect way of adding a unique design for portfolios, photography and much more in Webflow. This can also be used to tie into Webflow's native CMS system.

A full UI kit for your next Webflow site. This includes just about everything you could ever need, including accordions, breadcrumbs, buttons, checkbox, code snippets, data tables, date pickers, dropdowns, file uploaders, forms, loading elements, lists, pagination, progress indicator and much much more. This is a great source for just about every type of element you'd ever need for your Webflow projects.

Here's a unique test/experiment to create an advanced LED display hover effect in Webflow. This is a great demonstration of what you can build with Webflow interactions and may lead to some. inspiration for future Webflow project builds.

A high quality CMS Swiper.js slider that's perfect for your Webflow site. This slider features a draggable list of items driven by Webflow's CMS collections. When the user clicks on one of the items it expands the card into a full screen view and provides additional information about that card. This is perfect for pages in which you want to keep the users on the page but need to provide additional information about that slider item. As mentioned this utilizes but also uses GSAP, CustomEase.js to complete this interaction. The custom code can be found in the page settings and uses cookies to store visited information. This is an advanced slider solution and I'd recommend this only to people familiar with coding, Javascript and GSAP & Swiper.

A fun way of adding a stair melting text transformation animation on hover in Webflow. Perfect for adding a dynamic layer of text to your Webflow site's header or headline section.

A way of adding a slider before and after scroll reveal. This was a clone from Udesly.

A fully cloneable animated blurry gradient background that can be used on your hero section, or other sections of your site. Helps add a layer of dynamic elements to your Webflow site. This is a 100% native solution with Webflow interactions and utilizes colored div blocks with CSS scaling.

Here's a way to add a counting timer in Webflow with a slider effect. This is a combination of Webflow interactions, CSS animations and custom JS. Since this is a custom CSS animation, it is completely based on attributes and more importantly modular. When scrolling down the boxes rotate out of place and create a fun interaction.

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

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.

Looking to create a rotating text effect for your headline and hero section? Here's an easy way to add this effect to your Webflow site. This also works in the preview/designer via a custom HTML code embed.

Unique, lottie backgrounds that add a dynamic layer to your Webflow site. Static backgrounds are boring, add some flair and uniqueness to your Webflow site with lottie backgrounds.

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 beautiful WebGL colorful background animation on page load. A great way to add extra color and a dynamic element to your Webflow site.

Here's a way to add a count up preloader screen to your Webflow site. This preloader counts up based on the amount loaded to create an adaptive preloading screen that's perfect for any Webflow project. This includes a loading bar/progress bar as well as the percent loaded text field. This technique utilizes GSAP and CustomEase.min.js in order to work properly so you'll need to view the custom code page settings to get the relevant code. This code also checks to see if the user has visited the site previously and creates a cookie if they have not. A simple yet effective way of adding a truly dynamic preloading page that captivates the user as your site is loading.

Integrate GSAP scroll text effects to your Webflow site. Eight different text scroll effects powered by GSAP for your Webflow site. The effects include words sliding up, individual words rotating in, words sliding in from the right, individual letters sliding up, individual letters sliding down, and individual letters fading in. This effect utilizes GSAP, ScrollTrigger and split type in order to work properly, you'll also need to add and modify the pages custom JS code in order for it to work. The code can be modified to change the start offset of the effect, the opacity, the duration, the ease effect and much more. Unlock the power of GSAP for various text effects today in your Webflow projects.

Want to add a range slider to Webflow? Here's a way to add a range slider inside Webflow using Finsweet's Attributes. This slider can be used for either forms or filters on your Webflow projects. Please note that you'll need to add a custom JS library found within the head tag in order for this to work properly. Also check the documentation in order to ensure you've set this up correctly.

A beautiful product & feature grid section for Webflow. This product grid uses flexbox and grid and the icons are SVGs which inherit their color from the parent section.

Want to compare two products or images on your Webflow site? With this cloneable you'll be able to add an image comparison section to your Webflow site. This is perfect for product comparisons, service comparisons and much more. Please note that this utilizes Beerslide.js so you'll need to add the custom code found in page settings for this to work properly.

Here's a unique way to add transition animations to a full screen slider. Using both Swiper.js and a GSAP animation script.

A demonstration of product cards in Webflow that utilize hover over interactions to effect both image and title. When a user hovers over the cards in Webflow the image div grows and the title appears to follow the mouse while hovering over each card. A fun interaction and a way to showcase products in a unique and creative way.

Here's a way to create a mouse tracking text effect in Webflow. When a user moves their mouse around the page the text is manipulated based on its location on the page.

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

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

Want to use Tabs with Webflow sliders to show off your products? This cloneable allows you to showcase a variety of products via tabs with sliders on each internal tabbed results. A great way of displaying a large number of products in a small area.

A dynamic pricing table with features that dynamically change the pricing for Webflow. The value of each item can be toggled based on the feature set required and the price updates dynamically based on the required features. Please note that the dynamic pricing, and other features like checkboxes are all accomplished via custom symbols and JS embeds.

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/

Add custom CMS slider with stacking and overlapping cards.

A fun way of adding a little retro 3D grid animation with overlay scan-lines to your background/site.

A full set of social media brand icons in black and white for your Webflow projects. There are several different variations, all in black and white, including SVG icons, button classes, embed boxes and Font Awesome icons.

Here's a way to have Webflow's native slider adjust to the height of the contents within each slide. This allows you to dynamically change the size of the slider based on the height of each slides content rather than having the content adjust to the height of the entire slide module.

A unique gradient glowing text effect for Webflow with unique hover interactions. Playing with backdrop filters, SVG clip path, and linear gradients you can now add a unique glowing text effect to your Webflow projects. Just hover over the image to reveal the animation. Be sure to add the custom HTML embed found on the cloneable to ensure that this works properly.

20 predesigned CSS link hover effects perfect to copy and paste on your next Webflow project. Each individual text link hover effect includes its own CSS for the hover effect. Simply add this to a custom HTML embed or to your sites custom code section. Effects include strikethrough, double underlines, scramble, moving in from both sides, growing and much more. A simple way to easily enhance your sites experience through simple, micro interactions.

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.

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.

A style guide framework built in Webflow so that you can easily build and create a style guide for your projects/clients in Webflow. This framework lays out all the elements, tools, components and resources used to develop them. This is based on the client-first methodology by Finsweet.

Here's a way to add a control panel animation to Webflow similar to the Apple control center. There are two animations that still need polishing however this is a great way to add a unique navigation menu to your Webflow site.

Here is a unique button with hover animation in Webflow. When you hover on the button the border outlines in a cut from two different points which makes the line look segmented. When you hover over the button the lines seem to move in a clockwise fashion and then reverses on hover out. This was achieved by placing two skewed div blocks at the top and bottom of the button with. the same color as the background. The div block was placed precisely on top of the button border. This makes it look like the border is being cut. Then those to blocks are moved left and right on hover to make it seem like the lines are moving. It's a subtle, yet unique effect that adds an interesting effect on hovering on a button.

Here's a fun way to add a 3D text stroke effect on hover in Webflow. When a user moves the cursor around the page the text creates a 3D stroke effect following the cursor around the page.

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 another way to add full page scroll snapping functionality to Webflow via Fullpage.js. In this example you can see full page, smooth snapping section on scroll. Please note that you'll need to add the custom code found within the page settings found in both the header and body sections.

A beautifully designed multi step form with unique animated input forms for your Webflow site. Even if you don't use the multi-step form the input label animations are a great design and perfect for any Webflow site contact form/checkout form.

Here's a unique, 3D infinite scroll marquee for Webflow. To create this effect two blocks are created within a wrapper with a perspective applied to it to create the 3D effect. There was also a self perspective applied to the block themselves which seems to have altered the position of the angles. Then text was added to the blocks inside of each the left and right block. The overflow was set to hidden for both blocks so that the text would move in and out of the blocks. The animation the text moves from 100% to -100% on the x-axes. The duration of the text movement was set to 5 seconds. The second text has a delay of 2.5 so that the animation because the blocks have the same width. Easing is set to linear so that the effect doesn't effect the time and it looks like it moves through both blocks.

Here's a simple way to create tall horizontal accordions within Webflow. This is implemented using interactions, some custom CSS properties for the vertical text, and a touch of magic. There is a lot of math involved with this implementation and will need to be modified if you want to remove or add any accordions.

Three different logo/client bar sections for your Webflow site. Increase your sites conversion rate by featuring a client logo bar to present social proof and build trust with your visitors.

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

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.

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

A done for you Webflow pricing table component cloneable created by the Flowbase team.

Add a typewriter effect to your Webflow site via this Typed.js example. This cloneable showcases the ability to add typed words that appear and then appear to be deleted between each word. The effect utilizes Typed.js and some custom CSS. You can customize the Typed.js typing effect by updating the words, the typespeed, the backspeed, the backdelay, the startdelay, looping, cursor and more all within the custom code found within the page settings. Typed.js has been popular for some time and this cloneable will help you understand how to implement it on your next Webflow project.

A way to implement a parallax scroll effect on your Webflow site.

A Webflow CMS driven image lightbox/photograllery. This lightbox is created using custom code via jQuery and the script can be found in the closing body tags. This method allows for you to use CMS collections on a single page and power lightboxes of photogalleries with a simple bit of code. The lightbox features a pop up modal, previous and next buttons and a way to close the modal screen.

Here's a way of rotating/transitioning text on a section of your Webflow site. Perfect for hero and headline sections in which multiple headlines or text is needed to explain or demonstrate something.

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 way of adding a simple file upload to your Webflow site via Uploadcare. This is perfect for clients, users, or sign up flows that require the use of file uploads.

A unique CMS page scroll interaction trigger effect created with Webflow's native interactions. As a user scrolls down the page an image of a person is displayed based on the location of the viewport. This was created using Webflow's native interactions and zero custom code. This Webflow CMS scroll interaction utilizes Webflow's when scrolled into view and scrolled out of view functionality. As the page is scrolled the items opacity, text color and BG color changes and as the item is scrolled out of view it is also manipulated to show the next time. A simple yet effective strategy of implementing a unique page scroll interaction via Webflow's native interactions.

Here's a technique to display multiple video popup modals in Webflow and have the videos pause on close. Please note that in order for this to work you'll need to utilize the custom script found in the body close tags. These are tied to the class names of the cloneable so you'll need to customize the classes if you add, remove or copy the code from the cloneable.

Here's a way to create a sticky tabs section on scroll in Webflow. When users scroll down the page each tab is then stuck to a section. Perfect for adding a dynamic effect to Webflow tabs on your Webflow site.

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 fade and rotate page transition for your Webflow site. This transition occurs using a small snippet of custom code that allows the transition to happen.

A great 3D card interaction for products or listings of services on your Webflow site. Upon hovering on the card the purchase link pops out and the card fully 3D transforms to follow the mouse movement. A great way of taking a static product card div and turning it fully dynamic.

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.

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.

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

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

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.

A simple pricing table with a three column design for Webflow. This simple pricing table features a blue design with gradients, animated circles background, and a primary pricing package with features options.

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.

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.

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

Easily add a countdown or launch timer to Webflow. With this you can easily add this into your own project. The numbers have separate IDs for Hours, days, Minutes and of course Seconds. To change the time simply go into the Custom code and change the date. The date is in the following format, "2018-09-28-00"

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

A simple, yet elegant two package pricing page template design for your Webflow site. Get up and running faster with this wonderfully designed pricing page design template. Perfect for a service or offering that has two different pricing structures such as a freemium model.

Here's a way to create a multi-step Webflow form that includes a step counter, custom confirmation animations and custom checkboxes. A perfect way to filter leads, create long forms that are filled out, and segment your lists/clients.

This technique allows you to redirect a user to a URL of your choosing after submitting a form on Webflow.

An amazing full page multi image slider for Webflow. This slider is built with great interactions and transitions and loads multiple images per slide. Perfect for portfolios, architecture images and much more.

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

Here's a hover effect that adds a border and lines around a logo in Webflow. This effect was achieved by setting the border color to transparent on the initial state and then changing it on the hover state. Lines were placed with a width of 15px and a height of 3px. In interactions it was scaled from 0 to 1 on the x and y axis for the horizontal and vertical lines. To reduce the number of interactions required a class was created for the corner horizontal and vertical lines. Then a combo class was dded and placed the lines in the different corners around the logo. This allowed the use of only two interactions for the horizontal and vertical lines.

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.

This is a unique interaction in which images reverse movement based on mouse location in Webflow. There are two images facing opposite directions on both sides of the screen. When ou move your mouse on the x axis the images get further and closer apart. It's a very simple effect but can be modified to create endless opportunities. This used two identical images to save on load time and one was flipped horizontally on the y axis. Both images are set to overflow hidden. Then in interactions a mouse move in viewport interaction was applied to both images and they move on the x-axis.

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.

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.

A full screen parallax menu/navigation featuring mouse interactions.

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 unique example of various text related interactions in Webflow. When the site loads each letter is gradually shown, scrolling down the page you're then presented with further interactions via the in-view and out of view interactions with offset to create a nice effect while scrolling. This is based entirely on Webflow's native CMS system. There is some custom CSS in order to have the customized Webflow CMS items and for cursor events.

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.

An easy way to add a mega menu navigation menu to Webflow. Features a dropdown menu with secondary navigation. This is perfect for a site with many different links needed within the menu. The menu is fully responsive and is managed via Symbols. You will find instructions within the designer cloneable.

A card interaction that displays additional information upon click in Webflow. This interaction was built entirely with Webflow's native interactions and requires no additional code. When a user clicks on the card the image reduces size and zooms out while the text information of the card appears.

Eight unique Webflow preloader animations that can be easily added to your Webflow projects.

Here's a fun example of creating an animated image on scroll effect/interaction in Webflow.

A fun interaction that moves images/divs based on the mouse movement on the Webflow page. A great way of adding a parallax style mouse movement interaction to a Webflow site.

A free cloneable of the Dezin style guide for Webflow. This contains everything you'd need for your Webflow site, including color palettes, surfaces, typography, buttons, form inputs, iconography, images, video embeds and even tabs. This is a great way to kickstart your Webflow sites and build a faster, and more cohesive designs.

A multi-column, fully fluid responsive card slider for Webflow. The starting cards are left aligned while the final card is right aligned. The slider mask is set to percentage based width varying on the number of cards in the slider. This way you can control the number of cards shown depending on the size of the screen.

A unique demonstration of TypeJS and Webflow. Using your keyboard you can change the color of the background using TypedJS, simply type a letter from A-Z and the background color changes.

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