Discover Webflow cloneables

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

The Mast CSS framework is one of our favorite Webflow frameworks. It's based on a developer first mentality and features essential classes and strategies to help you build efficient Webflow sites. It's built with the less is more mentality, less classes, less elements to maintain which means faster sites and less development time. This framework allows you to quickly build anything from scratch by utilizing an essential set of HTML and CSS building blocks. Get up and running quickly with the Styleguide that features typography, heading classes, body text classes for paragraph, eyebrow text elements, ordered lists, unordered lists, color swatches, text colors, components such as buttons (primary, secondary, text links, form fields with radios and checkboxes, cards, utility classes, padding, alignment, overflow, size, helpers, layout, grids, columns and other helpful items.

Fullscreen unique loading animation for your Webflow site.

Add Twitter tweet cards to your Webflow site with this free cloneable. This cloneable recreates the basic design of a Twitter card to allow you to add testimonials, tweets and other Twitter related cards to your Webflow site. Add this to something like Integromat or Zapier and you could automate new tweets to your site. The benefit to this is that you can reduce the load time of your site be not calling the external Twitter embed JS library.

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 set of unique and interesting image slider transitions including distortion and warping effects made with WebGL. The code was modified to behave as bidrectional looping slider. This works on both desktop and on mobile.

A demonstration of using Spline to create an interactive and embeddable 3D background. This interaction will not appear on the project preview and you'll need to visit the actual page to learn more about this technique.

A beautiful example of a Splide.js Webflow slider that features a variety of features in a beautiful design. This slider offers navigation buttons (previous/next), fading out of the person image that isn't active, text description fade in on current active item and more. This example utilizes Webflow's native CMS collections which helps make this even more expandable and future proofing for you or your clients. This example also features infinite looping so that no matter the number of slides users can navigate endlessly through the items. With Splide and this example, you can customize a variety of options such as perPage, perMove, focus, the gap between items, arrows, pagination, the speed that the slider changes items, the dragthreshold, rewind speed and individual breakpoint styling effects. Keep in mind there is some custom CSS that you'll need to add as well which can be found in page settings and via an embed.

A unique expanding portfolio hover interaction built completely with Webflow interactions. When a user hovers over these portfolio items they expand to showcase a larger version of the image. This cloneable was built using entirely Webflow's native interactions and does not require any additional code or HTML embeds. The Webflow interaction uses the Element trigger on mouse hover targeting the class so that all classes will have the same Webflow interaction. When the user hovers over the size of the item expands, on hover out the item returns to the original state. A clean, lightweight solution to create expanding portfolio items in Webflow.

Here's a great style guide template that you can clone to use, or modify for your own Webflow sites. It's built with a grid page and bootstraps 4 style columns. It includes a typography section, color palettes, button designs, form inputs and labels including checkboxes and radio buttons. Cards with shadows and much more.

A beautiful text hover animation for Webflow built entirely from native Webflow interactions. On hovering over the circle the text changes its position on the page. A great way of adding a unique text animation effect to your Webflow site.

A hero header component design in Webflow featuring scrolling text marquee and a unique image design. This design is perfect for photographers, videographers and other creatives due to it's unique slanted text effects, infinite text marquee, and unique primary image vignette.

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

Looking to create tabs with Webflow CMS? Here's a way of achieving tabs driven by Webflow's CMS adding extra functionality to your site.

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

A fancy, full-screen responsive and mobile ready menu navigation. The custom open and close animation is with an animated background gradient that adds some uniqueness to the menu itself. View the youtube tutorial here:

A demonstration of creating a reflecting WebGL three.js cube in Webflow. This creates a reflecting 3D cube that's interactive when clicked and dragged creating a 3D style effect. Moving the mouse on the site moves the cube to different areas of the page.

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.

Six different wonderfully designed material style navigation menus and footers for Webflow. These are perfect cloneables to quickly build either navigation menus, footers, or both for your Webflow site.

A very cool scrolling spiral menu text effect. Opens up a fun opportunity for a unique full screen menu build.

This is a fun mouse cursor effect that creates an artificial spotlight effect in Webflow. Simple settings with mouse movement interaction. There are two versions, shadow and white on white. Any color or text is possible.

Here are examples of multi-layered SVG shape overlays with generated animations for your Webflow site. There are several examples in this cloneable and provide good demonstration of how to use SVG shape overlays. Now you can easily modify the SVG colors in each pages custom code panel (header). Easily create a transition for your menu links. There are two demonstrations of ways to prevent multiple clicks and having the menu get out of sync via a Webflow interaction.

This demo showcases a technique of using a SVG/Lottie menu that comes in from the right to the left. The path was created in Illustrator and then animated with After Effects. This was then brought into Webflow and the animation was triggered alongside a menu opening interaction. Animations were also added for the open and close buttons.

Here's a fun way of adding a text color invert on mouse hover effect for your Webflow site.

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

Range slider examples created for Webflow. These range sliders allow you to capture price ranges for your form inputs and specific amounts as well. These demonstrations can be easily edited to suit any amounts or styles based on your own specifications. The sliders are built using custom code found within the page settings so be sure to add the code to your site in order to work properly.

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.

Add drag and drop list functionality to your Webflow site with this javascript library. This uses Sortable.js to create sortable lists within Webflow. Perfect for to-dos, sorting, and other functionality that may be needed for your Webflow site.

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.

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

A great way to add mouse aware, location aware slider navigation interactions to a slider.

A demonstration of using Sketch.js for a background interaction within Webflow. Using sketch.js the background of your Webflow site becomes a drawing canvas in which users can move their mouse and it creates a design on the background of the Webflow site.

A unique button animation that displays a ripple effect on click.

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.

Add a hover over highlight animation to your accordions in Webflow. This adds another layer of dynamic effects to your accordions when hovering. No custom code needed and all done via interactions in Webflow.

A CMS driven accordion calendar for Webflow. Perfect for an events page or about page on your Webflow site. In order to use this be sure to copy the hidden section which includes an unbounded CMS design.

Here's another way of achieving a full page/section sticky with a pagination indicator using PagePilling.js. Here are some notes. Start with a div with ID pagepiling. Within the div create several sections with the class section. Make them a height of 100VH. Add the code found on the page to your head tag. Add the code to your body tag. You can then customize it with anchors, scrolling speeds and navigation based on the GitHub here: https://github.com/alvarotrigo/pagePiling.js/

A 3D rotating cube that can be customized with images or videos, which can add a nice dynamic level for your features section. The effects are achieved via Webflows native interactions and transforms.

Here's a clean popup modal that includes a slider for your Webflow site. Easy to implement and with cookies you can display the popup once.

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.

Here's a unique and fun button with border animations in Webflow. Initially the button looks rather basic, however with a few line animations it makes this button really pop. The lines were placed within wrappers and set the wrappers to an overflow hidden. The move animations to each line was added to control which direction the lines came in from with the different hover states. Scaling the lines doesn't allow for transform-origin to be changed on the different states, hence why the move option was used instead. There are 6 line wrappers with lines inside of them and they are all placed on different sides of a button with a position of absolute.

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

A high quality CMS Swiper.js slider that's perfect for your Webflow site. This slider features a draggable list of items driven by Webflow's CMS collections. When the user clicks on one of the items it expands the card into a full screen view and provides additional information about that card. This is perfect for pages in which you want to keep the users on the page but need to provide additional information about that slider item. As mentioned this utilizes but also uses GSAP, CustomEase.js to complete this interaction. The custom code can be found in the page settings and uses cookies to store visited information. This is an advanced slider solution and I'd recommend this only to people familiar with coding, Javascript and GSAP & Swiper.

Bring your videos to life in Webflow with this unique hover over button animation. When you hover over the play button the button creates a loading style animation via a micro intraction.

A beautiful sign up page created for Webflow as a rebuild of the Linear sign up page. This sign up page features a large Continue with Google button, while the continue with email button shows the email option after being clicked. This page features a well designed layout with custom buttons, hover effects, input fields and more.

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

A popup that shows you the scroll page percent and location of your vertical height on a site.

Looking to create a rotating text effect for your headline and hero section? Here's an easy way to add this effect to your Webflow site. This also works in the preview/designer via a custom HTML code embed.

Want to compare two products or images on your Webflow site? With this cloneable you'll be able to add an image comparison section to your Webflow site. This is perfect for product comparisons, service comparisons and much more. Please note that this utilizes Beerslide.js so you'll need to add the custom code found in page settings for this to work properly.

Three different variations of an infinite scrolling marquee driven by completely by Webflow CMS. All you need to do is choose the marquee, use Webflow CMS and you've got an infinite scroll marquee. Three different size variations available in this cloneable. The scrolling marquee is created via CSS, making this easier to implement then Webflow's native interactions, especially when incorporating Webflow's native CMS. You'll find this code within the HTML embed.

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

Here's a way of adding a flipping card animation to cards on your site. This component can be used for a number of scenarios and allows for additional information to be displayed on your cards without taking up important site real estate.

A custom, automatic slider with unique animations on Webflow. It was made with Webflow with custom interactions.

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 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 unique, 3D infinite scroll marquee for Webflow. To create this effect two blocks are created within a wrapper with a perspective applied to it to create the 3D effect. There was also a self perspective applied to the block themselves which seems to have altered the position of the angles. Then text was added to the blocks inside of each the left and right block. The overflow was set to hidden for both blocks so that the text would move in and out of the blocks. The animation the text moves from 100% to -100% on the x-axes. The duration of the text movement was set to 5 seconds. The second text has a delay of 2.5 so that the animation because the blocks have the same width. Easing is set to linear so that the effect doesn't effect the time and it looks like it moves through both blocks.

A three tier pricing table design with a floating primary central div for Webflow. Perfect to get your Webflow pricing page launched quickly with three different packages, shadows, and button hover animations and a fully responsive design.

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.

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.

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.

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.

A fun and clean hero and menu loading interaction in Webflow. When a user loads the page the text appears to load at different intervals, move around and then eventually load the entire page including the menu. There's a scrolling text marquee at the top of the page, parallax style scroll interactions, a menu with slide in interactions and much more. This was built using all native Webflow interactions and was built with the Finsweet client first framework and is fully fluid responsive.

An infinite slider design for Webflow built using Webflow's native slider and interactions. This fully responsive Webflow slider features unique hover over interactions in which the next and previous navigation appears only on hover. The slide continues endlessly by looping to the starting slide upon finishing the rotation.

Here's a demonstration of using Dribbles API to display shots from yours, or another Dribble account on your Webflow site.

Have your navbar shrink on page scroll via this Webflow cloneable. Easily create dynamic navbars for your Webflow site that shrink upon scrolling down the page. Once a user reaches a certain point on the page the navbar transitions from dark to light while shrinking. This does not require any custom code and utilizes Webflow's native interactions. This utilizes Webflow's While scrolling in view for two different classes and as previously mentioned does not require any extra custom code. This cloneable is perfect for anyone looking to create a dynamic navbar that allows for dynamic changes based on the users scroll depth on the site.

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.

Make those Macbook mockups interactive by adding internal scroll to the screens via this Webflow cloneable. This cloneable requires no additional code and can easily be applied to your site. Simply copy the element to your site and then modify the image found in the Macbook wrapper called website image and modify it. This will allow you to add an image inside of a Macbook mockup so that the users can scroll inside of it. A fun way of showcasing items, features, portfolio site screenshots and more.

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 menu and navigation dropdown design for your Webflow site. When a user hovers over the navigation bar the secondary menu drops down with a nice animation effect.

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.

Here's a way to create a horizontal scrolling slider item based on a Webflow CMS. The top one is an example of it in use, while the second one is easier to copy and paste into your projects. Just unbind it from the collection and you can then copy and paste. It's limited to four items so if you end up adding more you'll need to go in and edit the interaction. Please note that there are separate interactions for mobile, tablet and landscape.

A unique interaction that features a hover over animation for images that creates a swirling effect as well as an animated button overlay. The interaction can be used for blog cards or any other type of card or element which links to another page.

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

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

A template on how to use Auth0 and Webflow to create gated client-side content.

Infinite slider carousels built with Webflow native interactions and no custom JS code or necessary embeds.

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.

A unique demonstration of using GSAP Flip & Scrolltrigger to move a video around the page based on the users page scroll in Webflow. As the user scrolls down the page the video transforms and moves in different locations on the page. It grows, rotates, and shifts locations, becoming the background of a section, moving to the right of a card and following the user throughout the navigation throughout the site. This method requires the custom code found within the custom code section in page settings. Utilizing GSAP, Flip.js and Scrolltrigger.js you can customize the locations and targets based on element IDs. Be sure to check the page design as well since there are custom CSS HTML embeds found on the page as well.

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 product card that displays the title on hover and follows the mouse in Webflow. This interaction is a very well designed interaction that flips the image and provides the title on mouse hover. The title then follows the mouse cursor over each card, displaying the relevant product names title.

Here's a well designed checkbox with an interaction animation. A perfect way of adding a unique checkbox design to your Webflow sites with a fading animation.

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.

A simple pricing table with a three column design for Webflow. This simple pricing table features a blue design with gradients, animated circles background, and a primary pricing package with features options.

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.

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

Here's another way to add full page scroll snapping functionality to Webflow via Fullpage.js. In this example you can see full page, smooth snapping section on scroll. Please note that you'll need to add the custom code found within the page settings found in both the header and body sections.

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.

A complete Splide.js CMS slider solution for Webflow. Splide.js offers a great solution over Webflow's native slider solution. Lightweight and mobile friendly this slider offers four different designs and implementations, including a Webflow CMS slider solution using Splide.js. This technique does require custom code that you'll find within the page settings, custom code area. Using this solution you can update the number of items per page, the number of items changed per slide, infinite looping, pagination, speed, drag threshold and much more.

Now you can utilize a rich text editor for Webflow forms via a little bit of custom code and JS. Easily add this functionality to your Webflow site to make even richer forms.

Add a click to text functionality to your Webflow site. Using this functionality when someone clicks on this link it'll open their default text messaging app to send a message via text message. Please note that this uses an HTML text link embed in order to function properly.

A modern, full screen menu with a slide in animation as well as hover over text effects.

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

A fun example of how to utilize native div shapes to create ultra gradients in Webflow. In this example the author creates unique gradients via Webflow by creating colored blobs and utilizing a number of different effects to create a gradient style background for your Webflow site. This utilizes a combination of border radius, 2d & 3d transforms and other effects to allow you to create gradients without 3rd party images or CSS gradient classes. Add in native Webflow interactions and you can build Stripe like animated gradients in no time.

A before/after comparison component built with native Webflow interactions. Perfect for an image optimization service or demoing the difference between two different products/services. Fixed width before/after images, position absolute, and an interaction to resize the containers on hover.

A great way of adding a dynamic, conversational style contact form for your Webflow site. Add some flare to your contact forms.

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.

Want to add smooth scrolling to your Webflow site? With this cloneable you'll be able to add smooth scrolling via luxy.js. Adding smooth scrolling doesn't need to be complicated and there are plenty of options to achieve this inertia type scroll effect although Luxy.js provides a great way to achieve this.

A spiral 3D spinning interaction that requires no WebGL, third party libraries or any custom code. This was built entirely in Webflow with Webflow's native interactions. As a user scrolls down the page the images spin around and rotate around the page. A fun and unique interaction that showcases the power of Webflow. This is perfect for portfolios, or other items on your site. This was built utilizing While scrolling in view and taking advantage of only two options, move and rotate. Essentially the items layout allows for the positioning of the item. By utilizing class names each class will have the same result and effect.

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.