Discover Webflow cloneables

Add a CMS driven draggable slider with smoothing to your Webflow site. This slider offers the ability to slide with a trackpad and also has mobile smoothing. There's a small webkit code that removes the scrollbar as well.

Four different custom button designs for your Webflow site. These custom, animated buttons already have the necessary interactions to make them dynamic and interactive. A variety of hover states effects can be found in these 4 different button designs.

Here's a technique to display the percentage scrolled down indicator on your Webflow site. Using a custom JS script, which needs to be added to your closing body custom code in Page Settings you can easily add a custom scroll indicator to your Webflow sites. Simply update the .your-class div and with the text div you created and you'll be all set.

A unique way of adding dynamic and animated portfolio items to your portfolio page. These bubbles automatically float up and include mouse interactions to access different pages.

A Matrix style text scramble effect in Webflow. This entire effect relies on custom code which is included as an HTML embed and was found on a CodePen. In order to modify the text you'll need to update the custom code in the HTML embed.

Clonable project for geotargeting website content and messaging. Based on user IP address using Geoplugin (with a yearly fee for SSL requests). This is a perfect way of limiting, or providing messaging to a subset of users based on their geo location.

Create a looping infinite CMS Marquee with pause on hover effect. Achieved via custom CSS.

A 3D credit card effect/animation in Webflow. This 3D credit card has hover over effects as well as click interactions, on click the card flips vertically, horizontally. All of this is accomplished via native Webflow interactions and no custom code.

A fast and easy way to build your own styleguide in Webflow. This starter style guide is organized in one page and setup with the basics of all of the critical elements you'll need. There's also instructions that help you better understand how to create your own style guide in Webflow.

An automatic timezone clock for cities around the world in Webflow. This shows the current local time for your city and then keeps it up to date every 60 seconds. Custom CSS was used for the blinking effect on the clock. Here's how it works. It uses the data attributes to define the timezone. Custom code is then used to display the local time of your city. There are separate colors for open, evening and closed office hours. These can be styled through their respective classes however you'd like. Find your timezone via timezonedb.com/time-zones. The location row element contains the data-timezone attribute, change that to your timezone. Everything else will auto update.

Here's a way to create a page load animation in Webflow in which circles appear at different intervals to create an animation effect. This entire animation was built using Webflow's native interactions and doesn't require any custom code to create it.

Here's a way to style code embeds on your Webflow site that are added to Webflow's native CMS system. This allows you to embed styled code snippets into the Webflow CMS. Everything is styled and configured to be super easy to add to your Webflow site. All styles are applied via class names so you won't lose anything during the copy/paste process. The code styling is achieved via highlight.js

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

Here's an example of creating 3D interactive balls via Webflow using only divs and color gradients, no images or custom code was used to create this effect. When someone moves the mouse on the Webflow site the balls/divs move in different directions.

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

Easily add dynamic and interactive FAQ sections with accordions and slide in interactions to your Webflow site. There are 5 different designs that include scroll into view interactions as well as expanding/closing accordions, tabs and more.

A fun, predesigned footer for dark sites using a mix blend difference which allows for easy customizing to your sites designs. Includes custom mouse cursor, hover over effects using mix blending, and much more. Make sure you have selected the body class (all-pages) and then go to the typography panel and select 1VW for it.

A unique Webflow slider created with Three.js and GlslCanvas. While this is a good example of a slider it uses hand coded image URLs rather than Webflow sliders. A good demonstration of how to add Three.js slider effects to your Webflow site but will need some customization to make it work properly on a Webflow site.

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

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.

Three different unique menu nav bar designs for Webflow. The three designs feature unique hover dropdowns, buttons and designs for your Webflow site.

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

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

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 a guide and an example of Particle.js on a Webflow site. Particle.js is a fun way of adding a dynamic background to your Webflow site. In this example a new particle is added every time you click on the background of the site.

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.

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.

