Discover Webflow cloneables

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 horizontal scrolling timeline of events driven by Webflow CMS. You can navigate through the timeline both vertically (below) and horizontally. Both lists stay in sync. The vertical section shows more notes and links regarding the timeline events. This timeline is CMS driven and there are two collections, one for the events and one for the categories of each events. Each year of the timeline is made out of one collection list. There is more info on how this works at the bottom of the page, specifically how the CMS and CSS calc work. This could be great for about pages, client timeline pages, and much more.

No javascript, no interactions, easy CSS scrolling marquees for your Webflow site. This is the easiest way to add marquees to your Webflow site without ANY confusing interactions or complicated JS solutions. Please note that you must have an even number of elements within your marquees for them to function properly and not skip around. The CSS for each marquee is included inside of the container and denoted with an emoji.

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.

Here's a way of creating a text/content limit for how many lines of text that you'd like a paragraph of text to display. This allows you to have artificial limits to limit clients or keep design elements similar. Refer to the HTML embed code to achieve this and adjust the code according to your needs.

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.

An amazing, sweeping slider interaction perfect for any Webflow site. The interactions have a custom scroll indicator, automatically transitions slides and provides a unique sweeping transition between slides. Perfect for a hero or landing page in Webflow.

Here's a way to create a zoom in on click technique in Webflow. If you need to magnify an image on your Webflow site this cloneable is perfect for you.

Here's a way to add scrolling section transitions on a Webflow site. You can easily change the colors of the sections to whatever you choose and implement this easily on your Webflow site.

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

Here's a way to add smooth scrolling to your Webflow site using tween max. There are several ways to achieve smooth scrolling in Webflow, and this is another way of achieving that effect.

A great way of adding draggable background maps to your Webflow site. This is an example of a topographic map of Switzerland although could be adapted to other maps. This is easy to embed to your Webflow site.

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.

An interactive blob and SVG morph technique using anime.js in Webflow. This is a great example of utilizing Anime.js and a blotter text effect for your Webflow site. When a user moves the mouse/cursor on the page different interactive effects take place to make the site entirely dynamic.

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.

A set of unique 3D cards in Webflow with hover over animations and unique interactions. These dark themed cards include mouse cursor interactions in which the cards create a 3D effect on hover. At the same time the cards have a hover animation in which a circle grows and changes the card from dark, to white with all icons/text and everything changing on the hover state.

A grid layout with parallax style effects in Webflow. This unique grid layout features a text masked headline section and a unique grid that's ready for a parallax style effect. A unique way of demonstrating images and the power of Webflow interactions.

Here's a quick and easy way to add a date picker to your Webflow site via flatpicker.js. The reason we love flatpicker.js is because it's a quick, and easy solution and is incredibly customizable. You can find flatpicker.js docs here: https://flatpickr.js.org/

A full UI kit provided by Kazbek for Webflow. This includes nearly all of the components and UI items that you may need for a site, including navbars, footers, contact forms, pricing, payment icons, FAQ sections and much more.

A right side menu for Webflow that slides the menu in from the right hand side on click. This menu features all of the interactions required to create a Webflow menu. When the user clicks on the hamburger button the menu slides in from the right part way on the screen. There's a menu item hover interaction which has a highlight effect that grows on hover and then fades out on hover out.

Here's a unique team, about card hover animation for Webflow. When someone hovers over the profile image the image zooms out, and the name, details and a button is then displayed.

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

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

For a CMS collection making alternative grid items isn't possible natively, unfortunately. However using a unique technique you can accomplish this. The first line of code forces every second item to go from right to left. The second line then forces the text wrapper to always be on the left so that our text doesn't get messed up. Browsers support this method fine. Check out the custom CSS code to accomplish this technique.

Here's a product card with image zoom on hover for Webflow. When the user hovers over the product image it scales up and zooms so the user can see more information about the physical product. This was accomplished by placing the image div inside of a wrapper with an overflow hidden. When the user hovers over the image wrapper the image div scales up to double the size. Then with the mouse over element interaction the image moves in different directions when hovering over the image wrapper. This allows the user to hover around the image to see different parts.

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

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 of adding custom popup modals for video and content to your Webflow site. These custom content modals utilize custom code to disable scrolling when the pop up modal window is open. This helps prevent user confusion and scrolling of the site when these modal windows are open. For the video popup additional jQuery code is utilized to stop the video from running in the background when the window has been closed.

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.

