Discover Webflow cloneables

Here's a well designed cloneable blog template design perfect for your Webflow site. It features a sticky sidebar and well designed content divs with just about everything you'd need for your blog page. Including other posts, individual blog page, call to action and email opt-in/subscribing, categories, sidebar and much more.

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

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.

Here's a unique way to show off your team cards on your Webflow site. When you hover over a card a social media panel appears on the right hand side. The dots are color coded to match the brand color of the social media platform. You can place text or icons inside of these dots as well. On the hover a panel appears with the brand color and a large social media icon. The image rotates -10 degrees to 10 degrees on hover. The animation is pretty straight forward. The only thing to note is that the dots had to placed in the same wrapper so that when you hover over the dots you could target a sibling element within the interaction. This allowed to make sure that the effect could be repeated across multiple cards by targeting the sibling classes of the dots.

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.

Showcase and feature your CTA by adding moving lines to the border in Webflow. Using this technique you can showcase anything that you want to draw the users eyes to by adding moving lines and a 3D hover rotation to products, cards and other important aspects on your site.

Here is a free and easy way of using Google translate to make your site multilingual with jQuery.

Three different testimonial sections for your Webflow site. These free testimonial sections include two slider designs and one non slider to feature testimonials on your Webflow site.

A massive grid that moves objects into view as the mouse moves into the viewport. This is perfect for large product pages, portfolio items and much more in which you want to add a dynamic and interactive grid to your Webflow site. This demonstration uses a combination of Symbols/components and Webflow's mouse move in viewport interactions to generate a large grid that can be navigated by the users mouse. As the user hovers over the image or item card the image expands. All powered without any custom code and using Webflow's interactions and symbols/components.

A demonstration of how to add an infinity cycle text header rotation with 3D style changes in Webflow. This technique uses native Webflow interactions and does not require any 3rd party scripts or plugins to work properly.

A quick and easy way of adding a dark mode/light mode toggle to your Webflow site using native interactions. This is a perfect demonstration of how to implement dark mode/light mode toggle interactions to your Webflow site using native Webflow interactions.

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.

Here is a beautiful, image based portfolio with smooth transition delays and snap-to-scroll properties in Webflow. This CMS powered Webflow technique features snap scrolling functionality, mouse cursor hover over effects and a smooth transition with delay perfect for any portfolio page in Webflow. Please note that there is code within the closing body section in Page settings required for the smooth scrolling using Luxy.js.

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.

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.

A great way to achieve a sticky Webflow effect for features, about sections or really anything in which the image becomes sticky in the viewport while the text still scrolls. As you scroll down the images are sticky while the text is scrollable, between each section there's an image transition effect. This effect uses no custom code and is all accomplished via Webflow's while scrolling into view interaction with the opacity and scale options.

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

A free membership splitscreen signup page for Webflow. This cloneable features a sign up page with all of the necessary elements you'd need to create a perfect sign up page in Webflow. This includes sign in with Google buttons, Facebook, first name field, last name, email and password. Each input field has unique states (hover/active/selected) and the entire page is well designed and laid out.

Add all countries to a dropdown in your Webflow forms. If the dropdown/country isn't selected the form will produce an error state. With this project you can copy-paste the custom <select> code. There are three different variations of the dropdown. 1. With Emoji flags 2. Without Emoji flags 3. Without the Nice select Please note that the countries are loaded via JS and won't display in the editor.

Here's a way to create a typewriter effect in Webflow via CSS. Popular on many different websites the typewriter effect allows a dynamic, eye catching headline or text on your Webflow site.

A custom page transition for your Webflow site created with Webflow interactions and a bit of custom code. This transition provides a nice, multi level swiping transition from left and then back to the right.

An easy way to add a text link highlighting effect to your Webflow site. With this cloneable you'll learn how to add an inner shadow on link hover with a distance attribute to create a growing underline effect for your links. This method uses no interactions and relies on Webflow's native transitions.

A Webflow pricing table component featuring tabs on the side for different pricing packages.