A unique pricing table with tabs to rotate between different packages in Webflow. This pricing table offers a unique design pricing packages that utilizes a tab style pricing table to change between different pricing packages. The pricing table defaults to the cheapest tier, and the more expensive plans are hidden behind a table style button. Featuring 3 different pricing packages and unique transitions between each package. This pricing table features a large header, three packages, and unique rounded design.

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.

A fun interaction in which a head with eyes follows the movement of a mouse on the page. This fun interaction showcases the abilities of Webflow interactions as the entire effect was created using Webflow's native interactions. As the user moves the mouse over the site the head, and eyes change location, the mouth grows and shrinks and the eyes also have another blinking interaction. The entire head was built using divs, as well as each individual element such as the ears, eyes, mouth and everything else. All three interactions rely on the page load trigger and then utilize the mouse moving in viewport functionality. Quite honestly this is one of my favorite native Webflow interaction animations that's interactive and playful.

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

A unique water ripple interaction/effect based on the mouse movement for Webflow. The ripple effect is created via JS found in the page settings powered by Jquery Ripples. A fun effect that can be easily added to your Webflow site or project.

Here's a way to add a live clock to your Webflow site via the power of Vue.js. Please note that the custom code section is what allows this to work properly. It's also suggested to use some type of preloader for your page as it takes a second to load the clock properly and for the code to execute.

An NFT collection with a minting dapp in Webflow. The minting works but you need to have a MetaMask wallet and you also need to have some MATIC tokens on the Polygon network to avoid high gas fees.

Here's a technique demonstrating spinning, 3D circle divs based on mouse movements via Webflow native interactions.

Here's a unique, recipe card animation created in Webflow. This is perfect for showcasing recipes on your Webflow site in a unique and interactive way. When hovering over the card the image becomes full height, and the card moves forward on the z-axis. The card was placed in a wrapper with a perspective applied to it to bring the card forward. Also a timer icon shows up on the top right corner to display the time it takes to create each recipe.

Here's a Webflow cloneable component to easily add a vertical step/process section to your Webflow site. Perfect for timelines, process steps or anything that you can think of.

A unique 3D glassmorphism interaction and animation that utilizes a combination of video, Webflow interactions and Custom CSS. When a user hovers over a card the card rotates and 3D transforms based on Webflow interactions. The technique for the glassmorphism is powered by custom CSS using backdrop-filter blur and image masking. In order for this to work properly you will need to add the custom CSS code with this cloneable. Pay attention to the Webflow interaction that is powering the cards 3D transform techniques. An excellent example of using Webflow interactions, CSS and a little bit of creativity to create glassmorphism 3D cards in Webflow.

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.

Here's a nice hover over interaction for a product card for your Webflow site. Upon hover over of the card the text fades behind the card and the image/product is grown on top of the text.

This demo showcases a unique card flipping animation on hover in Webflow. In this effect a panel rotates in from the left to reveal more information about the image, or post and the image slides to the right to make room for the flipping panel. The effect was achieved by placing an image wrapper and content wrapper with a child perspective added to it. The content wrapper is set to 50% within the 3D wrapper and the transform-origin was set to the left so it would rotate in from the left side. Another div block with the background image was added inside of the image wrapper, and the image wrapper was set to overflow of hidden so that the image slides to the right you don't see it beyond the wrapper. Interactions were created via rotation of the content wrapper -90 degrees to 0 degrees and moved the image to the right 50%.

Here's a unique parallax blur scrolling animation that's perfect for portfolio sections in Webflow. This parallax blur scrolling animation effect adds the image that's being scrolled to the background with a blur filter effect. All of this is achieved via native Webflow interactions.

Here's a unique underline animation for tabs in Webflow. When you hover over a tab, an animated underline interaction is triggered. The tabbed items also have a hover over interaction in which a view magnetic button appears and follows the cursor over the hovered item.

Here's a responsive dropdown navigation menu for Webflow. An easy cloneable that can be added to your Webflow site to get your navigation up and running quickly. Best of all it's already responsive and mobile ready.

