Discover Webflow cloneables

A modern cloneable accordion grid for Webflow. This accordion grid is a free and easy copy and paste cloneable built with all necessary interactions so that you can quickly add an accordion to your Webflow project.

Text reveals is one of the most popular animations on the web today. This demonstrates how to achieve text reveals from different locations in Webflow. It's built using a custom script so be sure to check out the custom code section in Page Settings to ensure you have the proper scripts for the text reveal examples you want to achieve.

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.

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.

A unique way to display and reveal a thumbnail image preview on hover.

Here's a cloneable 4 column feature dark variation of a pricing page in Webflow. This feature rich version includes important aspects like tooltip hovers, comparison tables/grids, and sticky headers on page scroll. This version also includes a mobile friendly tabbed version for phones and smaller resolutions.

Here's a dark design full width large accordion with interactions for Webflow. An easy way to add a huge accordion 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 way to add a dynamic counter metric section to your Webflow site. This is accomplished via the simple JS available within the custom code section of the page settings.

Here's an easy way of adding tooltips to your Webflow site using tippy.js. Simple tooltips have never been easier with Webflow by using tippy.js. To style them just change the custom attributes in the element settings. In order for this to work you'll need to view it on the published site and copy the custom code. This demonstration shows six different tool tip variations, including default hover, bottom tooltip, animated tooltip, tooltip without arrow and a tooltip that follows your cursor and finally a tooltip on click.

Add flair to your Webflow buttons with this linear gradient animation. This demonstration include two different variations of the linear button gradient animation, one created solely via Webflow interactions and the other via CSS. There are also two different styled animations, one that's one time and another that infinite loops while on hover.

A rotating animation that transforms an image before and after the item scroll in Webflow. This is perfect for before and after effects and can be used without the rotation effect as well. There's also a mouseover interaction that creates a magnetic pull of the image.

Here's a way to add a custom mouse cursor tooltip in Webflow. This custom tooltip fades in when hovering over an element and follows the mouse pointer over that element. This could be used for project title information, additional/next slider information and much more. A majority of this is created with Webflow interactions. Please note that there is some custom style CSS in the head section of the page.

A Webflow slider created with SplideJS tied into Webflow's native CMS system. This slider features a draggable slider with a progress bar. In order to get this to work properly you'll need to add the HTML embed splide code as well as the code found within the page settings.

Here's an example of displaying information on card hover animation for Webflow. When hovering over the image card the title, author and view project button appears from the upper left of the image. The effect was achieved by placing a div block inside of the card wrapper. In the interactions the div block was set to an opacity of 0% initially. On hover the div block moves to the lower right and the opacity changes to 100%. On hover out the div block returns to its original position and the opacity changes to 0%

An interactive dark Chrome mockup design for Webflow. This Chrome browser window mockup is perfect to showcase screenshots of product pages and page designs. This is built entirely in Webflow and utilizes a number of native Webflow elements such as forms, interactions and more to create a beautiful interactive Chrome browser window.

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.

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.

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.

Here's a custom slider with dashes instead of dots and a next/previous slide via mouse click in Webflow. The cursor turns into a custom cursor upon hovering above the slide on your Webflow site.

A unique, fancy background hero with text masking effect over a background autoplay video.

A beautiful, draggable slider for your Webflow site. Some notes about the draggable slider, in mobile view it uses hammer.js for the slider. Images can be updated by changing the attributes found in each <li> item>. The view details URLs can be updated the same way. You can also change the view details and view project by changing the data-video to false. If you want it to say something else you can dive into the code and update that way.

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.

A full screen animated navigation with hover interactions and slide in animations.

An infinite diagonal parallax slider for Webflow that's draggable or can be changed via arrow keys.

Another demonstration of Webflow's new blending and backdrop filters. Here you can see hue, screen, hard light, color, color dodge, difference, multiply, and overlay blending and background filters in action in Webflow. A clean way to quickly demonstrate the different affects that blending and backdrop can have on images and items on a Webflow site.

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

