Discover Webflow cloneables

A CSS technique to create animated gradient text animations in Webflow. This allows you to add extra emphasis and design to your text headlines or any text on your Webflow site. Via a custom CSS found within the HTML embed you can create this animated gradient text effect.

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

A unique 404 page design for Webflow. When a user visits the 404 page the mouse cursor creates a spotlight effect that displays an apology with 100 different languages.

Here's a way of adding a custom cursor to your Webflow site via interactions and one line of CSS code.

A 4 column pricing table cloneable design featuring a bump effect for a primary package in Webflow. This beautiful pricing table includes features, package names, pricing info, and a 3D bump effect for the primary package that you'd like to put emphasis on.

Three amazingly designed call to action section scroll interactions created in Webflow. These call to actions are perfect for the bottom of your Webflow sites to create eye popping dynamic elements that draw the users attention.

A simple way to add a mouse scroll animation with a dot moving from the top to bottom. This is not a lottie file or gif, this is made with interactions and divs.

A beautiful example of a horizontal slider created with GSAP for Webflow. As the user scrolls through the site it smoothly transitions to a horizontal slider. This slider was built using GSAP & ScrollTrigger.js and you can find the custom code in the page settings. This is not setup to use Webflow CMS although it could be modified if you have an understanding of GSAP and code. The horizontal scroll can be modified to adjust the scaling of the image, rotation and much more. Be sure to check out this horizontal slider if you're looking to implement a GSAP variation on your Webflow site.

An all-in-one free UI kit for Webflow projects. Included are over 40 different sections, and 11 page templates. This UI kit is designed to help you with all the sections that you may need to build a business website. Pre-built sections include Navigations, Hero sections, Client sections, tabs, cards, testimonials, content sections, pricing tables, faq sections and accordions, forms, team, footers and more. Several prebuilt pages are already ready to copy and paste to build out your sites. These include Home, About Us, Article/Blogs, Pricing pages, Contact pages, and much more.

This is a unique way of adding Curtain.js WebGL slider to your Webflow site. This allows for a variety of transitions and change effects not available to the standard slider. This is based on Curtain.js and is fully customizable in both shape and size, it's also responsive behaving like CSS cover. There are many options from autoplay to buttons, transition duration, displacement maps and even pixel distance, built in easings without libraries.

Another demonstration of Webflow's new blending and backdrop filters. Here you can see hue, screen, hard light, color, color dodge, difference, multiply, and overlay blending and background filters in action in Webflow. A clean way to quickly demonstrate the different affects that blending and backdrop can have on images and items on a Webflow site.

Here's a fun card interaction in which the cursor acts like a peeling of a label on a Webflow card. Perfect interactions to add a new layer of dynamic flair to your otherwise boring Webflow cards.

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.

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 of utilizing data/information from Google sheets within your Webflow site using the Javascript v4 API. This allows you to maintain the design of your site within Webflow but use Google sheets as the CMS/backend of the information on your site. Please note that this does not work on the demo on this page but will load when viewing the page itself. You will need to generate your own API key and the google sheet should be the public link of the sheet used in this project demonstration.

An automatic logo marquee created with Webflow interactions. This cloneable allows you to easily add an infinite logo marquee/scrollable to your Webflow site. This relies on Webflow interactions and can be customized to your specifications. Simply adjust the logos and then update the Webflow interaction based on your needs and the number of logos that you have. You can also adjust the speed at which this works by updating the duration time from 30s to your own choosing within the Webflow interaction.

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.

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.

Add numbered paginations to your CMS collection lists via this small custom code snippet.

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.

A stunning and easy to implement Swiper.js draggable slider created for Webflow. This slider is completely draggable for both desktop and mobile devices, when the next slide is triggered there's a slide in feature that is powered by Webflow interactions. This makes the next card appear to slide in upon being visible. Swiper.js powers the slider and allows for custom functionality such as speed, looping, breakpoints and much more. Keep in mind that this utilizes data attributes to work properly so you will need to update each slides data attributes in order for the Swiper.js functionality to work properly.

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.

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.

A unique effect using Scrollify.js and tabs that scroll/ease in content based on the tab selected in Webflow. Using this method you can create a tabbed section that can be accessed via click or by scrolling down the page. When you scroll down the page the selected section will become highlighted to signify which section you are currently viewing. This method utilizes Scrollify.js so you'll need to add the custom JS found within the closing body tag.