Creating a proper Webflow site should start with brand guidelines and a style guide. This ensures that your sites brand and feel stays consistent from the start of your Webflow site build. This is a great resource and UI kit to build your own styleguide and brand guidelines.

Here's a way to create a load more option for content on a Webflow site. There are different techniques to showing more information and one of the best ways is via a load more button to display content dynamically. This method provides a light jQuery option with a focus (scroll to) the newly displayed content and a fade-out effect when all of the content has been displayed.

Here's a way to achieve a dual slider effect in Webflow. When clicking on the next or previous two different sliders will be triggered via the single onlick trigger via a custom button. This clicks on two hidden slider links simultaneously allowing you to maximize the slider transitions and effects.

An easy way to add expanding tabs with interactions via Webflow. This requires native interactions and zero custom code. A great way of adding additional text descriptions to tabs and save important space on your site.

Here's a fun text effect in which the text fades away on mouse hover in Webflow. A great way to add a dynamic animation interaction to your Webflow site.

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

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

An exploding text particles animation using Three.js in Webflow. A good demonstration of how to add Three.js to your Webflow site. In this cloneable the text begins to morph and explode as you move the cursor over it. Please note that this uses custom code found in the head and closing body tags of the page settings.

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.

A mobile ready product display card for Webflow. This mobile product card was created for smaller, responsive ready mobile screens. This card features a product image, slider orientated with a product name and price with a large call to action button with hover over interactions.

Add a dynamic indicator to let your users know how far down the page they've scrolled via this interaction on your Webflow site.

A way to add a dropdown with all the countries and flags to your Webflow site. There are several examples that utilize Nice Select, including flags, no flags and a dropdown only. You can copy-paste the custom code element with a select tag with all the countries in it. Note that this is achieved via JS and you won't be able to preview this within the WEbflow designer.

A geometric pattern design with hover animations created in Webflow. This technique and demonstration was created completely with Webflow's native designer and requires no additional codes or scripts to work properly. Using a bit of creativity and patience a few skew tranforms can build a seamlessly endless geometric pattern. Add in some border animations and you've got a fun, fully interactive geometric pattern in Webflow.

A unique slider interaction that changes the slide and the pages background image upon each transition in Webflow. A fun way of creating a hero section that adds a level of dynamic flair to your Webflow site.

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

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 recreation of the Firefox browser window as a mockup in Webflow. This Firefox browser mockup features open and closeable tabs, forms to act as the URL bar and hover states for all of the browser buttons. A unique way to create and demonstrate product images, product demonstrations and more in Webflow.

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.

Fourteen different testimonial components perfect for your Webflow site. These modern and well designed testimonials were created to help you add a testimonial section to your site quickly. The first variation has testimonials featured in an off centered design, the second variation showcases a simple 3 design with a primary quote and user avatar. The third variation is a large slider perfect to include a larger testimonial section to your site. Other variations included branded colored cards in a slider, a picture of the person with their company logo over their face, a large centered slider, a twitter card style, a video testimonial, tab testimonials and many other variations. This is a perfect cloneable if you wanted to add simple or complex designed testimonials to your site.

Here's a way to add a unique image hover interaction to your Webflow projects. When a user hovers over an image various hover over effects take place. This demonstration shows several different methods. You can use this animation variants found on this page. To add this effect to your project copy the image wrapper (.wrapper) and change the transform-origin of the images as you'd like.

Here is a wonderful collection of 10+ Webflow FAQ layouts and components ready to use on your Webflow site. Included in these are accordions of varying style and design. There are versions with pop-up modals, dropdowns, expanding cards, fully expanded FAQs and just about everything you'd need to add an FAQ to your site.

I wanted to see if I could rebuild this beautiful website. All interactions are created in Webflow :) Custom code used to create infinite scroll. Current limitations (stretch goals to fulfil at a later date): 1) Sound effects 2) Text changing effect Rebuild of https://one-is.com