Here's a way of creating a glowing, 3D hover card effect in Webflow. When a user hovers over the card the card creates a 3D effect with a gradient outline, another interaction is added to show a 3D rotating reflection. All of this was created with Webflow interactions and zero custom code.

A recreation of the Firefox browser window as a mockup in Webflow. This Firefox browser mockup features open and closeable tabs, forms to act as the URL bar and hover states for all of the browser buttons. A unique way to create and demonstrate product images, product demonstrations and more in Webflow.

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.

A multi-column, fully fluid responsive card slider for Webflow. The starting cards are left aligned while the final card is right aligned. The slider mask is set to percentage based width varying on the number of cards in the slider. This way you can control the number of cards shown depending on the size of the screen.

Five different image mouse trailing effects in Webflow. When a user moves the mouse cursor on the site the images pop up and follow/trail the cursor. These different effects allow you to add a new layer of dynamic elements to your Webflow site that open up all types of possibilities.

Integrate GSAP scroll text effects to your Webflow site. Eight different text scroll effects powered by GSAP for your Webflow site. The effects include words sliding up, individual words rotating in, words sliding in from the right, individual letters sliding up, individual letters sliding down, and individual letters fading in. This effect utilizes GSAP, ScrollTrigger and split type in order to work properly, you'll also need to add and modify the pages custom JS code in order for it to work. The code can be modified to change the start offset of the effect, the opacity, the duration, the ease effect and much more. Unlock the power of GSAP for various text effects today in your Webflow projects.

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

A unique colorful gradient background animation technique to add some flare and depth to your Webflow site.

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

A demonstration of how to utilize lotties within Webflow CMS. This cloneable example will help demonstrate how you can embed, utilize and even control lotties via Webflow CMS system.

This is a demonstration of how to randomly order CMS items on each page refresh using custom code. This was created because the random CMS settings within Webflow wasn't giving a random order on each page load. This is an example of how to truly have a random CMS list on each page load. This uses custom code and a class name assigned to the cards. There is also a non-CMS version of this as well.

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.

A well designed centered pop up opt in modal for Webflow with premade gradients. This is a perfect way to add a pop up opt in modal to your Webflow site due to its premade gradient shadows which will make this modal window pop on any Webflow site.

A massive collection of 180 premade gradients that are perfect for your next Webflow project. This makes adding gradients to your Webflow site a breeze, simply copy the cloneable page with the gradients and then simply add the class to any div and you'll see the gradients added immediately. For example, you can add Winter Neva, a bluish light gradient by adding .gradient-winter-neva to your Webflow div as a subclass. In this massive pack of 180 Gradients you'll find gradients with various styles, such as angular, radial directions, and gradients with a number of different colors. The best part, these gradients can easily be modified to your own specifications as they use Webflow's native gradient functionality and all the presets have already been completed for you. Simply update the colors, direction and settings to create your own Webflow gradients.

A unique CMS page scroll interaction trigger effect created with Webflow's native interactions. As a user scrolls down the page an image of a person is displayed based on the location of the viewport. This was created using Webflow's native interactions and zero custom code. This Webflow CMS scroll interaction utilizes Webflow's when scrolled into view and scrolled out of view functionality. As the page is scrolled the items opacity, text color and BG color changes and as the item is scrolled out of view it is also manipulated to show the next time. A simple yet effective strategy of implementing a unique page scroll interaction via Webflow's native interactions.

A sign up authentication page design for your Webflow site. This includes show/hide password, input field autofocus, image slider with a responsive design.

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

Here's a way to add magnetic images to links on Webflow. The images appear as you hover over the links and stick to the mouse and overlay the text over the image. This method relies strictly on Webflow interactions and doesn't require any custom code or HTML embeds. The interactions use a combination of hide/show, scale, opacity text color and border color to work properly.

A sticky, stackable cards section that stacks upon scrolling on the Webflow site.

A method to create more dynamic and interactive experience by allowing your users to view a simple cursor animation powered by GSAP and Cuberto Mouse Follower. This utilizes custom code so you'll want to make sure you check the pages custom code section for stylesheet and JS code. This combines the power of GSAP and mouse-follower.min.js to create a smooth mouse following animation. With this you can modify the MouseFollower scripts speed, skewing and skewingText functionality to your specifications. Unlock the power of GSAP powered dynamic site elements for your Webflow site today.

