Discover Webflow cloneables

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

Here's a dynamic double vertical bar chart that's hooked up to Webflow CMS. It's nearly responsive and hooks natively to Webflow's CMS via an HTML embed.

A well designed lateral menu animation built for Webflow. When a user clicks on the menu tab the entire menu opens up slowly sliding in to expand over the entire page. This was built using Webflow interactions with no custom code required. There's an interaction animation built for both opening and closing the menu.

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.

A tag/tooltip hover badge perfect for your Webflow site. When yo hover over the colors, individual tags/descriptions follow the cursor on your Webflow site. Be sure to add the HTML embed code to your sites for this to work. The elements are all created by created an element ID and associating the HTML embed script with the element ID.

A fun 404 page for Webflow featuring a scrolling marquee and unique hover over interactions. This is a rebuild of the pluto.app/404 page. Featuring various scrolling marquees at different speeds with a gradient background and mouse hover link interaction.

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

Here's a 3D parallax style card interaction/animation for Webflow. With this effect a card rotates on mouse move, and the image inside the card rotates 360 degrees that gives the effect that hte card is moving. A caption also appears on the bottom section when hovering on the card. The card is in a 3D wrapper with a child perspective applied to give it a 3D effect as it moves.

A free dashboard collection for an ecommerce company.

Show/hide image on text link hover.

Here are well designed service cards that have a rotation hover interaction that highlights and rotates the card for Webflow. This perfect for adding 3D dimension to a Webflow site via service cards, project cards or even pricing tables.

A recreation of Headspaces navigation/menu in Webflow. This free cloneable features a fully responsive navigation with hover effects in Webflow. It features a mega menu style hover interaction with unique menu item hover effects. A beautiful mega menu that'd be a perfect starting stone for your Webflow project.

A free cloneable of the Dezin style guide for Webflow. This contains everything you'd need for your Webflow site, including color palettes, surfaces, typography, buttons, form inputs, iconography, images, video embeds and even tabs. This is a great way to kickstart your Webflow sites and build a faster, and more cohesive designs.

A fun concept of a fan site for the Matrix. Utilizes a moving background code screen much like in the movies.

Don't pay for a chat widget, instead build your own chat widget form with Webflow. This is a contact form bubble/widget that is fully responsive. The second page of the cloneable allows you to visually edit the chat header and pictures via a symbol.

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.

Rather then a boring toggle switch why not add a bouncing toggle switch to your Webflow site. This is an easy to implement bouncing toggle switch created with an easing animation.

Here's a wonderfully designed mega menu navigation with dropdowns for Webflow. This mega menu is perfect to get your navigation built quickly for your Webflow site. Featuring multiple different dropdown styles, perfect for any Webflow project.

Four different custom button designs for your Webflow site. These custom, animated buttons already have the necessary interactions to make them dynamic and interactive. A variety of hover states effects can be found in these 4 different button designs.

A unique parallax style section that features dynamic scroll interactions for Webflow. As you scroll down an image and background sections move at different speeds providing a unique Parallax style effect. There's also multiple different images that appear when hovering over the links on the side. All of this is built with Webflow's native interactions and no custom code.

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.

Here's how you can create a custom cursor to your Webflow site.

A unique slider animation interaction for your Webflow site. Upon next slide the transition zig zags each slide and loads in the next slide with the same animation.

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

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.

A free cloneable fashion site hero section, perfect for a website or portfolio section. This was inspired by a Dribble and to test out the authors expertise in Webflow. Initially starting the design in Figma, and then translating it to Webflow. For the interactions the author utilized Class Adder via Finsweet and for the text animations utilized a javascript library provided by Timothy Ricks.

A free login/sign in page for Webflow. This free Webflow cloneable features a unique feature in which the password field is hidden until a user begins to type their email address. A unique way of turning a simple page into a dynamic one while potentially reducing bot activity.

Here's an example of implementing three.js animated interactive road on your Webflow site. Three.js is a great way to add interactive, 3D effects to your Webflow site.

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.

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.

A very cool, custom OGL cursor effect for Webflow. You can edit the speed, count of lines, friction, colors and other settings. A fun and dynamic cursor effect for 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 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.

Enjoy Webflow's loading screen? Now you can add Webflow's circular preloader screen to your Webflow site. This preloader was built using Webflow's native interactions as a demonstration of what you can build with Webflow.

A unique card hover animation in Webflow that creates a 3D parallax style interaction. A great example of what can be built using Webflow's native interactions. When hovering over the card a two layer parallax effect is shown with the top transparent purple layer separating from the bottom image layer. Both layers seem to transform in a 3D space while the Name and Title moves at a different rate than the other two cards.

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 a way of achieving a toggle switch via native checkboxes in Webflow. These Boostrap toggles, a third party library which converts checkboxes to goggles, without needing to import all of Bootstrap's classes and styles. The Bootstrap default colors have all been defined in a style guide so that you can alter the colors yourself without having to touch any code.