Here's a basic example of utilizing Swiper.js for a slider within your Webflow site. Swiper.js is great for adding a draggable slider with a variety of effects within 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 utilize a URL query parameter to trigger different styles, titles and more in Webflow. In this example adding a custom URL query parameter and some custom script you can link to a FAQ page that then updates the page title, color and the topic based on the query parameter you select. This allows for pages to be "dynamic" and linking to pages with unique attributes even though the content of that page is the same.

A fully designed, minimal black and white footer with navigation effects.

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.

A full page, dark themed, hamburger menu navigation for Webflow. Built with interactions and animations for sliding the menu in as well as hover states for the links.

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.

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

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

A simple animation that has a scroll bar interaction/animation as you scroll down the page in Webflow. The animation is applied to the class, if you want to add more steps simply duplicate the last step and then edit the content.

Two examples of creating modal windows using Webflow's native CMS system.

Here are six unique, well designed hero sections for Webflow. Easily add a unique hero section to your Webflow site with this copy and paste cloneable.

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.

Three different advanced modal examples for your Webflow sites. Automatically adds scrollbar if the content exceeds the maximum height of the page/modal. Also features modal with the scroll the complete modal height, scroll the content within the modal, and ability to lock the background if you happen to scroll outside of the modal window.

A unique vertical navbar with a page scroll progress bar for Webflow. This vertical navbar features a progress bar that indicates how far down the page the user is and was created entirely with Webflow interactions. Note there is some CSS however this controls hiding the browsers default scroll bar. Otherwise this was built and created entirely with Webflow interactions. Taking advantage of While page is scrolling a div is moved down the page based on the percentage of the page that the user has scrolled down. This is perfect for storytelling or blog posts or pages with a large amount of information. A wonderful vertical menu solution for Webflow.

A well designed sign up/sign in page for your Webflow site. This sign up or sign in page features a unique confirm password interaction in which appears once the password field is starting to be typed into. The sign up page features a unique rotating logo image, email field, password, confirm password, create account and custom input field states (hover, selected, default).

This is a full screen lottie with scroll interaction. A unique way of using page scroll to animate a lottie file.

Here's a unique way of showing images, app screenshots or more in an iPhone mobile slider. The images continuously rotate through and infinite loop.

A stunning portfolio/image grid interaction in which a circle follows and grows when hovering over the portfolio/image grid in Webflow. This was created via Webflow interactions and animations and some custom jQuery. A lovely way to liven up your image grids or portfolio items on your Webflow site.

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.

Three individual animated buttons with hover interactions, which changes color, scale and rotates. On hover the svg mask changes its color via a button color background.

A low tech javascript free pattern generator that combines a list of colors and shapes to create random geometric patterns via CMS.

A wonderful style guide created by Flow Ninja. Jump start your Webflow build with this pre-built style guide. Includes a figma file, font styles, headings, block quotes, unordered lists, ordered lists, rich text elements, buttons, colors, inputs, containers, sections, paddings/sizing, margins, text alignment, flex and much more. This is a well organized styleguide featuring screenshots of the relevant sections if affects in Webflow. An excellent starting platform to build your own styleguide or use Flow Ninja's default styles.

Here's a way to add multi-step contact forms to your Webflow site. This allows you to build out large contact forms that don't feel daunting to the user. Each step has a relevant transition and effect.

An interactive horizontal scroll pricing calculator for Webflow. This lets customers or prospects calculate the pricing of your services via an interactive pricing calculator.

Here's a way to exclude free email domains from using a Webflow form on your Webflow site. It excludes the top 100 free email domains via Javascript.

Want to create custom text highlighting and underlining in Webflow? Webflow makes it easy to add customized highlighting and underlining via span classes. This cloneable demonstrates how to create any type of highlighting or underlining variations that you could dream of using Webflow's native text span.

A fun way of adding a full screen menu with image hover effect on text links. The full screen menu is responsive and easily copy pastable to your Webflow site.