Seven different feature layout designs for Webflow. These unique designs allow you to easily add feature sections to your Webflow site. Great looking, responsive designs.

A two colored spiral galaxy animation for Webflow created with Three.js. This spiral galaxy spins in the background of your Webflow site and offers zoom in/zoom out functionality by the scroll wheel on your mouse.

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

A modern and yet sophisticated multi-step quote request form for Webflow. This multi step form features a status indicator for which step you are currently in with the form. The form was created using Webflow forms and embedding various native Webflow sliders within the Webflow form. This method does NOT require any extra custom code or HTML embeds to work properly and is a perfect starting point for any multi-step form. The form utilizes checkboxes for large options on the second portion of the form, there are also custom designed radio buttons, and a final confirmation page to submit the form. Overall this is an excellent cloneable if you plan on adding multi-step forms, contact forms or questionairre's/onboarding pages for your Webflow site.

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.

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 simple todo list built in Webflow with JS filtering.

A unique scroll animation in which a spider crawls across the screen in Webflow. This animation was built entirely from Webflow's native interactions and the power of Lottie animations. As the user scrolls down the page the animation is triggered and then moved across the screen using interactions.

A very complicated, and advanced cloneable featuring hover effects for a portfolio site. This demo includes a custom, animated cursor, hover effects that change images/divs, text clipping that fills text based on the cursor location. A great example of how Webflow can create a number of different effects, all at the same time. All of this is driven via Webflow's native CMS.

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.

A demonstration of how to change the layout of a page design via a click in Webflow. This method allows you to dynamically alter the page design/layout design on a Webflow site using native Webflow interactions.

A simple login overlay panel for Webflow. A clean login UI overlay built with a minimal native Webflow interactions. Perfect for prompting a user to login upon taking an action, such as saving or bookmarking an item.

Here's a way to add a unique dancing light effect for the background of your Webflow site. This uses CSS for the animations which is responsive and will animate vertically on smaller screens.

Blend modes meets an infinite neon animation via Webflow. The blur filter and mix blend modes were used to create the neon effect with a background gradient creating the color change across the screen. The blend mode was created via CSS as this was created prior to Webflow's native support so you'll need to add the CSS to get this to work properly. The infinite movement effect was created with Webflow's native interactions which shows the dynamic power of Webflow interactions. The infinite symbol was created using 3D transforms and the blob follows around the path.

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.

An analog clock built from CSS & JS in Webflow. The design is built from divs, while javascript and CSS drives the analogue movements of the clock hours and hands.

A fancy scrolling interaction to showcase your work in Webflow. This cloneable uses Webflow's native CMS and the power of Webflow interactions to create a smooth scrolling interaction in which each slide is a different section. Upon scrolling the images move in smoothly and the headline and description appear. This is a rather extensive interaction as it deals with scroll actions and scale, opacity, move based on the location of the page.

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

The starter style guide project for the Relume Library. This project contains a style guide with the necessary pre-built classes. There are no pages, no layouts, and nothing to delete. This simply allows you to get up and running with Relume, easily. The Relume Library uses Finsweet's client-first Webflow style system. You can find the prebuilt page under Drafts/Style Guide. The styleguide comes with Headings (H1-H6), heading classes (heading-xxlarge), Paragraphs, Links, Block Quotes, Lists, text sizes, text weights, letter spacing, line heights, text styles (using custom Global CSS), text alignment, rich text, colors, background colors, premade shadows, UI elements, buttons (with icons, alternates, icon locations), form elements, icons, image wrappers.

An example of an expanding image cards on hover menu and navbar in Webflow. This full page menu adds a hover interaction that expands cards or images on hover in your Webflow menu.

Add a character count to an input field on your Webflow site. This is perfect for creating limitations or showing the character count of an input field.

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

A simple yet effective way of adding a countdown timer and clock to Webflow. This example utilizes some custom code and Webflow's native CMS to create a count down timer clock on your Webflow site.

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.

Here's a way to create a tabbed style slider for Webflow with unique transitions. The previous and next slider buttons are removed and each of the sliders are numbered. Upon clicking on the next number the text and images are slid in via a unique transition. Perfect for changing the way that your slider can be built and displayed within Webflow.