A set of 8 different SVG preloaders for Webflow. These SVG preloaders are created entirely using SVGs and can be added via HTML embeds to your Webflow projects. These are perfect for demonstrating a loading state such as a preloader, submit button or other similar action.

Here's a way to add an infinite, transparent slider to your Webflow site. An easy cloneable that you can copy and paste to your site and have it setup and running in no time.

Add a cookie consent to your Webflow site in no time. Here are 5 different designs for a cookie consent with working codes attached at the bottom of the page.

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.

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.

Here's a way of adding a custom cursor to your Webflow site via interactions and one line of CSS code.

Power up your Webflow tabs through a timed, auto-rotating tabs feature. This is perfect to add emphasis to your Webflow tabs and more specifically demos, explainers, testimonials and just about everything else you can think of. This is a super simple script that adds auto rotation to Webflows native tabs.

Easily add a countdown or launch timer to Webflow. With this you can easily add this into your own project. The numbers have separate IDs for Hours, days, Minutes and of course Seconds. To change the time simply go into the Custom code and change the date. The date is in the following format, "2018-09-28-00"

A unique iPhone mockup screen scroll animation for Webflow and perfect for portfolios and similar design elements. This cloneable features no additional custom code or HTML embeds and utilizes Webflow's native interactions to perform the unique animation. As a user scrolls down the page the images in the iPhone mockup provide a scroll interaction that appears to show the images scroll down as the page is scrolled down. Utilizing Webflow's While scrolling in view this moves the images within the iPhone mockups as the page is scrolled down. Since this is class based this works for all of the iPhone mockup images throughout the site. A simple, yet effective Webflow interaction that makes any portfolio pop.

Here's a responsive dropdown navigation menu for Webflow. An easy cloneable that can be added to your Webflow site to get your navigation up and running quickly. Best of all it's already responsive and mobile ready.

Here's a beautiful WebGL colorful background animation on page load. A great way to add extra color and a dynamic element to your Webflow site.

Knockup is an end to end Figma to Webflow framework created by Edgar Allan. It helps designers and Webflow designers accomplish more by working together via an easy to understand framework. This framework defines the approach that Edgar Allan uses for all projects, from single page sites to large scale enterprise arrangements.

A custom product display using accordions in Webflow. This product display for Webflow is built with Webflow's native builder and utilizes an accordion like effect with Webflow's native interactions. Each card when clicked explands to show additional product information including a an image, title, product description and price.

Here's a demonstration of utilizing ztext.js for 3D text effect on mouse move in Webflow. The background was created from an SVG generator.

Prevent Webflow form spam with this unique form validation technique. Using this you'll be able to block spam emails from generic or invalid email addresses from sending you form spam before they get validated with Webflow's native forms. In order to get this to work you'll need to utilize the code found within the closing body tag of the Page Settings. You can customize the invalid domain names within the settings to prevent any domains that you don't want to have form submissions from.

Here's a way to add a custom, social media sharing hover interaction to your Webflow site. When a user hovers over the icon on the page a social media sharing interaction is triggered that displays 4 different social media sharing sites.

Various demonstrations of how to create magnetic elements in Webflow. This method is typically used for buttons but can be implemented on a variety of objects using a single interaction and class. In this demonstration a parent class called is-magnetic has an interaction tied to it that allows the items in this class to be "magnetic" and drawn to the cursor. A

Highlight text as you scroll via Webflow via interactions that are based on the center of the viewport. This is created via Webflow interactions and some custom CSS found within the HTML embed found in the page designer. As the users scroll down the page a block of text is highlighted as it enters the viewport. This could be great for lyrics or similar style sites.

A portfolio example site built with grid and then made responsive via Flexbox on tablet and mobile. Watch the tutorial here: https://www.youtube.com/watch?v=zp50_iWll8Y

