Discover Webflow cloneables

Another great 3D card hover effect created in Webflow. You can change the angle from the transformations and you are also able to change the layout if you wanted.

A sign up authentication page design for your Webflow site. This includes show/hide password, input field autofocus, image slider with a responsive design.

A free Webflow membership login page design cloneable. This login and signup template comes with gradient border outlines, border interactions to create a shine effect, show/hide password, drop shadows and a simple nav bar and footer.

A unique way of adding a social share button to your Webflow site. When a user hovers over the button the social sites sharing icons are shown. This method allows you to maximize space on your site and offer a unique approach to social sharing your Webflow content.

A dark themed slider for Webflow created using Spide.js. Splide is a lightweight, accessible and more importantly flexible slider written with TypeScript. This requires no dependencies and has no Lighthouse errors. In order to get this to work you'll need to include the CSS stylesheet and JS found in the Page Settings custom code section.

A wacky and fun button animation in which emoji's explode after clicking a button in Webflow. This effect was created using custom JS so be sure to add the code found in the page settings to your site in order for it to work properly. While this could be created natively with Webflow interactions a simple JS library helps create this effect faster and easier.

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.

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

Liven up your hero section with this unique vertical hero scroll animation.

Here's a text stroke interaction based on the mouse movement for Webflow. Upon moving the mouse around the text stroke follows the cursor around the Webflow site.

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

An example of a form label input animation for your Webflow site. When you click on the input the label waves above the input via each individual input when it's clicked on.

Here's a way of creating a 3D animated and interactive box model that flips and rotates based on mouse movement in Webflow. Playing around with CSS grid functionality this demonstration creates a net of a box using CSS grid, then just folds the sides together using the transform options and native Webflow interactions to create a 3D box.

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

Here's a way to add a beautiful, count up counter via JS in Webflow. This wonderfully designed metric section is perfect for a SaaS or similar industry that is looking to add a metrics section in their Webflow site. Be sure to add the custom code found in the page settings to ensure that this works properly.

A clean and modern Webflow menu navigation design with hover over interactions/animations. A perfect cloneable to get your Webflow site started with a modern and aesthetically pleasing menu navigation. Upon hovering on a navigation link their's an interaction that shows a growing underline.

Here's a way of adding a full screen Google maps modal to your Webflow site. Perfect for showcasing your business location while keeping the user on your Webflow site.

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

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.

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.

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 adding text above a div on mouse hover in Webflow. This method allows you to add floating text that follows the mouse on div hover. This also keeps the text in line within the specific div that you are hovering on.

Here's a way of using a math problem for a captcha in your Webflow forms. This allows users to create a basic math problem prior to them being able to successfully submit their form submission. All math questions are randomly generated.

A way of creating a 360 degree spinning image via SpriteSpin

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 smooth scrolling effect in Webflow that zooms into images as the page is scrolled. Perfect for adding smooth page scrolling and an image effect within your Webflow site.

Tabs can be a pain to create in Webflow. With this cloneable you can get started building your tabs faster and built on top of the client first system by Finsweet. A perfect way to add tabs to Webflow quickly and easily.

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.

A template for building your own brand design system and/or styleguide created by 5Four Digital. A design system/style guide is a single source of truth which groups all of the design elements for development.

Here's an advanced reveal image on hover interaction tied to Webflow's native CMS system. This is 100% Webflow native CMS powered using a little bit of jQuery. It's fully responsive with fluid responsiveness based on Finsweet client-first framework. The interaction is used to showcase a preview image from the portfolio CMS, but can be used in a number of different ways. For example you could set it as a values section, gallery section and much more. Be sure to copy the section-portfolio and global styles symbol as well as the global elements symbol. Copy the code in the before body tag and you are all set.

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.

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 way to add an interactive, draggable 3D model to your Webflow site. Find the full video tutorial here: https://www.youtube.com/watch?v=M0Xd4wGfn_E

A fun way of adding a water mouse hover ripple effect to your Webflow site. Simply add a tiny code and the javascript library and you're all set.

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