A simple and easy to implement page loader using all of the letters of the alphabet in Webflow. Everything is accomplished with Webflow interactions and zero custom code.

Three different call to action CTA sections designed for Webflow. These are designed to help increase your conversation rate and drawing attention to important call to actions on your Webflow site.

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

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.

Here's a short CSS code for creating floating labels on a Webflow form. This interaction creates a unique way to add interactions and animations to what would typically be a static input field.

Three different simple page transitions for your Webflow site. These are simple transitions achieved by barba.js. The script can be found on the home page script.

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.

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.

A well designed starter dropdown navigation menu with hover over for Webflow. This consists of clear class names, 100% native interactions and basic dropdown triggers. It's also mobile friendly and responsive design.

A real estate hero section design for Webflow. This hero features a custom load animation, call to action buttons, fully designed slide in menu/nav bar and much more. This features a JS snippet to disable scroll once the menu is open, which can be found in the home settings before the body tag.

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 way to add or remove additional form fields in Webflow. This is a great way to have added functionality to native Webflow forms.

A like button that allows the users to take notice when they give some love on your site. When a user clicks the like button the heart begins to fill up and the like count increases. The like count can be added to local storage or synced to a database.

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.

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

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.

Here's a demonstration of a category card animation on hover in Webflow. When a user hovers over a card two different lines are shown on hover. To achieve this effect the lines scale in from the top-left and the bottom right around the image. There are two blocks around the image and the lines for each block start animating at opposite angles to create an interesting line effect around the image. The effect is achieved by placing two, absolute div blocks inside of the card wrapper and then moving the first div block a bit to the upper left and the second block to the bottom right. In the absolute div blocks 4 div blocks were placed on each side of the div block. The transform-origin for each line to make sure that they are scaled in from the correct place. Each line starts at a scale of 0 and then changes to 1.

A tiny vanilla JS clock, modify using attribute and can be configured with time zones for Webflow. This technique is powered by Clock.js and utilizes Webflow's native custom attributes to determine each countries current time. This allows you to modify the timezone by simply adjusting the Webflow custom attributes for the text content to update the clock based on the timezone you require.

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.

Four separate stats sections for your Webflow site. Each of the stats sections are well designed, and unique to help show stats of your product or service on your Webflow site.

A unique javascript powered Webflow interaction in which images change on items in viewport and a clicking sound is triggered for each new item that's centered in the viewport. As mentioned this utilizes a custom javascript which is found in the pages custom code section. This script allows you to utilize Webflow's native CMS to create a list of text items and associated images with each CMS item. As the user scrolls down the list of text items, the items that are centered in view become highlighted white, the primary CMS image is shown and a clicking sound is played. A unique and fun way of adding a little bit of JS to your site to create unique, and effective Webflow interactions.

A fun cube particles animation for your Webflow site. The code was tweaked to make it fully responsive and configurable within your Webflow project using attributes. You can edit particle color (HSL format), scale factor for desktop and mobile, particle density, cube perspective, particle spread and particle velocity all within the attributes. Be sure to add the HTML embed to ensure that this works properly.

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 membership pricing table design for Webflow featuring three pricing structures in a clean and modern design. This pricing table cloneable features a unique header section and three different pricing packages with an emphasis on one package. It includes price, description, button and individual pricing options.

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.

A fun demonstration of how to use jQuery to create a draggable canvas or game. This utilizes custom code within the page settings and will not work on mobile.

Here's a way to create a rotating image on page scroll in Webflow. Perfect for portfolios, products images, and much more.

A simple, interactive scroll text mask technique for Webflow. As the user scrolls down the text moves in separate directions created through a Webflow interaction. The text has a masking effect which can be found on the parent Track div. A great example of Webflow's native masking capabilities.

Here's a FAQ accordion with lottie interactions for Webflow. Perfect for adding an accordion to your Webflow site with a nice lottie animation for opening and closing the accordion.

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 demonstration of parallax scrolling movement interaction examples within Webflow. A perfect way of understanding how to build custom parallax scrolling effects within your Webflow site.