Three well designed tab content interactions perfect for your Webflow site. The first variation has a unique sliding feature when a new tab is selected, the content then appears to fade in coming in from the bottom. The second variation has an underline for the active tab, the active tab underline then moves to the next selected tab while the content appears to fade in from the bottom. The final version appears to fade in from the left to the right with a different appearance to the content. These tabs all utilize Webflow's native tabs with Webflow interactions. Keep in mind that all of the tabs are individual interactions so the more tabs that you add the more interactions you'll need for each individual tab. Overall these are well designed and thought out tabs that would be perfect for any Webflow site.

Here's a way to have an image slider driven by Webflow's native CMS. In this example they are using slick slider tied to Webflow CMS.

Three different stunning Swiper.js carousel sliders built for Webflow. The first variation contains a draggable bar, slider dots to indicate which slide is currently active and slider arrows. The second variation features a dark themed variation of the first version. The third is a larger variation of the other two. These designs are all setup for Webflow's native CMS collection so that they can tie into your preexisting CMS items. As mentioned you will need to add the custom script found in the page settings. With this Swiper.js slider you can customize the looping behavior, slides per view, the slides between groups, space between, mousewheel, the transition speed, mobile responsive break points and its actions. You'll notice that classes are associated with many variables in the code, so be sure to use those or update them to your own.

A rebuild of the Who Wants to be a Millionaire gameshow screen in Webflow. Built with some custom code.

A FAQ section with a sticky sidebar and accordions for various FAQ questions.

A rebuild of the popular Wordle game in Webflow. This game also has a hidden Webflow mode, which when activated changes the dictionary to only include CSS, HTML and all things Webflow. The interactions, popups, word lists & attributes are all within Webflow. This rebuild is based on the same rules as Wordle, you have six tries to guess the 5 letter word. The exception being that each time you refresh the page you can keep playing as the word changes.

An advanced demonstration of using Finsweets Attributes CMS Filter using no-code for Webflow. The example includes a search input, sorting, checkboxes, range slider, sorting, drop down, radio buttons and more. A great way to understand the capabilities and advanced filtering options of Attributes CMS filtering.

Automatically show the correct tab based on the current day of the week on your Webflow site. This uses some custom code, although shouldn't need to be modified at all when you clone this. A video walkthrough is also included!

A text gradient scroll effect that was similar to the one used on Apple's website. This text scroll effect showcases a block of text, which has a gradient effect applied to it. As the user scrolls down the bottom portion of the text is visible and as the user scrolls down further the entire text is visible, scrolling down further on the page the text then fades out. This effect does not require any HTML embed or custom code and utilizes Webflow's native interactions. This interaction utilizes the element trigger and while scrolling into view to create the effect. This interaction works by changing the opacity and moving an object over the text.

An amazing 3D scroll animation that rotates a tablet towards the viewer on scrolling down. This can be used for both static images or animated videos and creates a wonderful depth perspective on page scroll by users.

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

Here's a way to create auto rotating tabs in Webflow based on a timed interval. This helps animate the static tabs and create a auto-rotating tab functionality, which are set for 5 seconds in this demonstration. This allows you to use the native Webflow tab functionality and users can still click between tabs. Interactions also still work. The animation and auto changing stops when a user hovers over any tab. This technique uses some custom code found in the embeds as well as Webflow native interactions.

Add a background text clipping effect to your Webflow site. This allows you to use any image as the text colors/styling by adding a clipping effect that allows the image to pass through the text.

Want to liven up the videos on your Webflow site? With this cloneable you'll be able to feature three, full page videos with a unique animation effect. Perfect for portfolio pages, heros or pages that you need to feature more than one video in a dynamic and interactive way.

Five different styles of animated and interactive social media share buttons for Webflow.

Here's a way of adding an animated progress bar to your Webflow site. All you need to do is update the width % to your preferred number. The animated progress bars add a fun Webflow interaction animation to the metrics section of your Webflow site.

Here's another well designed Webflow navigation menu bar with dropdown interactions. This nav menu is perfect cloneable to jump start your Webflow site builds by providing a fully functional, mobile friendly mega menu navigation to your Webflow site.