An interactive sky background for your Webflow site using three.js and vanta.js. When a user interacts with the page it feels like you're flying through a set of clouds. A perfect way of adding depth and interactive nature to your Webflow site.

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

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.

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

Here's a way to add a custom, social media sharing hover interaction to your Webflow site. When a user hovers over the icon on the page a social media sharing interaction is triggered that displays 4 different social media sharing sites.

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

A custom javascript solution to a CMS stacking slider in Webflow. This custom Javascript CMS driven stacking slider works great, although may be a bit confusing for beginners. It utilizes custom Javascript and utilizes Custom attributes in order to work properly. When a user clicks on the next item, the text description in the header changes and the next image is shown. This requires two different CMS collections, one for the content and one for the images. You'll need to add 2 attributes and 1 HTML embed into the CMS collection for the images and utilize the proper class names. Update the slider navigation buttons and assign the custom attributes. Overall this is a great slider but is tailored to someone familiar with Webflow.

A unique slider animation for the background image on a site. It utilizes the full viewport and provides a unique animation.

Here's a fun way of adding a custom worm style cursor to Webflow. The snake follows your cursor on the page and creates a trail effect. To customize the worm be sure to update the custom code.

A unique, fancy background hero with text masking effect over a background autoplay video.

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

A unique horizontal scrolling technique created for Webflow and built using a combination of Webflow interactions, custom CSS code and jQuery. This allows you to add horizontal scrolling to your Webflow site, this cloneable also features a page loader and a mouse cursor interaction. As you scroll down the page you'll notice the horizontal slider that also features parallax style effects, there's a unique text outline stroke effect. Each section is driven by Webflow CMS which allows you to easily add or remove pages based on your needs and requirements. This was built to work on both mobile and desktop devices making it responsive for any size browser.

A simple, yet modern material design pricing table for Webflow. This pricing table features a large headline, three pricing options with features and a unique offset design aesthetic. The cards also feature a hover over button interaction which changes the call to action button. A great designed pricing table that can be easily added to your Webflow site.

Looking to create a Quiz in Webflow driven by your CMS? Here's a technique for creating that. Watch the tutorial here: https://www.youtube.com/watch?v=2OUj7dPn3Ng

Here's a way to create a CMS driven slider with a lightbox and video modal in Webflow. This slider utilizes Slick slider for the slider effects. Please note that this uses custom code of both CSS and script for the slider.

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

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

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

Ten different footer designs for Webflow. Beautifully designs that can accomplish just about any type of footer variation that you could possibly want on you Webflow site.

A fun, sticky div interaction for Webflow. When a user scrolls down the page each div scrolls and locks into place until you reach the last div, and eventually the bottom of the section.

Here's a full page iPhone mockup design for Webflow. A great way to add an iPhone mockup design to your site with all of the elements already designed for you.

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.

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

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

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

A unique CSS driven item reveal on hover CMS interaction. Using a simple CSS snippet you can allow for CMS item images to become visible when hovering over a parent item. Simply copy and paste the CSS code to either your custom code page settings or adding it via an HTML embed. When a user hovers over the CMS item an image appears over that specific item. Perfect to showcase additional images and objects that you don't want immediately visible to users but visible upon a hover effect.

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

Interactive and inline 3D icons built with Spline and Three.js. A perfect way of creating interactive inline customized icons built with Spline and powered by Three.js

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 demonstration of a spiral galaxy via three.js in Webflow with a GUI control panel. In this example you're able to manipulate the spiral galaxy animation and customize the settings. A great way of testing/playing with this three.js technique to find the best settings for your spiral galaxy.

A dynamic Webflow countdown animation powered by Webflow's native CMS system.

A very cool three.js background animation featuring fly by hills that are black and white. A unique way to add 3D depth the background of your Webflow site.

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

A unique parallax style section that features dynamic scroll interactions for Webflow. As you scroll down an image and background sections move at different speeds providing a unique Parallax style effect. There's also multiple different images that appear when hovering over the links on the side. All of this is built with Webflow's native interactions and no custom code.