Here's a way to add cookies to your Webflow site. This allows you to display information once to your visitors and not bombard them with constant pop-ups or duplicate information. This script allows users to close notices/pop-ups and retain that information instead of showing the same info on each page load.

Cards 2 is an amazing UI kit and framework to allow you to quickly design and wireframe your next landing page using Webflow. There are over 100+ different prebuilt symbols and components included for hi-fidelity wireframing for any UI/UX designers. Create landing pages and designs faster with the Cards 2.0 UI kit directly in Webflow and ready to be published directly with code. This UI kit includes 50 new cards as Webflow components/symbols in both dark and light variations. 3 complete landing page designs in both dark and light. Symbols/components for both hero sections, features, testimonials, team, pricing pages, blog posts and more. These are responsive for all 4 breakpoints and all cards are offered in a Sketch file. This UI kit allows you to build your designs faster and begin the design process directly in Webflow.

Here's a dark design full width large accordion with interactions for Webflow. An easy way to add a huge accordion to your Webflow site.

A way to achieve text appearing on scroll effect.

This is a fun mouse cursor effect that creates an artificial spotlight effect in Webflow. Simple settings with mouse movement interaction. There are two versions, shadow and white on white. Any color or text is possible.

Here's an example of a menu with a slide in interaction and that features a background video for the menu. A fun interaction that adds some depth and liveliness to your Webflow site.

A light interactive Chrome mockup browser window created in Webflow. This mockup window features a number of unique native Webflow features to build a fully interactive Chrome mockup window for your Webflow site. A perfect way to demonstrate product images, product demonstrations and more.

Add a hover slider style interaction animation to your site for revealing an image, or div content.

A great way of creating repeating patterns for your CMS grid items using CSS nth child. It's also responsive!

Here's a great way of adding an infinite sliding crypto price tracking marquee to your Webflow site. This displays live crypto data via the CoinGecko API, displaying both the pricing information and token logos from popular exchanges. You can add other crypto ticker tokens by adding them to the fetch URL of the code. The marquee also features a pause on hover effect.

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.

A simple to implement neon glow text effect for Webflow.

A unique scroll interaction created using solely Webflow interactions and some minor CSS via an HTML embed. As the user scrolls down the page the hero image zooms out while the text continues to scroll up the page. As you enter the next section on the page the images for each section change in the same div that the original image zoomed out unto. This continues for each section on the page as you scroll throughout the site. An excellent use of Webflow's interactions and the While scrolling in view element trigger. All that is required to create this effect is the move element within the mentioned scrolling in view trigger.

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

A unique product card animation on hover in Webflow. When a user hovers over a card the image shifts down, and a border appears with an animation, there's also a description of the card that appears as well. This animation effect was built entirely with Webflow's native interactions.

Here's a wonderful 3D card hover effect in Webflow. When a user hovers over a card a 3D effect is shown and folds down and additional information is displayed. This is achieved via interactions and rotates the image 90 degrees back and a content wrapper rotates 90 degrees on hover. The effect was achieved by placing an image wrapper and a content wrapper inside of the 3D wrapper. The 3D wrapper has a child perspective applied to it via the transform option. This allows the div block inside of the wrapper to have a 3D effect as they rotate in and out. The transform-origin for the image wrapper was set to the bottom and the transform-origin for hte content wrapper was set to top. In the interactions rotation and opacity animations to both the image wrapper and content wrapper. Both div blocks are rotated on the x-axis.

A login page featuring a sign in form with a password showing button in Webflow. This enables you to add a show password option for the password field of a sign in page on Webflow. This cloneable features a simple login page with email, unique form labels, password label and field, stay logged in checkbox and sign in button. This technique uses some custom javascript which can be found at the bottom of the cloneable of the page as an embed.

Here's a way of using Webflow's native CMS system and Webflow lightbox together as natively they don't work well together. This is a tiny and easily-implementable script that combines the best of both world. Create your nested collection with lightboxes, check "link with other lightboxes". Then, replace "collection item" in the script with the class name you decided to give your collection.

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 way to add images within text spans in Webflow. This method utilizes Webflow's designer and some custom Javascript to allow you to add images within a text span. The Javascript snippet is used to move each span-element to be a child element of it's corresponding span wrapper element. This allows you to dynamically alter the HTML structure to accomplish this technique.

