Discover Webflow cloneables

Here's a way to achieve a 3D scrollable isometric grid in Webflow. When you add this to your Webflow sites you'll create a dynamic, scrollable grid that adds a 3D popping effect on hover. This technique is accomplished without any interactions and uses Webflow's native transitions and effects. This example also is tied to Webflow CMS.

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.

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.

Using Webflow's new blending modes this text effect on scroll becomes apparent of the capabilities of blend modes.

Here's a way to highlight text or categories of like and similar nature by hover over. This is a great way to add emphasis to certain items on your site/page by simply hovering over a category or text item. This could be extended for CMS items as well and your own collections.

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.

A complete pricing table driven by Webflow CMS. No need to customize pricing, features, or images. All of it is being driven via CMS to make it easy for you or your clients to update their pricing information.

Here's a fun technique, using a slider with a hover slider to dynamically change the color of a sites background in Webflow. This was all made with Webflow interactions.

Looking to add a dynamic image slider that can change based on categories? Here's way to add a dynamic image slider driven by Webflow CMS that can be filtered by categories or links of your choosing. The amount of slides is determined by the amount of images added to the multi-image field within collections.

This dynamic range slider takes a number and calculates the output into a certain number of images in Webflow. A perfect way to implement a range slider with dynamic images based on the clients input and your output settings. Perfect for charities to display the impact of donations of charity donations.

A free cloneable footer component with gradient background animations, featuring page links, social media buttons and more. For this to work be sure to check the settings and that you have selected the body class (all-pages) go to typography panel and apply 1vw for it.

A conference/event hero section design for Webflow. Features illustrative cards for daily event schedule, a get notified form opt in, video lightbox and menu/nav bar.

Five different variations of an image appearing when hovering over a link, or item. In the first example when a user hovers over the item the image stays in line with the text although slightly follows the users mouse. In the second version the image follows but at a different section and with a different image dimension. In the third example the entire div has an image appear from the bottom and changes the background of the item. The following demonstrations changes the entire background of the page to an image. This demonstration and cloneable was built entirely from Webflow interactions and doesn't use any extra custom code or HTML embeds. These examples rely on the Mouse move over element for the triggers.

A very unique, fold in curtain style menu animation navbar for Webflow. The menu is revealed from both the top right and top left of the page. You could add different images or colors for the panels coming in. You could also add a variation of different textures or styles to those divs, or keep it simple and use this example. The animated menu was built using Webflow interactions. The rotating text inside of the menu was created with Illustrator, After Effects and Lottie.

Here's a virtual card animation for Webflow. When a user hovers over the card it opens up like a card and displays the inside of the virtual card. A fun animation for your Webflow site and a way to send someone a virtual card.

A full page background video hero section design in Webflow. An easy way to integrate a background video hero section in your Webflow projects with unique button interactions, and a scroll indicator.

A beautiful horizontal image portfolio parallax effect for Webflow. When a user scrolls down the page the images move from right to left and provide a parallax style effect as the image behind the visible section is moved as well. This technique utilizes Webflow's native interactions and doesn't rely on extra Javascript or CSS. The technique uses While scrolling in view, with one div moving over at one speed and the section with images moving over at another, providing this unique parallax image scroll effect.

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.

Want to add a static TV background effect to your Webflow site? This effect was created in Webflow using only an image and an animation to achieve the effect. There's no custom code or any other trickery going on other than Webflow's native interactions and designer.

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.

Unlock the power of jQuery with this scrolling 3D cube. A fun way of showcasing images, portfolio items and more.

A fun three.js background animation for your Webflow site. Flying butterflies will come from the bottom left hand corner of your page and fly up to the top right and off of the screen. A fun background animation effect powered by Three.js and 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).

A creative, yet difficult to implement variation of Webflow accordions that utilizes a combination of position sticky, CSS Grid and the power of mix-blend-mode to create the powerful overlays. This is primarily no-code but does include bits of JS to achieve the link jumps and another one to reset the scroll position when the item has been closed. A few notes is that this doesn't work well in Safari and adding new items means that you need to add more JS in the page settings. Jump links are positioned to absolute elements within each dropdown, so you'll need to add new ones with new IDs for those to work. The interaction animations are really well done, when a user opens and expands an accordion item the title pops to the top of the page and the content comes in from the bottom. It also allows the user to bounce around various sections of each accordion item as previously mentioned.

Using Webflow's 3D transform, custom animations and a bit of JS you're now able to recreate the Star Wars intro on your Webflow site. Please note that there's custom code required for this to work which you can find within the closing body tag of the Page Settings. There are two scripts, one that powers the music and the other that powers the moving stars.

Here's a way to create a mouse tracking text effect in Webflow. When a user moves their mouse around the page the text is manipulated based on its location on the page.

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.

Here's a way of adding video on hover to your Webflow cards. Using basic hover interactions you can create customized cards that play video on hover over on your Webflow site.

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 are four different text reveal animations on scroll interactions in Webflow. These designs all use custom code via HTML embeds. The four techniques include classic text review on scroll, growing circle mask on scroll, and text in from left and right on scroll.