A thorough style guide based on tribe.so's brand and styling guides. This style guide includes colors, typography, structure, global classes, icons, forms, rich text and buttons in a well designed structure.

A custom slider that changes the size and focus of the slide after it changes to the next slide. Perfect for emphasis on the main slide while maintaining a transition effect for the other non-primary slides in Webflow.

A unique slider interaction that changes the slide and the pages background image upon each transition in Webflow. A fun way of creating a hero section that adds a level of dynamic flair to your Webflow site.

Here's a way to use CMS video backgrounds with Webflow that fit the entire container. This works with Webflow's own compressions, as well as mp4 and webm. The background videos are via lazyload and will only load on scroll.

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.

A compilation of landing page design components including features, cards, call to actions, testimonials section and more.

Here are quite a few, well designed UI layouts for video cards and elements for video sections. You'll find hero sections, grids for video blogs, play button animations, and pop-up modals for videos for your Webflow site.

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.

Easily add a grainy effect to your entire site. This uses a grain png that was on a Webflow site. You can create your own grains as well to change it up.

A fully cloneable animated blurry gradient background that can be used on your hero section, or other sections of your site. Helps add a layer of dynamic elements to your Webflow site. This is a 100% native solution with Webflow interactions and utilizes colored div blocks with CSS scaling.

A well designed, three column pricing page cloneable design that includes a 3D effect, features section and much more.

A 4 column pricing table cloneable design featuring a bump effect for a primary package in Webflow. This beautiful pricing table includes features, package names, pricing info, and a 3D bump effect for the primary package that you'd like to put emphasis on.

An automatic logo marquee created with Webflow interactions. This cloneable allows you to easily add an infinite logo marquee/scrollable to your Webflow site. This relies on Webflow interactions and can be customized to your specifications. Simply adjust the logos and then update the Webflow interaction based on your needs and the number of logos that you have. You can also adjust the speed at which this works by updating the duration time from 30s to your own choosing within the Webflow interaction.

Here's a unique way to add a timed automatic slider to your Webflow site. Typically native sliders stop autoplaying as soon as you interact with it, however this version allows it to continue to play even after interacting with the slider. The progress of the slider is tracked via a lottie animation. This is accomplished via native interactions and CSS only code.

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 fully native dark-mode toggle button to convert your Webflow site into dark mode or light mode at the switch of a button. This technique utilizes Webflow's native interactions and the Filter, BG color, text color and border color functionality.

A well designed hero section that offers 3D styled product demonstrations with hover over interactions. Perfect for a startup or services company that wants a fun, well designed hero for their homepage.

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.

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 stunning hero designed for an agency or similar industry in Webflow. This hero section features an automated slider with beautiful transitions, a full page hamburger menu, simple yet elegant design, legacy interactions for scroll down button and a stylish link hover interaction.

A unique water ripple interaction/effect based on the mouse movement for Webflow. The ripple effect is created via JS found in the page settings powered by Jquery Ripples. A fun effect that can be easily added to your Webflow site or project.

Here's a way to add GSAP velocity scroll effect to your Webflow CMS image library. Using this technique the images create a shredding load effect which is based on the Webflow native CMS library and images found in that library. A good demonstration of how you can use GSAP with Webflow CMS.

An infinite scroll marquee on hover interaction for Webflow. When a user hovers over a link an infinite scroll marquee animation is displayed. This is perfect for a menu or navbar within Webflow in which you'd like to add extra emphasis and animation design to. This was built entirely from Webflow's native interactions and requires no custom code.

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 Webflow pricing table component featuring tabs on the side for different pricing packages.

Here's a tall pricing page design with annual pricing toggle in Webflow. A full pricing page design for your Webflow site that includes an annual/monthly pricing toggle interaction, service features, and a FAQ section.

A great 3D card interaction for products or listings of services on your Webflow site. Upon hovering on the card the purchase link pops out and the card fully 3D transforms to follow the mouse movement. A great way of taking a static product card div and turning it fully dynamic.

A full SaaS pricing table design for Webflow. This pricing page includes a monthly/annual pricing table, features sections, accordion FAQ and much more. This includes a fun hover interaction, updated page copy and font styles.

A fun way of showing off a product by allowing for feature zoom in on click. Great for ecommerce sites that need to provide context into features with an interactive zoom in capability.

A colorful pricing plan design table for your Webflow site. Easily copy and paste this design to your Webflow site and add a pricing page in no time.

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 nice gradient color transition for a button on the hover state. This is accomplished by using only Webflow interactions.