A pricing chart tooltips created in Webflow via native Webflow dropdowns. This tooltip was created using Webflow dropdowns and was built for desktops and mobile breakpoints and is fully responsive.

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.

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 full page Calendar with week/day/month setting and works with Webflow CMS. This full page calendar design relies on custom stylesheet and JS to work so you'll need to copy both the CSS and JS found in the head and closing body tag of the page settings. Please note that this is primarily driven via CSS and thus Webflow's designer becomes rather useless for the design other than the Webflow CMS elements tied to it.

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.

Create a seamless page transition for your pages in Webflow. Using just a small snippet of custom code you can allow the page time to complete an exit transition with an intro transition on the new page. Set your links to preload your pages for even faster performance.

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.

Here's an example of how you can integrate Mapbox into your Webflow project to help create an interactive storytelling experience. This is a great way to create an immersive map interaction while scrolling to different sections on your site. Perfect for giving the history of a city, providing a guided tour and much more. You will need to replace the Mapbox with your own API credentials. Unfortunately this isn't optimized for mobile yet.

A conversational style contact form design for Webflow. The contact form makes it fun and easy to fill out a contact form by creating a conversational style form surrounded by customized input fields and a submit button. A perfect way to add some personalization to your Webflow's contact page.

A free cloneable fashion site hero section, perfect for a website or portfolio section. This was inspired by a Dribble and to test out the authors expertise in Webflow. Initially starting the design in Figma, and then translating it to Webflow. For the interactions the author utilized Class Adder via Finsweet and for the text animations utilized a javascript library provided by Timothy Ricks.

Simple tooltips using Tippy.js. You can add more functionality via their dcouments.

Here's a technique of toggling a class based on scroll in Webflow via GSAP. Using this technique you can trigger any class that you'd like, in this example images, as a user scrolls down the page. This technique is using CMS to drive the images and as the user scrolls down the page the class is triggered via GSAP and Scrolltrigger.js. Be sure to add the custom code found within the Page Settings (body and head) in order for this to work properly on your site.

Here's a way of adding a circular text with movement effect to Webflow via circulartype.js. Unfortunately the sizing is a little weird and doesn't work properly, although it does work. This includes an interaction for page load, scrolling through sections ad for page transitions.

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.

A unique slider that provides functionality support not found in my other sliders in Webflow. Including responsive, swipe gestures, keyboard arrows. Easy to customize simply copy and paste the slide item to add more items. Place content within the content wrapper. This slider utilizes Slick Carousel to create the slider and thus requires you to add the custom JS code found in the closing body tag.

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

Using the MetaMask API and Web3.js you can send Ethereum via Metamask in Webflow. In order to get this to work properly you need to add the custom code found in Page Settings before the closing body tag.

Here's a way of creating structured CMS pop up modal for your CMS items in Webflow.

A tag/tooltip hover badge perfect for your Webflow site. When yo hover over the colors, individual tags/descriptions follow the cursor on your Webflow site. Be sure to add the HTML embed code to your sites for this to work. The elements are all created by created an element ID and associating the HTML embed script with the element ID.

A fun mouse drawing canvas perfect to add to your Webflow background or page elements. This utilizes sketch.js for the drawing canvas which allows you to use your cursor or by touching your mobile device to draw right on the screen. You will need the custom code found in the custom code page settings in order for this to work with your Webflow site. You then have the ability to customize the colors of the mouse trail on the canvas, and can update the design and color attributes. This is a fun and interactive element that can add a unique sense of interaction to your Webflow site.

A wonderful CMS image gallery powered by Webflow's native CMS system. This is a great way to add a lightbox styled image gallery that's driven solely by Webflow CMS. Upon click of an image a full page modal window is displayed with other image thumbnails able to be clicked on and viewed within that modal.

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.

Here's a way to create a slick slider type of slider within Webflow.

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

Three different link hover effects perfect for a menu on Webflow. These three effects create an image hover distortion using three.js.

A unique how it works horizontal scroll feature section perfect for your Webflow site. As a user scrolls down the page each section snaps into place horizontally. This effect was built entirely using Webflow's native interactions and does not utilize any other JS libraries or custom code. This effect was created by creating a scroll wrap with three different triggers for each section. As the user scrolls through each section the opacity, background color and size of each element changes. A unique approach to creating horizontal sliders within Webflow without the use of additional JS libraries or code.

A well designed lateral menu animation built for Webflow. When a user clicks on the menu tab the entire menu opens up slowly sliding in to expand over the entire page. This was built using Webflow interactions with no custom code required. There's an interaction animation built for both opening and closing the menu.

How far can you push Webflow's native interactions? In this demonstration you'll find a Mad Max movie intro page that showcases just how far you can push the limits of Webflow interactions. There are no gifs, gimmicks, or lottie/SVG animated files being used here.