Here's a technique to add IP based geolocation to your Webflow site. This can pull everything from city location, country, IP address, IP timezone, IP latitude and longitude to your site.

A fun example of the blending feature released by Webflow via a custom mouse cursor. This technique turns the mouse cursor into a blended object, when hovering over the image you can see the blending difference effects. This utilizes some minor custom CSS for the mouse cursor although the true blending and custom cursor is created via native Webflow interactions and features.

Want to add a copy to clipboard button in Webflow? Here's a way to create a copy to clipboard button that will copy any piece of text that you want, including links, to the clipboard. This is great when you want to allow your users to copy blocks of text, URLs, or even color codes in a styleguide.

An example of a fixed slogan/text that changes when scrolling through different sections on a Webflow site. The embedded code is compatible with all major browsers, including some variations of Internet Explorer and Edge.

Here's a demonstration of a simple to do list created in Webflow via javascript.

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.

A unique interaction perfect for portfolio pages or about company pages. As a user scrolls down the page the primary in focus element becomes highlighted and the background changes to a different image. This effect was created from only Webflow interactions and does not use any extra javascript or code snippets. Using Webflow interactions and the scroll into view trigger the opacity of the image changes and the previous items are hidden, while a text effect is accounted for. Overall this is a basic, yet sophisticated Webflow cloneable that will help bring any portfolio to life.

Quality FAQ accordions designed and ready to be cloned for Webflow. Three variations of FAQ Accordions with predesigned Webflow interactions with modern design aesthetics. The first variation features large expandable cards with drop shadows and card highlighting all built with Webflow interactions. When selecting the card the arrow icon changes direction and becomes blue, the card also features an outline to let you know that it's been expanded. The second variation features tabs for extra FAQs and to help split your FAQ up by topics. This is a great way to feature a ton of FAQ questions on your page without taking up valuable real estate. The third variation is a grid form that also allows you to feature more questions in a smaller space, although the limited space means that large FAQs may not be ideal for this FAQ accordion.

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

Twenty prebuilt CSS button hover effects to allow you to easily add button hover effects without complicated Webflow interactions. These include a number of unique effects such as marquee text on hover, fade in and fade out, 3D expanding effects, chat widget buttons, rotating and much more. You can add these to your Webflow site by copying the HTML embed with the relevant CSS scripts for the button effects that you want. Add the custom css class to your buttons and you'll immediately be able to view the button effects within Webflow designer. This makes for easy, and lightweight buttons that provide fun effects without the headache of interactions or complicated hover states.

Here's a way to display a live date on your Webflow site. Easily add the day, date time and year to your Webflow site using this custom script. Be sure to add the custom script found within the page settings to get this to work properly.

A full size product/service slider perfect for a pricing page or features page in Webflow. This slider features a single product per slide with transition effects between each slide. Includes custom cursors, slide transitions/interactions and a well designed features section.

A unique way to show a video play button via the mouse/hover over in Webflow. A fun way to add a dynamic play button to your videos in Webflow. When someone hovers over the video a play button appears to follow the mouse cursor and offers a few different rotate states depending upon where the mouse is located over the video. This technique uses a few different native Webflow interactions for the mouse cursor to appear and the rotate effect. This uses 100% native Webflow interactions and does not require any extra code. Tutorial can be found on Youtube here: https://youtu.be/ySUF-D9LxjE

Four different magnetic mouse hover button designs. These buttons are great for a CTA button due to the stickiness of the button interaction as it tends to grab your attention and keeps the user focused on the CTA. By using the mouse hover over element interaction to create this animation which makes the cursor act like a magnet to attract the button.

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

A beautifully designed opt-in/sign up modal interaction with Webflow that provides a unique way to sign people up or opt them in via an interaction. The modal has a custom bounce interaction on load and you can use the X or click anywhere on the page to close the box.

Want to add some gradients to your Webflow site? Here are 40 free gradients ready to be added to your Webflow sites.