A fun way of changing the gradient background color via mouse in Webflow. Please note this will not work in Firefox. This is a native Webflow interaction and just a single line of CSS code. The CSS controls the pointer events to none while the interactions control the location of the blur and it's surrounding effects.

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.

A fun, book and page flipping interaction in Webflow. Please note that while a majority of the page designs are created with Webflow interactions there is some custom code found in the page settings to get this to work properly.

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

A demonstration of text clipping with a gradient and a background image. The fontset used in this example is Heatwave Typeface.

A perfect way of adding login and pop up modals to your Webflow site. These sign up and log in modal windows are well designed with custom form inputs, buttons and open/close interactions.

A text fill on hover effect for Webflow. When you hover over text on your Webflow site it fills the text with an animation effect.

Add a progress bar to your draggable CMS slider sections in Webflow. Typically most draggable, or third party sliders, don't offer a progress bar indicator. Using the power of Dragdealer.js you can now add a progress bar and draggable CMS slider to your Webflow site. Please note that you'll need to add the global styles HTML embed as well as the custom script found in the closing body tag within the Page settings for this to work properly.

Ever wanted to create your own, customized scrollbar in Webflow? Now you can use any image you'd like to replace the browsers standard scrollbar. In this example a loaf of bread was used to customize the scrollbar. You can find the custom scrollbar code within an HTML embed found on the Webflow cloneable.

Here's a guide and an example of Particle.js on a Webflow site. Particle.js is a fun way of adding a dynamic background to your Webflow site. In this example a new particle is added every time you click on the background of the site.

Here's a way of creating a product tour in Webflow utilizing native interactions and custom tool tips. Rather than using complicated external JavaScript libraries you. can build your own guided product tour using a simple tooltip design and Webflow's native interactions.

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.

A fun way of adding a canvas cursor tracking element via HTML canvas to your Webflow site. With a bit of JavaScript you can add a fun cursor tracking effect to your Webflow site. Be sure to add the custom JS code found within the page settings for this to work properly.

A product card with hover animations for Webflow. When a user hovers over the card the title of the product appears, and a few icons appear as well as the price staggered from the bottom. There is a cart icon that can be used to add the product to the cart, an eye icon which can link to the product page, and a heart icon that can link to a counter of some type.

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

Looking for a dynamic and easy way to build email signatures in Webflow? Here's a CMS clonable that allows you to easily manage and create email signatures within Webflow. This is a step-by-step guide to create and manage you or your companies email signatures and designs from within Webflow. Building an email signature can take seconds now thanks to the power of Webflow's CMS and your own unique designs.

A linkable hero overlay for your Webflow site that grows as the user hovers over the different split sections. Perfect for a modern hero section, pre-landing page, and other similar sections on your Webflow site.

A demonstration of how to add a Chart.js bubble chart to Webflow. This technique uses an HTML embed to work properly so you'll need to add the HTML embed to your Webflow site. This method could technically be tied into Webflow's native CMS to allow for the CMS system to update and populate the Chart.js chart.

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

A frequently asked questions FAQ expanding accordion interaction for Webflow. The interaction expands and then collapses the accordion based on each click.

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.

Here's a way to add background video, with sound, to your Webflow site that features a mute/unmute button. This is completed using plyr.js plugin and works on any Webflow site. Perfect for background videos or other sections that require sound/audio but with the ability for users to mute and unmute. Be sure to add the html video embed, as well as the plyr.js code found in the closing body tag section of the Page Settings.

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.

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.

Let's face it, Matter.js is fun! It adds dynamic elements to any site where you can play, throw, and drag items into each other with real like physics. This cloneable features how to utilize Matter.js with SVG bodies. While technically this is easy to accomplish this does require a bit of custom code and HTML embeds, with proper div names to work properly. You can find the custom code for Matter.js and this effect in the Webflow custom code page settings, also take note to the CSS HTML Embed located on the page. This technique uses Matter.js, pathseg.min.js and dcomp.min.js to work properly. This uses element IDs to target the matterContainer and can be further modified to your own specifications. A wonderful example of how to add Matter.js to your Webflow sites in a fairly straight forward manner.

A unique interaction in which a circle follows the page scroll in Webflow. As you scroll between sections a circle follows each section and interacts with the next page section. To use this properly make sure that you add the global styles html embed, as well as the custom script code found in the /body section of the page settings. This uses GSAP as well as Scrolltrigger.js.

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.

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.

Examples of creating mouse over 3D text effects with Webflow. The text letter effects is created via a Mouse move interaction and the rotate effect. All of the interactions are created with Webflow's native interactions and no custom code aside from a small CSS snippet for pointer events none.