A unique and well designed Webflow CMS slider created via Slick.js. This slider is driven by Webflow's native CMS and allows unique effects not offered by Webflow's native slider. In this example the slider is draggable, provides unique transition effects that zoom on each primary slide, and displays 3 slides at a time.

Welcome to the first version of the Universal UI project! Included in this kit are over 40 sections, along with 11 page templates - the Universal UI Kit will be completely free, for life. Use it on as many projects/clients as you'd like, no credit necessary! The purpose of this UI Kit is to give you all the sections you need to make a business website, without narrowing down the visuals too much into one niche, or making it too hard to customize. Most UI kits look nice because of custom graphics - which is fine for a normal website, but for a site that's made to be cloned, it's pretty much useless. In order to achieve the same level of website that the UI Kit promised you, you'll have to go and make all new custom graphics - which we think defeats the purpose of a UI Kit. Happy cloning, and please drop a like & comment if you appreciate this free resource!

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

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.

A set of fun characters created via strictly from Webflow interactions utilizing divs and no images. A great exercise in the abilities of Webflow interactions. The interactions rely on movement, size of divs with a loop to make this continuous animated character interaction.

Another unique button animation for Webflow. When a user hovers over the button the text color changes and the arrow icon animates via native Webflow interactions.

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.

Looking to build a quick in Webflow? Here's a guide and tutorial of how to build a Quiz in Webflow. Watch the tutorial here: https://www.youtube.com/watch?v=2OUj7dPn3Ng

Here's a way to add a contact form popup modal to your Webflow site. Perfect for quotes, advanced contact forms and more via a pop up modal overlay. This contact form overlay includes custom open/close interactions, form inputs, submit button and shadows.

A before/after comparison component built with native Webflow interactions. Perfect for an image optimization service or demoing the difference between two different products/services. Fixed width before/after images, position absolute, and an interaction to resize the containers on hover.

A unique button animation that displays a ripple effect on click.

An incredible, full page slider for Webflow. This custom slider features custom next/previous arrows, slide transitions and text description location all driven by Webflow's native CMS system.

A simple yet effective CSS infinite marquee for Webflow featuring hover pause capabilities. Easily adjust the animation duration via the embed element with CSS. While you could create the marquee effect with Webflow's native interactions this allows you to bypass added JS through a simple CSS embed allowing for greater control over the marquee via this CSS script.

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 scroll-into-view animation that teases the portfolio image as soon as they come into the view port.

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 dynamic double vertical bar chart that's hooked up to Webflow CMS. It's nearly responsive and hooks natively to Webflow's CMS via an HTML embed.

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's a way to create a color changing background effect in Webflow. Using preselected colors you can have the background color of your Webflow site shift over time between your preselected colors.

Stop those pesky videos from playing in the background when the modal or popup has been closed by the user. Apply this to your sites body code and view the instructions in the following loom video: https://www.loom.com/share/ae76cd611f604de5af8cffea8b25efa3

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 text fill on hover effect for Webflow. When you hover over text on your Webflow site it fills the text with an animation effect.

Here's a way to create a forever scrolling effect for your Webflow site. With a custom piece of code you can create an infinite page scroll which continues to clone the body over and over again. Not sure how you could use this effect but a fun demonstration none the less.

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.

A unique headline animation for Webflow powered by Anime.js. The headline text sweeps in from the bottom one letter at a time and after displaying the line sweeps out one letter at a time with a fading effect. In order for this effect to occur you'll need to be sure to add the custom code in both the head and closing body tag in Page Settings. This is perfect for a preloader page or temporary scrolling section.

Here's a way to add a simple MP3 audio player that hides the browsers default audio controls and works seamlessly with Webflow's CMS collections. This does require some custom code in order for this to work and you will need to host your MP3 files externally as Webflow doesn't allow MP3 filetypes. Be sure to add the custom code found within the head and body tags within the Page Settings.

A thorough style guide based on tribe.so's brand and styling guides. This style guide includes colors, typography, structure, global classes, icons, forms, rich text and buttons in a well designed structure.

Prevent Webflow form spam with this unique form validation technique. Using this you'll be able to block spam emails from generic or invalid email addresses from sending you form spam before they get validated with Webflow's native forms. In order to get this to work you'll need to utilize the code found within the closing body tag of the Page Settings. You can customize the invalid domain names within the settings to prevent any domains that you don't want to have form submissions from.