Here's a 4 column pricing page table/grid that's feature rich for Webflow. This pricing table/grid includes sticky package heading on scroll, tooltips, category and feature comparison and is also mobile ready with a tabbed version. A perfect starting point for any pricing page of a Webflow project.

Add social share buttons within Webflow with Refokus social sharing library.

Here's how to create an infinite marquee within Webflow using no additional code and strictly based on Webflow interactions. There are numerous examples such as horizontal from right to left, horizontal from left to right and vertical in both directions. This technique uses the page load trigger and by wrapping the items in the marquee (of the same size) in a parent wrapper. That parent wrapper then utilizes the move functionality in Webflow interactions from 0% to 100%. You can then customize the duration to slow down or speed up the marquee animation. A great example of relying on Webflow interactions vs CSS or JS methods.

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.

A smokey button design with interactions and hover state animations.

A newsletter form input with a pop up data privacy notice that appears once the email input field is active. This can be hooked up to Mailchimp or whatever email newsletter you're using.

A simple landing page perfect for a digital business card via a QR code or other short URL. This design feature a hover slider effect and large cards to make it easy for users to navigate your digital business card site.

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

This is the official project starter cloneable for Client-First. It contains a style guide page with all the utility classes that come with the Client-First style system. What is Client-First? https://www.finsweet.com/client-first Full docs: https://www.finsweet.com/client-first/docs Made with 💪 by Finsweet

An animated timeline scrolling effect perfect for about pages, historical pages and many others. As the user scrolls down the page a fun native interaction is applied that allows users to visit historical timelines with a unique Webflow interaction. The current date and item that is in view increases brightness while others out of view are faded out. The user can scroll down the page and have historical information provided in a unique and interactive fashion. This interaction uses while scrolling in view and while page is scrolling page trigger interactions.

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.

Cards with a full page transition effect upon click. Upon clicking the transition effect and full screen modal is loaded. Each card has individual colors. Be sure to watch out for the combo classes upon duplication and adding new interactions for each card.

Here's a great way to add dynamic hover states to your team cards in Webflow. With this profile card design several hover states are displayed with various scaling and movements. The top circle has social media icons to make the card more functional and display relevant information. The bottom has the name of the person displayed in a rectangle. The hardest part of this interaction was adding all the shapes into the card. Specific wrappers were used and positioned around the wrapper in an absolute position. For the rectangles at the bottom they were skewed on the x axis -20px. Take note, when you add a move interaction to these shapes the skew property gets removed so you have to add the skew property to the initial state of the interaction as well.

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.

Another beautiful sign up page with a background video sidebar for Webflow. This features a Google sign in button, Facebook sign in, email and all the necessary form input design elements.

A beautiful way of adding a credit card styled payment form design to your Webflow site.

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.

Product cards become sliders when on mobile resolution technique in Webflow. Here's a fun way to add a dynamic element to your site for mobile users.

A black and white styled subscription form login for Webflow. This free Webflow cloneable is a sign up/login UI with a textured background, rounded buttons, show/hide password and styled inputs.

Five different mega menu navigation designs for Webflow. This helps you add unique mega menu designs to your Webflow site that feature different mega menus dropdowns perfect for your site.

A horizontal scroll interaction built for Webflow using native Webflow interactions. This horizontal scroll allows you to use as many panels as you'd like and the panels don't need to be the same width or unit type. This horizontal scroll utilizes the While scrolling in view element trigger, and then utilizes only the move scroll action to complete this Webflow interaction. To add other panels simply add a new panel div in the track-flex section.

A drag and drop interaction for Webflow. This turns the elements into draggable and droppable objects on your Webflow site. A great way of adding some unique interactions that bring your site to life. Please note that there is custom code in the closing body tag and a style embed.

A simple yet fun Webflow interaction in which a custom cursor becomes visible upon item hover. This technique utilizes Webflow interactions but does have a small CSS snippet HTML embed, so be sure to add that. This example utilizes Webflow interactions Mouse hover events. When the mouse moves over an object the pointer scales accordingly. This is a fun, lightweight example of adding even more unique animations and interactions to your 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

Easily add a tooltip to your Webflow site with one of three different premade designs. These tooltips come in three different variations and include the necessary interactions required. The tooltips feature every possible direction needed, from left tooltips, right tooltips, top tooltips and bottom tooltips.