Three different logo/client bar sections for your Webflow site. Increase your sites conversion rate by featuring a client logo bar to present social proof and build trust with your visitors.

A simple and clean example of copy to clipboard functionality via a simple jQuery code. This example also provides a tutorial of how to add this to your Webflow site. This is perfect for creating any type of copy to click text to make it easy for your users to copy and paste any information you like.

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 tutorial on how to integrate Hubspot to Webflow in the four most popular ways, with full tutorials and examples. These include Webflow to Zapier to Hubspot. Webflow with Hubspot HTML form embeds. Enterprise Hubspot to Webflow and finally Webflow and Hubspot tracking code integration.

Ever wanted to create a previous/next button for CMS items in Webflow? Using this cloneable and technique from Finsweet you'll be able to create a previous and next button for Webflow items so that users can navigate seamlessly between items of your CMS collection.

A free Webflow SaaS login/sign up page with unique labels, show/hide password functionality as well as Memberstack installed.

Load form or anything from a different page on your Webflow site. This is helpful for embedding 3rd party forms in Webflow or even external action URLS. This helps combat most spam bots since many don't utilize or render JS. Keep in mind that JS needs to be enabled in the browser for this technique to work.

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.

Advanced pricing table that provides a loading bar indicator for individual features. Includes hover interactions, animated bars, sticky header and much more. This also is mobile ready although be careful about hidden columns.

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 fun concept of a fan site for the Matrix. Utilizes a moving background code screen much like in the movies.

A beautifully designed login or sign up page with a toggle between signing up and logging in forms. This full page design includes backgrounds, input designs, button, background video and much more.

An expanding side menu that opens up on the right side of the page on click in Webflow. A fully designed with interactions menu/navigation bar that opens on the right side of your Webflow site.

Here is a unique button with hover animation in Webflow. When you hover on the button the border outlines in a cut from two different points which makes the line look segmented. When you hover over the button the lines seem to move in a clockwise fashion and then reverses on hover out. This was achieved by placing two skewed div blocks at the top and bottom of the button with. the same color as the background. The div block was placed precisely on top of the button border. This makes it look like the border is being cut. Then those to blocks are moved left and right on hover to make it seem like the lines are moving. It's a subtle, yet unique effect that adds an interesting effect on hovering on a button.

Here's a fun demonstration of creating a 3D layered interactive page for Webflow. When you move the cursor around the page the elements move around the page.

An add to cart hover button animation for Webflow. When a user hovers over the Add to Cart button a shopping cart icon slides in from the right side. This helps users understand the action taking place on the button and helps add a new level of dynamic buttons to your Webflow site.

Here's a way to add a rotating outline for buttons in Webflow. A unique and eye catching animation that draws your users attention to important buttons on your Webflow site.

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 very unique JS hack that shows your sites publishing status in your browser tab. Helpful for Webflow's slow publishing times. Navigate to another page/browser tab and watch the status of the publishing LIVE. In order to get this technique to work you'll need to inject the code found on the cloneable to your browser. To inject the code you'll need to use a 3rd party javascript injection tool for Chrome such as CJS or CJS2. You can then copy and paste the elements above and set it to only load on Webflow.com.

A 3D Splide.js CMS draggable slider for Webflow. This 3D draggable slider created with Splide.js allows you to integrate Webflow's native CMS solution with Splide.js to create a dynamic and interactive slider with Webflow. The slider features navigation arrows and the ability to drag between each slide item, perfect for desktop or mobile. There's also a 3D effect with the slides entering and exiting the viewport. The Splide.js slider allows you to customize the number of items per page, per move as well as various break point functionality for mobile responsiveness. You're also able to modify the delay, duration and easing in and out. This example is infinite looping so that there's no beginning or end and the users can navigate endlessly between each individual slide that is powered by Webflow CMS.

A couple of easy to implement splash games for your Webflow 404 pages. Entertain your Webflow site visitors with these fun splash games.

Here's a large testimonial slider component with auto-transitions for Webflow. This smooth transitioning testimonial slider is perfect for any Webflow site. It transitions smoothly between each testimonial and provides unique interactions. This demonstration also includes the possibility of a video as well.

An interactive background animation for Webflow created with Spline. There's also a custom loading animation with a background image.

A demonstration of using Swiper.js in a hero section. This is also mobile friendly by becoming full-width.

Here's a way to add social sharing buttons to the left sidebar of your Webflow site. This social sharing block floats above your site so it's always visible to the users. This is done via a floating-share jquery plugin.

Here's a way to add a full page, horizontal accordion to your Webflow site. Using this method you can change the traditional horizontal accordion design to a full page, vertical accordion. Please note that this uses custom code found within the body section of the Page settings.

A unique interaction in which images pop up an trail the mouse cursor when moved on the page. A fun technique that could be implemented a number of ways to create various dynamic effects to your Webflow site.