Here is a simple branding style guide that you can use for your Webflow projects and clients sites. This helps your clients, or yourself, create branding guidelines that will be used for all marketing and site materials.

A unique way of creating an interactive scrolling timeline within Webflow. This demonstration provides a Covid timeline as an example for it's implementation. The animation is based on while scrolling into view with a scale of the line div blocks from 0 to 1. A

Ever wanted to achieve slanted/diagonal sections on your Webflow site? With this no code technique you'll be able to create a Webflow section that isn't flat but has a slant or diagonal edge between sections.

A fun, interactive bubble blog for your Webflow site driven by Three.js. This interactive bubble blob follows the mouse around the page and moves and interacts based on it's location. A fun way of adding a dynamic and interactive background animation to your Webflow site.

Add an infinite horizontal marquee to your Webflow site using only HTML & CSS. Building infinite marquees with Webflow interactions can be difficult and confusing. This solution allows you to easily add a horizontal marquee to your Webflow site using HTML embeds or Webflow's custom code. The infinite marquee is lightweight and allows you to customize the direction, as well as the speed at which the marquee is displayed on your site. Skip the confusing calculations typically required for native Webflow interactions and add an infinite Webflow horizontal marquee to your site in seconds.

Add a unique and customized menu and navbar to your Webflow site. This example provides a unique feature of an image preview on link hover in the full page menu/navbar of your Webflow site.

Want to add a countdown or number count up to your Webflow site? Clone this easy and free prebuilt counter animation in Webflow and get it up and running in minutes.

A unique collapsing text Webflow interaction that utilizes native Webflow interactions and custom CSS for the text shadow effect. This is perfect for hero sections or areas where you'd like to add unique text animations. This utilizes Webflows page trigger interaction with when page starts loading. Using a few different divs and two text elements you're able to produce this looping effect on your Webflow site. A powerful yet easy to implement interaction that will make any Webflow site pop.

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.

A side navigation based on Integromats dashboard design utilizing expand on mouse hover states with further hover over interactions and animations.

A great way of adding a slider component with a splitscreen gallery slideshow that automatically rotates a collage while animating each slide with it's own transition. View the tutorial here: https://youtu.be/IvxswB5jy-w

A beautifully designed, multi-step custom onboarding form perfect for your SaaS, web design or site which requires a multi-step form. This is a complete onboarding form page design that allows for multi-step progress via a bit of Javascript. You will find the necessary JS and CSS files within the pages custom code settings. One set of code allows the form to use the arrows for the next and previous form pages. This form also features a unique range slider which was used for the date. This can be customized to your own requirements but is a well designed, multi-step onboarding form that allows you to break down long questionairres or onboarding forms into small, bite size pieces.

Add a 3D parallax background animation effect with mouse interactions to your Webflow site. A fun way of adding dimension to your otherwise flat Webflow site using the power of parallax.

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 number of different examples of utilizing Countup.js in your Webflow projects. The examples include, currency count up, intervals, scroll and more. The first example loads when the page is loaded, the second example counts up when the item enters viewport, the third item counts up several items at different intervals and finally there's a currency countup that continuously counts up. This requires custom code which you can find in the custom code section of page settings. Each example is commented within the code and allows you to update the target ID as well as the final count number. The second example is the scroll into view option and can be added as shown in the code. There's also a count down example, count up example with a duration and suffix. This is a great cloneable if you plan on adding count up or count down text items to your Webflow site.

A unique colorful gradient background animation technique to add some flare and depth to your Webflow site.

BlueKit is a simple and easy to implement UI framework for landing pages. Perfect for prototypes for user-testing sessions during quick design sprints. You can use the template and pre-built blocks to quickly build page structures. This was built with the beginners in mind. Clone the project, scroll down and delete, hide or move elements as you need. Change the color, font for any style of the current elements and all will change accordingly.

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.