A bouncing, parallax effect draggable slider for Webflow. When you add this to your Webflow site you'll be able to create a dynamic, parallax style bouncing effect to your Webflow slider. The native slider is left intact so you should be able to integrate native Webflow based scroll interactions. This does not work on mobile devices. Consider Webflows native slider for mobile.

Showcasing Webflow's new blending and backdrop features. This demonstration cloneable shows off how text hover effects behind Backdrop blur and blend effects in Webflow. In this example text behind backdrop blur shapes showcase the effects colored linear gradients and shapes with no color gradients and the effects of text behind with hover effects. This technique uses a bit of CSS to create the text outline and hover effects.

A demonstration of how to add Cookie Consent to Webflow using Finsweet's Cookie Consent. This cookie consent Webflow cloneable features various designs for cookie consents, including modals, banners, pop-ups and more.

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.

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.

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 set of various language switcher elements designed for your Webflow site. If you use translation on your site these handy language switcher elements will come in handy. There are 14 different designs with necessary interactions to make them easy to copy and paste into your Webflow site. Nearly every kind of design you could think of to make this easy to implement.

A unique interaction in which a different image is shown based on the cursor location on the Webflow site. This effect was created entirely from Webflow's native interactions and requires no custom code. A great example of thinking outside of the box, integrating the use of a grid design to trigger the hidden images based on mouse over trigger events.

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.

Eight unique Webflow preloader animations that can be easily added to your Webflow projects.

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

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.

Here's a technique to add growing divs or sections on mouse hover in Webflow.

A simple yet clean header hero component for your Webflow site. This features a large headline, subheadline, call to action and product image section. It also has a basic menu section and is fully responsive.

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 way to utilize cookies to keep a modal, window or banner element permanently closed after a user has closed it in Webflow. This is perfect for cookie consents, one time offerings, opt-in modals and much more. Be sure to add the custom code found in the head section and body tags of Page Settings to your Webflow site.

Here's a way to style code embeds on your Webflow site that are added to Webflow's native CMS system. This allows you to embed styled code snippets into the Webflow CMS. Everything is styled and configured to be super easy to add to your Webflow site. All styles are applied via class names so you won't lose anything during the copy/paste process. The code styling is achieved via highlight.js

Fourteen different testimonial components perfect for your Webflow site. These modern and well designed testimonials were created to help you add a testimonial section to your site quickly. The first variation has testimonials featured in an off centered design, the second variation showcases a simple 3 design with a primary quote and user avatar. The third variation is a large slider perfect to include a larger testimonial section to your site. Other variations included branded colored cards in a slider, a picture of the person with their company logo over their face, a large centered slider, a twitter card style, a video testimonial, tab testimonials and many other variations. This is a perfect cloneable if you wanted to add simple or complex designed testimonials to your site.

A scroll to reveal text masking interaction in Webflow. When a user scrolls down the page the text is zoomed into the masked image and reveals the image upon scrolling. You can edit the text inside each section and change the image to your choosing. You can also add other icons or graphics inside of it. Just be sure to use black/white elements only.

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

A style guide framework built in Webflow so that you can easily build and create a style guide for your projects/clients in Webflow. This framework lays out all the elements, tools, components and resources used to develop them. This is based on the client-first methodology by Finsweet.

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.

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.

Here's a way to achieve a sticky horizontal scroll section within your Webflow site. Using CSS sticky and interactions you can now have a showcase section that horizontally scrolls on scroll down in Webflow.

A fun, interactive bubble blog for your Webflow site driven by Three.js. This interactive bubble blob follows the mouse around the page and moves and interacts based on it's location. A fun way of adding a dynamic and interactive background animation to your Webflow site.

Here is an interaction for hovering over a card using Webflow interactions. Simply clone this and add it to your site to add a dynamic hover interaction to your Webflow site.

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.

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.

A way to achieve a 360 degree spinable book. This was built with CSS grid, responsive typography, 3D transforms and custom CSS properties.

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 unique scrolling interaction in which the images scroll up the page and the title changes in Webflow. This scroll interaction was built entirely with Webflow's native interactions and requires no additional code. As the users scroll down the page images from various locations on the page scroll up the page while at the same time the title of each image is shown as they are introduced on the page.