Here's a way to achieve a full view experience on scroll for different sections on your site. Essentially this is a way to achieve snap on scroll between sections with a pagination to indicate which section the viewer is viewing. There is code added to the page so be sure to add that to your site as well. This will not work in preview and will only work on the published site.

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.

A done for you Webflow pricing table component cloneable created by the Flowbase team.

A unique demonstration of OGL manipulating a sites background image on hover. Be sure to check out the custom code to ensure that this work properly on your Webflow site.

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.

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

Complex techniques to achieve amazing background effects using unique blending and backdrop filter effects and blending effects. In this demo you'll see a hide/show background effect on scroll, moving divs/assets wherever on a page and the various blending techniques, mouse hover over to effect background effects and more. Combine separate channels into full colour photo; magically hide and show objects simultaneously using nothing but solid coloured divs; play with stacking various blend modes on top of each other; see the mind-bending inception of inversion of already inverted objects; use interactive colour changer for your elements, that does not even touch the elements themselves; create fun colour-restoring games; reveal the magical world invisible to naked eye with your blend-empowered cursor.

Want to add more than 5 Webflow collection items per list or have more than 1 nested Webflow collection per page? With Finsweet's Attributes you are now able to do this! Create a CMS nest functionality without any limitations and add more than 1 nested Webflow per CMS page. In order for this to work you'll need to add the custom JS library found in Page Settings head section and refer to Finsweet's documentation.

A sun circle animation that grows based on the page scroll in Webflow. This entire animation is built natively with Webflow interactions and requires no custom code. A great example of how you can use Webflow's native interactions to build in depth, multi stage animations based on page scrolling.

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.

A vertical masonry image grid lightbox driven by Webflow's native CMS. This allows you to easily integrate a beautiful masonry image grid with a full screen pop up modal upon click. The modal has a lighthouse slider with thumbnails that you can click on and view each individual image within the CMS system.

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.

Build a staggered animation with gird and Anime.js in Webflow.

A simple todo list built in Webflow with JS filtering.

A well designed frequently asked questions (FAQ) cloneable design for Webflow. This provides all the interactions required for opening and closing the accordions that will fit perfectly on your Webflow site.

Here's a way of adding a unique, full screen image transition to your Webflow site via Three.js Each image loads a unique transition upon clicking them and turns the images full screen upon click.

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.

A beautifully designed multi step form with unique animated input forms for your Webflow site. Even if you don't use the multi-step form the input label animations are a great design and perfect for any Webflow site contact form/checkout form.

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

Here's a way to have a CMS driven music player, with download functionality for your Webflow site.

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.

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

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

A light themed, pop up email opt in modal for Webflow. A great way of adding an interactive, opt in pop up modal for your Webflow site. Build an email list faster and easier with this free cloneable.

Here's a way to disable right click images in Webflow. The custom code will disable right click on either images or lightbox images. In order for this to work simply copy and paste the code found in the Copy this code HTML embed. Keep in mind that this only disables the right click although images can still be downloaded from the web without the right click capabilities.

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.

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.

A full set of beautifully designed interactions in Webflow for your projects. These interactions include buttons, play buttons, search, toggles, hamburger buttons, toggles, social sharing and much more.

Here's a text masking over a video effect in Webflow. This cloneable demonstrates a technique to allow you to clip a background video using text as the screened blending mode. There's also a demonstration using an image rather than a video.

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.

Fullscreen unique loading animation for your Webflow site.

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 way to achieve text appearing on scroll effect.

Here's a hover effect that adds a border and lines around a logo in Webflow. This effect was achieved by setting the border color to transparent on the initial state and then changing it on the hover state. Lines were placed with a width of 15px and a height of 3px. In interactions it was scaled from 0 to 1 on the x and y axis for the horizontal and vertical lines. To reduce the number of interactions required a class was created for the corner horizontal and vertical lines. Then a combo class was dded and placed the lines in the different corners around the logo. This allowed the use of only two interactions for the horizontal and vertical lines.

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

Add a Google places autocomplete search to your Webflow site via Google places API and this cloneable. Be sure to follow the steps to get this activated within your Webflow site and working properly.

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

This is a styleguide combination of the Wizardry system and Finsweets Client first methodology. The Wizardry system is an em-based fluid scaling system that is combined with the first class structure and naming conventions of the client first class naming structure and conventions. The main area where the two systems are combined is in sticking with REM units for the small text elements so that on desktop they don't end up too small on low resolution screens. The design also has a mockup at 1440px and in the template the body font size is set to 1.111vw, which is equivelent to 16px for simple px to em conversion.

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

Here's a way to bulid a pricing calculator based on multiple slider inputs to get an estimate/quote for your clients. This is accomplished using the native Webflow slider element and a bit of CSS to style the controls. Values are updated by the sliders as well as by entering in a number within the top input fields. This is perfect for custom pricing and quotes needed on a pricing page.

A great style guide to get your Webflow site up and running faster. Included in this style guide is typography, hero text, H classes, paragraph, rich text, color swatches, buttons, shadows and more.