Here's a simple pricing table with monthly or yearly pricing toggle for Webflow. The design is mobile friendly, user-friendly and designer--friendly. This pricing page includes a menu/navbar, pricing table, toggle with interactions and FAQ section.

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.

A way to reveal sections/data on Scroll. This uses interactions with opacity and move.

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.

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.

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 great way of creating repeating patterns for your CMS grid items using CSS nth child. It's also responsive!

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

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

Here's a rebuild of Webflow (2020) navbar and menu that you can add to your Webflow site. A perfect starting platform for building a dynamic navigation bar and menu to your Webflow site via this cloneable.

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 CMS driven 3d parallax effect for photos and portfolios using classes by Finsweet.

A fun text effect where text hops on hover.

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

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.

Here's a unique vertical split slider that with split transitions between slides for Webflow. A great way to add a responsive, unique slider effect for a full page or section on your site.

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

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

A demonstration of a multi step form with conditional logic using the Advanced Form builder by Alex Iglesias.

A pricing/quote calculator slider built with custom Javascript for Webflow. Here's a great way to add a custom pricing quote with a slider and forms to create an accurate pricing quote for your clients in Webflow.

Here's a way to utilize Lottie files with a scroll into view interaction and position sticky. A great way to add dynamic animations to your site with animations on scroll.

Here's a way to add some animation to your text elements within Webflow. The outer line of the text is animated and creates a fun effect for your text.

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

A unique animated button with a grid effect on hover via Anime.js

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 set of various language switcher elements designed for your Webflow site. If you use translation on your site these handy language switcher elements will come in handy. There are 14 different designs with necessary interactions to make them easy to copy and paste into your Webflow site. Nearly every kind of design you could think of to make this easy to implement.

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

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.

A free Webflow style guide featuring all of the fundamentals that you'd need to build a Webflow site. This includes backgrounds, buttons, cards, colors, elements, fonts, grids, icons, sections and much more. This styleguide was created to be a starting foundation of your Webflow site, ensuring that each element has it's own style guide element to keep consistency and brand continuity throughout your Webflow project.

Add a countdown or launch date timer to your Webflow site with this cloneable. Have an upcoming launch for a product or service? Add a countdown timer via this cloneable and JS snippet. Simply update the JS code with the date and time of your event, match the style and make sure you have the relevant parent element ID and relevant divs setup and you'll have a countdown timer. In this example you can show the days, hours, minutes and seconds till your chosen launch time. This is perfect for any product or service page or events page that has a launch time associated with it.

Add some dynamic flair to your iPhone mockups in Webflow. When you scroll down the animated phone unlocking animation is shown to reveal content. The phone has auto updating date and time based on the users location. The iPhone GUI was recreated and the phone has the ability to unlock and reveal content on scroll. The mockup is fully customizable and you can change the content and wallpaper and is also fully responsive on all devices.

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

Custom product image slider featuring animated image transitions

A magnetic call to action button featuring rotating text and a trailing custom cursor in Webflow. Circletype.js was used for the circular text rotating animation. You can change the text and the circle radius will automatically recalculate.

A basic styleguide for beginners. Includes font style demonstration, color palettes, text colors, display classes, headings, text blocks, paragraphs, rich text elements, buttons, links, form fields, checkboxes, radio icons, icons, logos, class codes and more.

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.

Here's a large demonstration of fancy custom cursors for your Webflow site. This allows you to add a huge number of different custom cursors, or helps you understand how to add custom cursors to your Webflow site.

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.

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

An experiment using a scroll effect, Lottiefiles and Webflow interactions and the simplest building blocks. A full description of how the effect is achieved so that you can easily replicate it yourself. The entire effect is created via Scroll Actions interactions and the location of the windows page scroll. The lottie files are then triggered by the percentage of the page scrolled with a "static" 100vh window.

Creating a simple tabs section in Webflow has never been easier thanks to this cloneable. This simple and minimal tabs section design allows you to add tabs styling to your Webflow site.

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.

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

Here's a way to block internet explorer visitors from your Webflow site and provides a module that encourages them to download a more popular and up to date browser.

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

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